PDF Feed alignment and numering results

Thanks for the good words and for your question. I want to make sure I understand what you mean by the “PDF feed“. Are you using the [mla_gallery] shortcode to display a gallery of your PDF documents? If that’s right, can you post the source text of the shortcode you are using so I can give you more specific suggestions on modifying it to get the results you want.

Thanks for any additional details you can provide.

Thanks for your update and for including the shortcode text as well as a link to the page; very helpful.

Your shortcode contains a posts_per_page=5 parameter. This will limit the display to five items, but you should know that there is no automatic way to supply pagination controls to go to other pages when the gallery contains more than five items. If you want a paginated [mla_gallery] let me know and I can give you some suggestions.

Your shortcode also contains two mla_style=leftalign parameters. The mla_style parameter allows you to substitute a custom style template, but unless you create the matching template this parameter will be ignored.

The easiest way to accomplish your goal is to define a custom style template and a custom markup template. The style template will get you the left-aligned items and the custom markup template will get you the numbered list. Here is a style template you can use:

<style type='text/css'>
	#[+selector+] {
		margin: auto;
		width: 100%;
	}
	#[+selector+] .gallery-item {
		float: left; /* [+float+]; */
		margin: 0; /* [+margin+]; */
		text-align: left; /* center; */
		width: [+itemwidth+];
	}
	#[+selector+] .gallery-item .gallery-icon img {
		border: 2px solid #cfcfcf;
	}
	#[+selector+] .gallery-caption {
		margin-left: 0;
		vertical-align: top;
	}
</style>

The only changes from the default template are in the #[+selector+] .gallery-item style. The float, margin and text-align properties are changed (the defaults are in the comment at the end of each line).

To define the custom style template:

1. Navigate to the Settings/Media Library Assistant MLA Gallery tab.
2. Scroll down to the bottom of the “Style Templates” section where you can see a blank “Name:” text box. Give your template a name, such as “left-aligned”.
3. Copy the template above and paste it into the “Styles:” text box.
4. Scroll to the bottom of the page and click “Save Changes” to save your new style template.

Markup templates are a bit more complicated because they have five parts, but the process is similar. Here are the five parts for your markup template:

Open:

<div id='[+selector+]' class='gallery galleryid-[+id+] gallery-columns-[+columns+] gallery-size-[+size_class+]'>
<ol>

Row Open:

(leave this part empty)

Item:

<li>
<[+itemtag+] class='gallery-item [+last_in_row+]'>
	<[+icontag+] class='gallery-icon [+orientation+]'>
		[+link+]
	</[+icontag+]>
	<[+captiontag+] class='wp-caption-text gallery-caption'>
		[+description+]
	</[+captiontag+]>
</[+itemtag+]>
</li>

Row Close:

<br style="clear: both" />

Close:

</ol>
</div>

I have added the “ordered list” tag to the Open and Close parts and the “list item” tags to the Item part. I have also changed the [+caption+] parameter in the Item part to [+description+], to simplify your shortcode a bit.

To define the custom markup template:

1. Navigate to the Settings/Media Library Assistant MLA Gallery tab.
2. Scroll down to the bottom of the “Markup Templates” section where you can see a blank “Name:” text box. Give your template a name, such as “numbered-list”.
3. Copy the template parts above and paste them into the corresponding part text boxes.
4. Scroll to the bottom of the page and click “Save Changes” to save your new markup template.

Once you have defined and saved your custom templates you can change your shortcode to:

[mla_gallery columns=1 attachment_category='physical-properties-rubber-plastic-sponge-foam' post_mime_type=application/pdf link=file posts_per_page=5 mla_style=left-aligned mla_markup=numbered-list]

It’s a bit of work, but you only have to do it once.

I noticed that there are some styles in your Theme (integrity-light.css) that affect .gallery-item. If you are not getting the results you want, check for interference from your Theme. If it does happen, there are ways to avoid it I can work out with you.

