MLA Tag Cloud Grid Questions

Thanks for the positive feedback and for your question. Thanks as well for the link to your sample page; very helpful.

You asked “1) is it possible to left-align the tags in my term grid list?” Alignment and similar attributes for the tag cloud grid layout are supplied by a style template that generates inline styles just before the cloud display. You can create a custom style template to make any changes you need, or suppress the inline styles of you have another way of adjusting CSS content. The default template looks like this:

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

You can change text-align: center; to text-align: left; to get the format you want.

You can find another example in this earlier topic, which also shows how to add a custom parameter to the template and shortcode so the value can change from cloud to cloud:

Please allow setting padding in the Shortcode

For your application:

• Navigate to the Settings/Media Library Assistant Shortcodes tab.
• Click on the “Tag Cloud” view below the Search Templates text box.
• Hover over the “tag-cloud (default)” Style entry and click the “Copy” action link.
• When the page refreshes, the “Edit Template” screen will appear. Change the template Name to (for example) “left-justified-cloud”.
• Scroll to the #[+selector+] .tag-cloud-item Styles and make the text-align: change illustrated above.
• Scroll to the bottom and click “Update”.

Once you have the template set up you can add the mla_style=left-justified-cloud parameter to your [mla_tag_cloud] shortcode to replace the default styles. If you want to use your own styles you can suppress MLA’s inline styles by coding mla_style=none.

You asked “2) is it possible to display the selected tag as a header above the gallery?” You can use a custom template for this purpose. First, you must modify your [mla_tag_cloud] shortcode to pass the name of the term to the [mla_gallery] shortcode. You did not post your shortcode text, but something like this should make sense for your application:

mla_link_href="{+page_url+}?term_slug={+slug+}&current_name={+name,url+}

This parameter adds a current_name query argument to the URL and fills it with the term name, encoded for use in a URL. To display the name as a heading, change the default “Open” section in the markup template to something like this:

<h3>[+request:current_name+]</h3>
<div id='[+selector+]' class='gallery galleryid-[+id+] gallery-columns-[+columns+] gallery-size-[+size_class+]'>

For your application:

• Navigate to the Settings/Media Library Assistant Shortcodes tab.
• Click on the “Gallery” view below the Search Templates text box.
• Hover over the “default (default)” Style entry and click the “Copy” action link.
• When the page refreshes, the “Edit Template” screen will appear. Change the template Name to (for example) “tagged-gallery”.
• Scroll to the “Open” section and add the heading as illustrated above.
• Scroll to the bottom and click “Update”.

Once you have the template set up you can add the mla_markup=tagged-gallery parameter to your [mla_gallery] shortcode to replace the default HTML markup.

You asked “3) is it possible to only show a few chosen tags?” In the “Tag Cloud Data Selection Parameters” of the Settings/Media Library Assistant Documentation tab you will find the include and exclude parameters, which should let you choose the tags for your cloud. You can find the term id values by going to the Media/taxonomy edit screens. Hover over the term name and look for the tag_ID= argument in the editing URL.

I hope that gives you what you need to complete your application. I am marking this topic resolved, but please update it if you have any problems or further questions regarding the above suggestions. Thanks for your interest in MLA.

Hello,
Here is my code, I do not understand how to add your suggestion for #2. How would I change gallery shortcode?

Also, if I change the “default” style markup, how does this affect other gallery shortcodes that are not setup like this page?

`<h2 style=”text-align: center; margin-top:0px; margin-bottom:4px;”>Search by Tag</h2><div style=”height:200px; border:1px solid #ccc; overflow:auto;”><span id=mla-tag-cloud>[mla_tag_cloud mla_output=grid smallest=11 largest=11 columns=4 number=0 taxonomy=attachment_tag mla_link_href=”{+page_url+}?term_slug={+slug+}” use_filters=true]</span></div>

<h3>[+request:current_name+]</h3>
[mla_gallery attachment_tag=”{+template:({+request:term_slug+}|muie-no-terms)+}” add_filters_to=attachment_tag columns=3 mla_link_href=”{+template:{+custom:TrueWebsite+}|{+link_url+}+}” mla_target=”_blank” mla_viewer=true orderby=”title” mla_caption=”{+title+}” add_filters_to=any]

Thanks for your update and for posting the source text form your page; very helpful.

You asked “if I change the “default” style markup, how does this affect other gallery shortcodes that are not setup like this page?” My suggestion is to make a new, custom, style template so you can apply the styles only to the shortcodes you choose. Look at the first “For your application” bullet points in my post for details on how to do that. Below the bullets you can see how to make your shortcode use the custom template instead of the default template.

Regarding your #2, this solution also requires you to create a custom template. The <h3>[+request:current_name+]</h3> markup must be in the template, not the page, because replacing the current_name argument with the actual name can only be done in the template processor. You must follow the second set of “For your application” bullet points in my post for details on how to do that.

Once you have created both of the custom templates you need you can change your page source code to this:

<h2 style="text-align: center; margin-top:0px; margin-bottom:4px;">Search by Tag</h2><div style="height:200px; border:1px solid #ccc; overflow:auto;"><span id=mla-tag-cloud>[mla_tag_cloud mla_output=grid smallest=11 largest=11 columns=4 number=0 taxonomy=attachment_tag mla_link_href="{+page_url+}?term_slug={+slug+}&amp;current_name={+name,url+}" use_filters=true mla_style=left-justified-cloud]</span></div>

[mla_gallery attachment_tag="{+template:({+request:term_slug+}|muie-no-terms)+}" add_filters_to=attachment_tag columns=3 mla_link_href="{+template:{+custom:TrueWebsite+}|{+link_url+}+}" mla_target="_blank" mla_viewer=true orderby="title" mla_caption="{+title+}" add_filters_to=any mla_markup=tagged-gallery]

I made these changes to your code:

1. Added the current_name={+name,url+} argument to the mla_link_href parameter
2. Added mla_style=left-justified-cloud to the end of the cloud shortcode
3. Removed the heading markup from the page; the heading will be supplied by the custom markup template
4. Added mla_style=left-justified-cloud to the end of the cloud shortcode
5. Added mla_markup=tagged-gallery to the end of the gallery shortcode

I hope that clarifies my earlier suggestions. Please post an update if you have any problems or need more specific help.