Creating a post with Image metadata

Thanks for starting this new topic regarding your MLA application and for the detailed example of the display you want. As I understand it, you have two questions:

1. How do I format the gallery display?
2. How do I select the images to be included?

The simple way to get the display you want is to add an mla_caption parameter to your shortcode:

[mla_gallery ... columns=1 mla_caption="{+caption+}<br>{+description+}"]

If that doesn’t look right, you can control every aspect of your gallery display by creating a custom markup template. You can find more information in the “Style and Markup Templates” section of the Settings/Media Library Assistant Documentation tab, and a simple example in the “A Table-based Style and Markup Template Example” section there.

For your application I believe you can use the default style template and make a copy of the default markup template changing just the “Item:” section to something like:

Item:

<[+itemtag+] class='gallery-item [+last_in_row+]'>
	<[+icontag+] class='gallery-icon [+orientation+]'>
		[+link+]
	</[+icontag+]>
	[+captiontag_content+]
	[+description+]
</[+itemtag+]>

I have added the Description field to the default Item: section. 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 “single-column”.
3. Copy the template parts from the above example and paste them into the corresponding part text boxes.
4. Review the content to make sure all the HTML and CSS markup is valid and not corrupted by the copy process.
5. 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 use the templates:

[mla_gallery ... columns=1 mla_markup=single-column]

It’s a bit of work, but you only have to do it once. You may have to define some custom styles to get the formatting you want; that depends on your theme.

To select the items you want in the gallery, adding the PhotoshootID to and IPTC or EXIF field is a good idea. You could something like IPTC field 2#115 (source) and map it to a custom field, or use 2#025 (keywords) and map it to an Att. Tag term. Depending on your choice you can add a “Simple Taxonomy Parameter” or a “Simple Custom Field Parameter” to your shortcode to select the value you want.

I am marking this topic resolved, but please update it if you have problems or further questions regarding the above suggestions. I am confident that MLA can get you the results you want. Thanks for a question that should be of interest to other MLA users.

Hi David, thanks for the reply and detailed instructions.

I am being able to filter based on tags just fine, but I am experiencing two issues. I would like to check with you to see if it is something minor and which route should I follow to get this fixed.

I am using the following shortcode in my post:

[mla_gallery tag=shoot1 columns=1 mla_caption=&quot;{+caption+}<br>{+description+}&quot;]

This is the result I am getting
https://prntscr.com/7q8kh4

It is “almost” there. The 2 issues I was referring to are:

1. The size of the image. I do have many different images sizes available to wordpress. I couldn’t find where can I tell MLA which size of image to use.

2.) Capition and Description are not being separated by one blank line. I suppose that the br code should be taking care of this, but it is not.

Could this issues be fixed using the MLA shortcode I am trying or will I need to dig deep with the Custom Markup Template?

Regards,

Paulo Tebet

Deleted because of new findings reported below.

I managed to get the Custom Markup Template to work.

This is what I am getting now: https://prntscr.com/7q95ib

I can live with the difference in the text (font or size) for the Legend and Description, but I would like to be able to control the following:

