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.

Here is the page w/ MLA Gallery:

https://wp.monmouthrubber.com/general-sales-literature-rubber-plastic-manufacturer/

Here is the shortcode:

[mla_gallery columns=1 attachment_category=’physical-properties-rubber-plastic-sponge-foam’ post_mime_type=application/pdf link=file mla_style=leftalign posts_per_page=5 mla_caption=”{+description+}” mla_style=leftalign]

Trying to get gallery to leftalign, and to automatically display the gallery in a numeric format.

THANKS!!!!

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.

I followed your (excellent) step-by-step instructions, and it’s almost there! The left alignment now works perfectly, however, the numeric list is displaying strangely. Would you mind taking a look at the page:

https://wp.monmouthrubber.com/general-sales-literature-rubber-plastic-manufacturer/

I used the shortcode you suggested:

[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]

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.

Thanks for checking, but the Row Close and all other mark up settings are exactly as you specified above. Still displaying numbered items wrong – Bunching them up in the first row.

Could it be something within the item tag?

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

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="https://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="https://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="https://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="https://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="https://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="https://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.

I tried what you suggested, changing Row Close to <br style=”clear: both” />—
and looking for the dashes in the page just to verify that the right template is used and the markup is really there — and it did add the —
but not the <br style=”clear: both” />

???? Hmmmmmm

I can give you permissions to access the backend, but don’t want to post publicly. How can I send to you privately?

THANK YOU! ??

I got it work with a little tweaking – replacing Row Close

from this:
<br style=”clear: both” />

to this:
<br clear=”both”/>

Not sure why it did not like the “style” in there. ???

Thanks for all your help – very much appreciated!!!!!!!

Thanks for your update with the good news. I don’t know why the style="clear: both;" did not work for you, but <br clear=both> is valid HTML (although deprecated) and is a suitable alternative.

CSS Clear Property

clear (HTML attribute)

Thanks as well for your offer to grant me a temporary account. I am happy it will not be necessary. Please let me know if there’s anything else I can do.

@moderator – is there any way to clean up the damaged formatting of this topic? Thanks!