Styling MLA Gallery

Thanks for your question and for the description of your application requirements.

Styling the [mla_gallery] display can be tricky; it depends on your theme’ styles as well as parameters such as the mla_style selection and the default you choose in the Settings/Media Library Assistant Shortcodes tab.

If your site is accessible it would be very helpful to post a link to the gallery display you are having trouble with; is that possible? If not, could you post the source text of your style template and the [mla_gallery] shortcode?

With the additional information I may be able to offer more specific assistance. Thanks for your interest in the plugin.

Hi David,

Thanks for your prompt response.

I am no expert but I suspect that there may be some issues with the theme style as you suggest.

Here is a link to a few images in the gallery…

Settings
Style Template: product

Product Style Template:

<style type='text/css'>
	#[+selector+] {
		margin: auto;
		width: 100%;
	}
	#[+selector+] .gallery-item {
		vertical-align: bottom;
                float: [+float+];
		margin: [+margin+];
		text-align: center;
		width: [+itemwidth+];
	}
	#[+selector+] .gallery-item .gallery-icon img {
		border: none;
	}
	#[+selector+] .gallery-caption {
		margin-left: 0;
		align: cetner;
		vertical-align: top;
	}
	/* see mla_gallery_shortcode() in media-library-assistant/includes/class-mla-shortcode-support.php */
</style>

Shortcode: [mla_gallery order=”DESC” link=”download” size=”full” ids=”2833,2829,2825,2776,2771,2303,2290,2281,2134,2117,2113,2094,2046,1698,1685″]

I am trying to get cat (277) to work, but so far without luck.

Looking forward to hearing from you again.

Cheers,

Colin

Thanks for your update and the additional information. Thanks as well for the link to a sample page; very helpful.

I am not very skilled with CSS styles and I have not found a way to center images that are enclosed by definition list tags such as <dl><dd><dt>. I have had better luck with table-based gallery layouts, which you can compose with a custom markup template. Here are two earlier topics along similar lines:

Adjust Table Row Height

Basic pdf list with pdf icons

The specifics are different but you should be able to adapt the table layout to your application without too much trouble. Let me know if you need more specific guidance.

You also wrote “I am trying to get cat (277) to work, but so far without luck.” The Category parameters search in the WordPress core “Categories” taxonomy. It seems more likely that you are using the MLA Att. Categories taxonomy to organize your items; is that right? You might have better luck with one of these alternatives:

category=term-slug
attachment_category=term-slug

where “term-slug” is the slug for the term you want. You can find the value in the “Slug” column of the Media/Att. Category (or Media/Categories) admin submenu table.

Hello again David,

I have been struggling with this but, thanks to your help, I think I have made progress.

If you take a look at my gallery HERE, it displays well using your suggested markup template from HERE.

Now I want to remove all the borders.

I assume this is done with a style template? I’ve had a fiddle with it and can get rid of some but not all the borders. As currently shown it is using the default style template.

I also notice that the second image column is narrower than the first – ideally they would be equal.

Are you able to offer any guidance?

Thanks again in advance.

Colin

Thanks for your update and the links to your test page and template. Things are improving nicely.

The red and gray borders at the top and bottom of your table cells come from a style on line 410 of your theme’s style.css file. You can override them by adding style="border: none" to your markup template:

<td class='gallery-icon' style="border: none">
    [+link+]
  </td>
  <td class='wp-caption-text gallery-caption' style="border: none">
     <strong>[+title+]</strong><br />
    [+caption+]
  </td>

You could also modify your mla_style template to apply the border style, using the #[+selector+] CSS selector to make your style higher priority than the theme’s style. Something like:

#[+selector+] td {
		border: none;
	}

should work. You should be able to apply these ideas to your application even if you have to adapt them somewhat. Let me know if you need more specifics.

Hi David,

I really want to thank you for all the help you’ve been. I think I’ve got things looking and working how I want – and your plugin is the only thing I’ve found that can do it. Awesome!

Image Library

With thanks,

Colin

Thanks for the good news and the kind words. Thanks as well for the link to your site, which I enjoyed exploring.