1. Image size
2. Image alignment (Center, I belive this is the current behaviour )
3. Text alignment (Left)
4. Text line spacing (for the second block – WP_Description

Can this be done? Where?

Best regards,

Paulo Tebet

Thanks for your updates and for your good work in adopting the custom markup template; you’re making progress.

You can change the image size by adding a size= parameter to your [mla_gallery] shortcode. The “Size” section of the Settings/Media Library Assistant Documentation tab says:

The Size parameter specifies the image size to use for the thumbnail display. Valid values include “thumbnail”, “medium”, “large”, “full” and any additional image size that was registered with add_image_size(). The default value is “thumbnail”. You can use “none” or “” to suppress thumbnail display and substitute the item title string for the image/icon.

Image and text alignment can be controlled to some extent by adding “Gallery Display Style” parameters to your shortcode. There is more information on those in the Documentation tab. However, you might want to go ahead and create a custom Style template so you can get better control and additional control for attributes such as the Description “line height”.

The screen shot you linked to is helpful, but since it’s a static screen capture image I can’t see the HTML source behind the page. I can only give you some general guidance.

The Style template is where you can modify or add CSS styles for your gallery display. Image alignment, text alignment and text line spacing can be specified by CSS styles. In the default template you see several substitution parameters such as [+float+] and [+itemwidth+]. These are filled in by shortcode parameters such as mla_float and by calculations the MLA code makes depending on parameters like columns and mla_margin. Once you implement a custom Style template you can replace or modify them. The only substitution parameter you should retain is [+selector+] (e.g., mla_gallery-1), which uniquely identifies each gallery on a post/page that may have more than one.

You can also specify the CSS styles in your theme’s styles.css file and omit the in-line Style template entirely. Most themes contain styles for class names like .gallery-item and .gallery-caption (which are WordPress standard class names from the [gallery] shortcode). The difference between your Legend and Description text may be due to your theme’s styles.

The Markup template, as you’ve seen, provides the HTML markup and content for gallery items. The “Attachment-specific substitution parameters for the markup template Item part”, e.g., [+caption+] and [+description+] are values from the item itself. Substitution parameters such as [+thumbnail_width+] or [+thumbnail_height+] are computed by WordPress or MLA. Parameters like [+itemtag+] and [+icontag+] are filled in from shortcode parameters like itemtag and icontag.

The shortcode parameters are an easy way to make minor adjustments to the template; custom templates give you complete control. Of course, to get the most out of custom templates, you have to know something about CSS and HTML.

If you need more specific help with your templates, post the complete source of your current template and I can be more specific. It would also help to have a link to a “live” page on your site so I can see all of the CSS and HTML attributes affecting your gallery display. Let me know how I can help.

Thanks David,

Here is the live url: https://testing.paulotebet.com/uncategorized/mla-test/

I do so many tests that sometimes the page I am referring to has changed or even doesn’t even exists…. That’s why I normally use a screenshot, but in this case, as you mentioned it will provide you with info that the screen shot can tell.

I will wait for any further advise from you after being the live page, before I try to implement any changes.

Regards,

Paulo Tebet

I have already changed the image size.

I have requested the support of my Theme to hide the tooltip for images with the title (again, for SEO reasons I want to use the image title attribute, but for design reasons I don’t want the title to display on mouse hoover).

This is what I’ve got from them:

.postid-32  .gallery-item img {
  cursor: default;
  pointer-events: none;

}

I’ve asked them which CSS should I use for the .gallery-item to control the text alignment and also the line spacing.

Regards,

Paulo Tebet

Thanks for posting the live URL. I just had a look and it seems you are making good progress. I hovered over the image and did not see the “title” string.

It looks like you are getting good support from your theme vendor. If you have any other specific questions, post an update here and I will do what I can to help.

Hi David,

I am “alomost” there. If you check the live page now, you will see that only the Description is not left aligned. All the other needs have been taken care of.

Looks like the final issue needs to be done inside the Caption itself, so I am not sure how to handle this inside MLA.

Here what I’ve got from my Theme Support staff:

For the spacing and text alignment and line spacing for the caption and description text,

.wp-caption>.wp-caption-text, .wp-caption>.wp-caption-text:last-child, .gallery-item>.wp-caption-text, .gallery-item>.wp-caption-text:last-child{
text-align: left;
}
Add this to adjust your caption.

display: block;
margin: 9px 0 5px;
padding: 0 5%;
font-size: 10px;
line-height: 1.2;
text-transform: uppercase

Adjust the number or CSS code to achieve the desired look of your site.

And for the last concern.

.gallery-item{
line-height:16px
}

For what I’ve understood I need to include the following code inside the Caption itself:

display: block;
  margin: 9px 0 5px;
  padding: 0 5%;
  font-size: 10px;
  line-height: 1.2;
  text-transform: uppercase

So what do you think about this? Would it be worth to try to include the code they sent me or try to do what you have though before in terms of letting MLA handle that part of the formating?

Regards,

Paulo Tebet

Paulo,

Great progress!

Are you using a custom markup template? If so, can you post the content of your “Item:” section here? The best way to control the caption formatting will be to stop using the mla_caption parameter and move everything into the template. I can play with that if I know what you have now.

Also, where are you adding all the CSS styles? Do you have a custom style template, or are you adding them to the theme’s files? If you’re using a custom style template, post the content here so I can follow what you’re doing.

Finally, just for completeness, can you post an example of your current [mla_gallery] shortcodes?

Thanks for any additional information you can provide.

Hi David, yes I am using the Custom Markup Template ( I called it “ppt-post” )

Here is my “Item” section for it:

<[+itemtag+] class='gallery-item [+last_in_row+]'>
	<[+icontag+] class='gallery-icon [+orientation+]'>
		[+link+]
	</[+icontag+]>
	[+captiontag_content+]
	[+description+]
</[+itemtag+]>

The CSS styles are being applied at my Theme Level, like in this screen shot https://prntscr.com/7r1xax

This is the MLA code I am using:

[mla_gallery tag=shoot1 size=full columns=1 mla_markup=ptp-post]

I looked like the code I was trying to use to fix the description alignment was not correct. My Theme development support team sent me this:

.wp-caption, .gallery-item {
  display: block;
  margin: 9px 0 5px;
  padding: 0 5%;
  font-size: 10px;
  line-height: 1.2;
  text-transform: uppercase

}

I have tried to include this in the Custom CSS area of the Theme with no success. I’ve then tried to include the code in the “Description” itself, but the code is being rendered as a regular text.

I don’t know if WP would treat the Description correctly because when I create a Regular WP Gallery ( or just a regular image inside a post) the Description does not shows. It only shows the Caption…
https://testing.paulotebet.com/uncategorized/wp-image-gallery/

So I could not prove if the code is not being taken only by MLA gallery or just for all image / Gallery in WordPress.

If you need anything else, please just let me know.

Regards,

Paulo Tebet

Thank you for posting the shortcode, template and styles; very helpful.

You can apply specific styles to the Description portion of the display by first wrapping it in a <div> tag and giving it a unique class name. Change your Item: section to:

<[+itemtag+] class='gallery-item [+last_in_row+]'>
	<[+icontag+] class='gallery-icon [+orientation+]'>
		[+link+]
	</[+icontag+]>
	[+captiontag_content+]
	<div class="gallery-description">[+description+]</div>
</[+itemtag+]>

Now you can add styles that will be applied to just the Description. You have two choices for the location of the styles. You can use the Custom CSS area of the Theme, changing the styles the Theme development support team gave you:

.gallery-description {
  display: block;
  margin: 9px 0 5px;
  padding: 0 5%;
  font-size: 10px;
  line-height: 1.2;
  text-transform: uppercase;
  text-alignment: left
}

Note that I have added a text-alignment: left style (and a semicolon to the style above it).

Your other choice is to set up an MLA custom style template to go along with the custom markup template you already have. That would make it easy to alter the styles for any part of the [mla_gallery] and to limit the styles to the gallery and not other parts of the page. Copy the default Style template and add your Description styles to it:

<style type='text/css'>
	#[+selector+] {
		margin: auto;
		width: 100%;
	}
	#[+selector+] .gallery-item {
		float: [+float+];
		margin: [+margin+];
		text-align: center;
		width: [+itemwidth+];
	}
	#[+selector+] .gallery-item .gallery-icon img {
		border: 2px solid #cfcfcf;
	}
	#[+selector+] .gallery-caption {
		margin-left: 0;
		vertical-align: top;
	}
	#[+selector+] .gallery-description {
		text-align: left;
		display: block;
		margin: 9px 0 5px;
		padding: 0 5%;
		font-size: 10px;
		line-height: 1.2;
		text-transform: uppercase;
		text-alignment: left
	}
	/* see mla_gallery_shortcode() in media-library-assistant/includes/class-mla-shortcodes.php */