I hope that gets you the results you want. I am marking this topic resolved, but please update it if you have any problems or further questions regarding styling your [mla_gallery]. Thanks for your interest in the plugin.

Thanks for the good news regarding your progress, and for posting the link to your page.

I had a look at the HTML behind your page and it appears that you do not have the “Row Close:” markup (<br style="clear: both" />) in your template. Go back and make sure that part of the custom template is present. Let me know what you find.

I had another look at your page. Here is the HTML for the gallery display:

<ol><li>
<dl class="gallery-item last_in_row">
	<dt class="gallery-icon ">
		<a href="http://wp.monmouthrubber.com/wp-content/uploads/2014/12/DURAFOAM_100_EPDM_SERIES_ULTRAVIOLET__OZONE_TEST_REPORT.pdf">DURAFOAM_100_EPDM_SERIES_ULTRAVIOLET__OZONE_TEST_REPORT</a>
	</dt>
	<dd class="wp-caption-text gallery-caption">
		DURAFOAM™ 100% EPDM SERIES ULTRAVIOLET EXPOSURE & OZONE RESISTANCE TESTING
	</dd>
</dl>
</li><li>
<dl class="gallery-item last_in_row">
	<dt class="gallery-icon ">
		<a href="http://wp.monmouthrubber.com/wp-content/uploads/2014/12/DURAFOAM_NBR_SERIES.pdf">DURAFOAM_NBR_SERIES</a>
	</dt>
	<dd class="wp-caption-text gallery-caption">
		DURAFOAM NBR SERIES 100% PURE NITRILE RUBBER
	</dd>
</dl>
</li><li>
<dl class="gallery-item last_in_row">
	<dt class="gallery-icon ">
		<a href="http://wp.monmouthrubber.com/wp-content/uploads/2014/12/DURAFOAM_S88_GREY.pdf">DURAFOAM_S88_GREY</a>
	</dt>
	<dd class="wp-caption-text gallery-caption">
		Durafoam™ s88 Grey
	</dd>
</dl>
</li><li>
<dl class="gallery-item last_in_row">
	<dt class="gallery-icon ">
		<a href="http://wp.monmouthrubber.com/wp-content/uploads/2014/12/DURAFOAM_S88_TAN.pdf">DURAFOAM_S88_TAN</a>
	</dt>
	<dd class="wp-caption-text gallery-caption">
		Durafoam™ s88 Tan
	</dd>
</dl>
</li><li>
<dl class="gallery-item last_in_row">
	<dt class="gallery-icon ">
		<a href="http://wp.monmouthrubber.com/wp-content/uploads/2014/12/physical-properties-durafoam-N231.pdf">physical-properties-durafoam-N231</a>
	</dt>
	<dd class="wp-caption-text gallery-caption">
		DURAFOAM™ N231 & N207 – 100% NEOPRENE
	</dd>
</dl>
</li><li>
<dl class="gallery-item last_in_row">
	<dt class="gallery-icon ">
		<a href="http://wp.monmouthrubber.com/wp-content/uploads/2014/12/physical-properties-durafoam-N231xs.pdf">physical-properties-durafoam-N231xs</a>
	</dt>
	<dd class="wp-caption-text gallery-caption">
		DURAFOAM™ N231XS 100% NEOPRENE
	</dd>
</dl>
</li></ol>

As you can see, there is no <br style="clear: both" /> between the items; that is why the numbers bunch up on the left. I do not see the <li></li> tags in the Item markup you included in your post, either, although they appear in the HTML from the page.

I can’t think of any reason that one part of the template process would fail in this way. You can try temporarily changing your Row Close markup to something like <br style="clear: both" />---<br> and looking for the dashes in the page just to verify that the right template is used and the markup is really there. You can also try adding one blank line at the end of each template part; just put the cursor at the end of the last line in each part and press “Enter” to do that, then scroll down and click Save Changes.

If all else fails, you could give me a temporary account on your server and I can look at it more closely. I understand that may not be possible.