</style>

Either way should work. Give one or the other a try and let me know if it works for you.

Thanks a lot David for the detailed and alternative solutions.

I tried to implement the MLA route ( I think it would be better ) but I am missing something because it is still not working. ( https://testing.paulotebet.com/uncategorized/mla-test/ )

This is what I have:

Custom Style Template definition:

Name: ptp-post
Styles:

<style type='text/css'>
	#[+selector+] {
		margin: auto;
		width: 100%;
	}
	#[+selector+] .gallery-item {
		float: [+float+];
		margin: [+margin+];
		text-align: left;
		width: [+itemwidth+];
	}
	#[+selector+] .gallery-item .gallery-icon img {
		border: 2px solid #cfcfcf;
	}
	#[+selector+] .gallery-caption {
		margin-left: 0;
		vertical-align: top;
	}
	#[+selector+] .gallery-description {
		text-align: left;
		display: block;
		margin: 9px 0 5px;
		padding: 0 5%;
		font-size: 10px;
		line-height: 1.2;
		text-transform: uppercase;
		text-alignment: left
	}
	/* see mla_gallery_shortcode() in media-library-assistant/includes/class-mla-shortcodes.php */
</style>

Custom Markup Template definition:

Name: ptp-post
Item:

<[+itemtag+] class='gallery-item [+last_in_row+]'>
	<[+icontag+] class='gallery-icon [+orientation+]'>
		[+link+]
	</[+icontag+]>
	[+captiontag_content+]
	<div class="gallery-description">[+description+]</div>
</[+itemtag+]>

Also in the code excerpt below:

#[+selector+] .gallery-description {
		text-align: left;
		display: block;
		margin: 9px 0 5px;
		padding: 0 5%;
		font-size: 10px;
		line-height: 1.2;
		text-transform: uppercase;
		text-alignment: left

What is the difference between text-align and text-alignment ?

Regards,

Paulo Tebet

Thanks for posting all the source code for your custom style template.

First, the difference between text-align and text-alignment. The text-align style is all you need; text-alignment came from working too late, not seeing the text-align already in the list and not remembering the correct name for that style. Just remove it.

I had a look at your test page and it still includes the default style template. To use your custom template you must add mla_style=ptp-post to your [mla_gallery] shortcode. Have you done that?

If adding the mla_style parameter doesn’t help, post the complete source text of your [mla_gallery] shortcode and I will have a closer look.