Limiting search results to attachment tags/"Justifying" gallery grids

Thanks for your kind words and these new questions, which come at an opportune time. I have been working on more useful “search form and gallery” applications in response to these earlier topics:

How do I provide a front-end search of my media items using Custom Fields?

Dynamic search and filters

and most recently:

Very new to this, need help

In particular, my latest post in the most recent topic gives a solution using a new example plugin I’ve developed. I believe you can adapt that solution to your application without too much trouble.

If you install the new Development Version and the new example plugin your page could look like this:

<form id="mla-search-form" action="." method="post">
Tags: [muie_terms_search mla_terms_taxonomies=attachment_tag]
Items per page: [muie_per_page numberposts=20]
<input id="mla-search-box" name="search-string" type="text" value="" />
<input id="submit" name="submit" type="submit" value="Search" />
</form>

[mla_gallery orderby=date add_filters_to=any posts_per_page=20 mla_output="paginate_links,prev_next"]

[mla_gallery orderby=date add_filters_to=any posts_per_page=20 mla_nolink_text="Enter a term above to see a gallery of ProMo-Peace Pix that match."]

The add_filters_to=any parameter will cause the example plugin to add the terms search value to the query. The tags entered and the items per page value will carry over when the page is refreshed or pagination moves from page to page.

You asked “Is there a way of showing how many images were returned (as well as the total number of media)?” I will have to work on that. When you write “how many images were returned” I assume you mean the total number of images assigned to the entered tag(s); is that right? When you write “the total number of media” I assume you mean the total number of images in the Media Library; is that right? If so, are you willing to accept the need to do another SQL query to get that value?

Finally, you asked about better formatting of a gallery that mixes landscape and portrait images. This has come up before:

Fixed height and Auto width on images displayed via mla_gallery

I haven’t found a good solution that doesn’t involve some other plugin. You mentioned:

Collage Gallery Version 0.4 By Aleksej Solovjov

I had a quick look at it; it seems to require that the images are attached to the parent post/page. Have you found a way around that? Can you post the shortcodes and source text for the “Christian Davidson’s portfolio” sample page?

I have had good success with:

PhotoSwipe Masonry Gallery Version: 1.0.4, by Dean Oakley

By the way, have you resolved the issue raised in your earlier topic?

MLA attachment page memory leak?

I hope the above suggestions are helpful. I will leave this topic unresolved until I hear back from you.

Thank you, David, for your reply.

I’m not following you when you say, “Install the new Development Version.” I have the latest version of the plugin. Is the “new development version” a beta or alpha of a future release? How do I access it? Do the muie parameters in the shortcode pertain to the development version? Would I want or need to change the text to something else when you release the new version?

You are correct on both counts regarding the item pertaining to reporting to the user the number of items that matched the search out of the total number of items in the media library. I’m perfectly okay with plugging in a query to get that value. In fact, I would need that query in order to filter out a few miscellaneous files that I wouldn’t want to be shown (i.e., they have no attachment tags).

Regarding the formatting, I was hopeful of an elegant solution. In the documentation, you said, “You can combine [mla_gallery] data selection with other popular gallery-generating plugins to get the best of both.” Does Collage Gallery not meet the criteria? You’re correct that Collage Gallery requires attaching images to the post in order to generate the gallery. Heretofore, I have not needed to work around that, because I’ve been attaching pictures to posts and using the [collage_gallery] shortcode in the post, and it works elegantly. As for the shortcodes and source text for the ‘Christian Davidson’s portfolio’ sample page,” that’s something different. It’s a working page based on a single preassigned attachment tag. All of those images are landscape, so there’s no formatting problem. I looked at “Fixed height and Auto width on images displayed via mla_gallery,” and you referred to the plugin, Tiled Gallery Carousel Without Jetpack. Is that better than “PhotoSwipe Masonry Gallery”? (I looked at the latter, and it didn’t jump out at me as a solution.) More significantly, you said in your reply in the aforementioned topic, “You can use MLA to select the images you want and another plugin to display them. I’d be happy to give you more specific guidance if that would work in your application.” That seems like what I’m trying to do. I want MLA to determine what images will appear in a dynamic gallery based on user input and then have Collage Gallery or another plugin that renders galleries as a justified grid to display those images. Is that possible?

Thank you for all of your hard work and the development you’ve put into this plugin. I don’t have any money right now, but when I get something that I can spare, I will certainly donate. This plugin is more useful than many premium plugins; I don’t think it would be unfair for you to charge $35 or $50 for it.

Regarding the earlier issue with the nav links and the fatal error breaking attachment pages when an image is not attached, I still have not found a solution. Nor have I been working at it, because you said that I could substitute MLA’s pagination controls for the WordPress navigation link functions in my attachment pages. I presume that means editing my image.php template page. I’m planning on getting your help with that in the near future, but in a separate topic.

Thanks for your answers and additional comments. Thanks as well for the promise of a future donation. Reviews, donations and positive feedback are great motivators to keep working on the plugin and supporting its users. I haven’t gone the premium route because of the additional work a commercial effort would require.

To get the Development Version, follow the instructions in this earlier topic:

Shortcode not working in (special) widget

You can follow the instructions in the “MLA Gallery Filters and Actions (Hooks)” section of the /Settings/Media Library Assistant Documentation tab to access and install the example plugin. If you would rather get a copy by email, give me your contact information I can send a copy of the plugin.You can use the Contact Us page at our web site:

Fair Trade Judaica/Contact Us

Do not post your e-mail address in the forum; personal details in a public forum violates WordPress guidelines.

You asked “Do the muie parameters in the shortcode pertain to the development version? Would I want or need to change the text to something else when you release the new version?” The [muie_ ...] parameters are implemented by the example plugin and will not be affected by new MLA versions.

Regarding the formatting, you can read through the “” section of the Settings/Media Library Assistant Documentation tab to see how it works. Basically, you can use MLA for data selection and then hand off control to another shortcode for formatting the gallery. The other shortcode must have a parameter such as ids= or include= that accepts a list of the item ID values for the gallery items. The Collage Gallery plugin does not support this parameter and so will not work with MLA.

I have had good results with many slideshow/lightbox/tiled gallery plugins including Tiled Gallery Carousel Without Jetpack (TGCWJ), Photoswipe Masonry, Fullscreen Galleria and others. My only reservation about TGCWJ is that it has not been updated for some time. If it works for you, great! When you can afford a premium solution, Justified Image Grid is an excellent choice as well. Any plugin that uses the WordPress [gallery] shortcode or provides its own shortcode that implements something like ids= can be made to work.

When you get back to the earlier “nav links” issue, just update the existing topic and we can continue the dialog there.

I hope that gives you enough information to set up the Development Version and example plugin. Let me know if you need more details.

I’ve attempted to follow the instructions you gave me for the code you supplied, but nothing happens. The shortcode appears on the page rather than being replaced by plugin output.

<form id="mla-search-form" action="." method="post">
Tags: [muie_terms_search mla_terms_taxonomies=attachment_tag]
Items per page: [muie_per_page numberposts=20]
<input id="mla-search-box" name="search-string" type="text" value="" />
<input id="submit" name="submit" type="submit" value="Search" />
</form>

<div class="paging-navigation">[mla_gallery orderby=date add_filters_to=any posts_per_page=20 mla_output="paginate_links,prev_next"]</div>
[mla_gallery orderby=date add_filters_to=any posts_per_page=20 mla_nolink_text="Enter a term above to see a gallery of ProMo-Peace Pix that match."]

The MLA Mapping Hooks Example plugin and the development version of MLA are both installed and active. Can you figure out what is amiss?

I did a search for “muie” in my plugins folder and found the MLA UI Elements Example plugin. Following the instructions you gave me for the MLA Mapping Hook Example plugin in the post you referenced, I activated MLA UI Elements Example and that made the fields appear and the printed shortcodes to disappear. However, there still appears to be no means for the two functions to communicate with one another. Nothing happens when I enter a search term. Does something like the s="{+template:({+request:search-string+}|a-bad-term)+}" parameter need to go in the code you gave me?

Thanks for your continuing efforts to set up the Development Version and the MUIE example plugin. I regret that the instructions led you on a “mapping hooks” detour before you found and installed the MUIE plugin. You can deactivate and delete the “mapping hooks” plugin; it’s not part of the solution.

Just to confirm – have you also installed the MLA Development Version?

With both of the components installed you should see a text box to the right of the “Tags:” label. The [muie_terms_search] shortcode generates input fields similar to the one you manually set up for your mla-search-box. No other action is needed to connect that to the [mla_gallery]. If you enter text in the box and click “Search” the text you entered will be matched with term names in the attachment_tag taxonomy.

If instead you want to search in item fields like Title and Description you can replace the “Tags:” text box or add another text box to do that. Here is your form with your mla-search-box replaced with another shortcode:

<form id="mla-search-form" action="." method="post">
Tags: [muie_terms_search mla_terms_taxonomies=attachment_tag]
Keywords: [muie_keyword_search mla_search_connector='OR']
Items per page: [muie_per_page numberposts=20]
<input id="submit" name="submit" type="submit" value="Search" />
</form>

<div class="paging-navigation">[mla_gallery orderby=date add_filters_to=any posts_per_page=20 mla_output="paginate_links,prev_next"]</div>
[mla_gallery orderby=date add_filters_to=any posts_per_page=20 mla_nolink_text="Enter a term above to see a gallery of ProMo-Peace Pix that match."]

If you enter text in both boxes items will be filtered by Att. Tag values AND keywords; both conditions must match.

I hope the above suggestions clear thing up. Let me know how they work for you.

I discovered that I was wrong in asserting that the “muie terms search” code you gave me didn’t work. It actually did work once I thought to map the taxonomy terms of my test-site attachments (because they were empty).

Following is the code that I wound up using on my live page:

<form id="mla-search-form" action="." method="post">
Show me all the:
[muie_keyword_search mla_search_connector='OR']
in the ProMo-Peace Pix collection!

[muie_per_page numberposts=20]
per page:
<input id="submit" name="submit" type="submit" value="Search" />
</form>
<div class="paging-navigation">[mla_gallery orderby=date add_filters_to=any posts_per_page=20 mla_output="paginate_links,prev_next"]</div>
[mla_gallery orderby=date add_filters_to=any posts_per_page=20 mla_nolink_text="Enter a term above to see a gallery of ProMo-Peace Pix that match."]

I’m marking this “Resolved.” However, I would like your assistance with some other things related to this discussion. What I want to do now is develop a way with the MLA plugin to replace “over 1,300” in the above linked page with an updated report from a database query that tells how many images there are in my media library that contain any keywords.

In addition, I would like to add a report to the user how many images were returned from their search.

I’m also interested in adding a small tag cloud of attachment tags — perhaps randomly chosen — to help provide users with some ideas of terms to search with. They might also help with SEO — though I wonder if I would then need to have the tag cloud not be random. Or maybe I could have one small cloud of my most frequently-used tags (maybe five randomly-chosen out of the top 20) and one small cloud showcasing some of the rest (like 10 out of the rest of the [apparently] over 2,000 attachment tags). I will play around with it, but I’d appreciate anything you could do to point me in the right direction.

Lastly, the mla_output="paginate_links,prev_next" you provided shows links for “Previous” and “Next,” but is there any way of also showing links for “First” and “Last”?

I’m grateful for all of the valuable assistance you have provided for me.

Thanks for your progress report and additional questions. I have uploaded a new MLA Development Version dated 20160705 that contains new features to support your item counting functions.

You asked how to display “how many images there are in my media library that contain any keywords“. I have added a new shortcode to the MLA UI Elements Example plugin that returns this value for one (or more) taxonomies. For example, to get the number of items that have terms assigned in the Att. Tags taxonomy:

[muie_assigned_items_count taxonomy=attachment_tag]

You asked how to “report to the user how many images were returned from their search.” I have added three new substitution parameters for the [mla_gallery] shortcode, found_rows, current_rows and max_num_pages that provide these values. You can use the [+found_rows+] substitution parameter in a custom markup template to display the result. Add something to the “Open” section to display it before the gallery items or to the “Close” section to display it after the gallery items.

The tag cloud ideas are a good addition to your application; I had trouble finding terms that would return images from your example page. You can start with a simple cloud of the most popular tags:

[mla_tag_cloud taxonomy=attachment_tag number=20]

I don’t think the current [mla_tag_cloud] version will support your “five randomly-chosen out of the top 20” and “some of the rest” ideas but you could do that with another custom shortcode in the example plugin.

Finally, you asked ‘is there any way of also showing links for “First” and “Last”?‘ The pagination controls you have already implemented will always show the first and past page numbers, e.g., if you have 67 pages you will always see “<< Previous 1 …” and “67 Next >>” in the pagination output. There is no current way to change “1” to “First” and “67” to “Last”, but it’s not too hard to figure out how it works.

The MLA UI Elements assigned items count shortcode appears to work perfectly on my test site. As for the “found rows” and “custom markup template” to tell the user the number of items that matched the search, that has me flummoxed. I’ll have to play with that longer to figure it out; it’s a lower priority. Last, for the MLA tag cloud, I’m struggling to get the MLA gallery and the tag cloud to work together — to pass the value of the attachment tag from the tag cloud to the searchable gallery (and perhaps even populate the search form with the attachment tag that was clicked). I’d be surprised if the ability to do that wasn’t already there, but I can’t figure it out.

For the tag cloud, I’m using [mla_tag_cloud taxonomy=attachment_tag mla_link_href="{+page_url+}?term_slug={+slug+}" number=20]. Is that correct? Before I tried the MLA link HREF parameter, I got a 404 page; after trying it, I get my page with no gallery.

Thanks for installing the new versions and working with them. I am happy to hear that the MLA UI Elements assigned items is working for you.

Regarding the “found rows” and “custom markup template” suggestion, here are more specific instructions. For your application I believe you can start with the default style template and create a custom markup template that looks something like this:

Open part:

<h3>This gallery contains [+found_rows+] items</h3>
<div id='[+selector+]' class='gallery galleryid-[+id+] gallery-columns-[+columns+] gallery-size-[+size_class+]'>

Row Open part:
(leave this part empty)

Item part:

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

Row Close part:

<br style="clear: both" />

Close part:

</div>

That will give you a gallery heading with the number of items in the gallery. You can adjust the HTML and styles to suit your application.

To define the custom markup template:

1. Navigate to the Settings/Media Library Assistant Shortcodes tab.
2. Click on “Go to [mla_gallery] Markup Templates”
3. Scroll down to the bottom of the “[mla_gallery] Markup Templates” section where you can see a blank “Name:” text box. Give your template a name, such as “found-rows”.
4. Copy the template parts from the above example and paste them into the corresponding part text boxes.
5. Review the content to make sure all the HTML and CSS markup is valid and not corrupted by the copy process.
6. 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 template you can change your shortcode to use it:

[mla_gallery ... mla_markup=found-rows]

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

Regarding the default [mla_tag_cloud] behavior and the 404 page, here is an earlier topic that explains the problem:

MLA taxonomy and custom taxonomy archive pages

After some further thought I’ve decided to work up another “muie” custom shortcode that will do something sensible for applications like yours. Give me some time to work that out; I will post an update here when I have progress to report.

I have developed a solution for your [mla_tag_cloud] application that does most of what you requested. It will give you something to experiment with and decide how to use it in your application.

Working on this application exposed a couple of minor defects in the current MLA version and in the mla-ui-elements-example.php example plugin. I have uploaded a new MLA Development Version dated 20160708 that fixes these. As usual, you must install both the new Development Version and the example plugin before you experiment with the examples in this post.

Combining a tag cloud with the “terms search form and gallery” solution discussed earlier in this topic is tricky:

• The “terms search form” lets you fill in the terms text box and the items-per-page value, then click the “Search” button to send these values to the server to generate the gallery.
• The tag cloud, on the other hand, is a list of hyperlinks that are not part of the form. When you click a term in the cloud it goes directly back to the server to generate the gallery.

Having the form and the cloud on the same page can cause confusion. If you change a value in the form and then click on a term in the cloud the form values are ignored. You can play around with the cloud/form combination to see if you like it.

The solution in this post responds to your “one small cloud of my most frequently-used tags (maybe five randomly-chosen out of the top 20)” proposal. It does mark the “the attachment tag that was clicked“, but the clicked tag does not always appear in the new list of random tags. It might be better to always generate the top 20 tags by removing the limit=5 parameter; you be the judge.

Here is the shortcode you can add to your page for the cloud:

<style type='text/css'>
#mla-tag-cloud .mla_current_item {
	color:#FF0000;
	font-weight:bold}
</style>
<span id=mla-tag-cloud>
<strong>Tag Cloud</strong>
[mla_tag_cloud taxonomy=attachment_tag post_mime_type=image number=20 limit=5 orderby="random" current_item="{+request:current_item+}" mla_link_href="{+page_url+}?current_item={+term_id+}&tax_input{{+query:taxonomy+}}{}={+slug+}&muie_per_page={+template:({+request:muie_per_page+}|5)+}" mla_link_class="{+current_item_class+}"]
</span>

The inline styles are used to mark the “current term”, and the span tags around the cloud make sure the inline styles take priority over styles defined in your theme.

As you can see, the shortcode parameters are complicated. Here are some comments:

• The number=20 and limit=5 parameters pick five random terms from the 20 most popular terms.
• The current_item="{+request:current_item+}" parameter passes the selected term into the shortcode so it can be styled separately.
• The mla_link_class="{+current_item_class+}" parameter adds the mla_current_item class to the selected term.
• The mla_link_href parameter returns to the current page and sets several parameters for the [muie] and [mla_tag_cloud] shortcodes.
• The tax_input{{+query:taxonomy+}}{}={+slug+} query argument passes the selected term in a way that the [muie] example plugin will process.
• The muie_per_page={+template:({+request:muie_per_page+}|5)+} query argument lets you control the page size. To do that you must change the value in the text box and click “Search” before you click on a cloud term. Awkward, but somewhat useful.

The above shortcode works, but you can also define a custom markup template to give you more flexibility and simplify the code you add to your page(s). With a custom template your page code becomes:

[mla_tag_cloud mla_output=list mla_markup=muie-cloud]

The muie-cloud custom template looks like:

Arguments:

taxonomy=attachment_tag
post_mime_type=image
number=20
limit=5
orderby=random
current_item="{+request:current_item+}"

Open:

<style type='text/css'>
#[+selector+] .mla_current_item {
	color:#FF0000;
	font-weight:bold}
</style>
<span id="[+selector+]">

Row Open:
(leave this part empty)

Item:

<a [+template:(class="[+current_item_class+]")+] title="[+rollover_text+]" style="[+link_style+]" href="[+page_url+]?current_item=[+term_id+]&tax_input[[+query:taxonomy+]][]=[+slug+]&muie_per_page=[+template:([+request:muie_per_page+]|5)+]">[+name+]</a>

Row Close:
(leave this part empty)

Close:

</span>

You can still override any of the default arguments, eg.:

[mla_tag_cloud mla_output=list mla_markup=muie-cloud number=10 limit=10]

I hope that gives you most of what you need for your application. If you really do have “over 2,000 attachment tags” you should consider adding a smaller number of categories to organize the items. If you do that you can use a checklist or dropdown control to avoid the need to guess at tag phrases.

The solutions you gave me work fabulously, David! They make my searchable gallery page look just the way I want. I have a small random tag cloud at the top of the page to provide users with ideas about what my collection contains, then a search form, the gallery, and a larger tag cloud of my most frequently used tags at the bottom of the content.

The only problem is that I am unable to use muie_keyword_search mla_search_connector='OR' successfully. I’ve tried mapping the taxonomy terms of my (test-site) attachments using 2#025 keywords, but my shortcode still delivers no results. I’m using muie_terms_search mla_terms_taxonomies=attachment_tag successfully, but I wonder if that will limit my end users’ results when they enter phrases that only partially match one or more attachment tags.

Great work, sir!

P.S.: When you get a chance, you might want to look at the User Notes section, #4, of the MLA-UI-Elements-Example plugin. [muie_per_page] appears twice, but the second time it should probably be [muie_keyword_search].

Thanks for your update with the good news about the tag cloud suggestions.

Regarding your muie_keyword_search issue, it is important to understand the difference between muie_keyword_search and muie_terms_search.

• muie_terms_search – searches for assigned terms in one or more taxonomies. This is the most powerful way to search for partial or complete term names assigned to your items.
• muie_keyword_search – searches for keywords within WordPress fields like Title and Content/Description (by default). You can extend the search to title, content, excerpt (Caption), name, and terms with the mla_search_fields parameter. The “terms” option for this shortcode is more limited than that for muie_terms_search.

If you use the muie_terms_search with its default parameters you will get partial matches. You can find the rules and several examples in the “Terms Search – filtering on taxonomy term names” section of the Settings/Media Library Assistant Documentation tab.

Thanks for pointing out the typo in the User Notes; I’ll fix that in my next version.

Thanks again for your persistence and help with this topic and for your interest in the plugin.

I have uploaded an MLA Development Version dated 20160802 that contains a completely new approach to browsing and installing the MLA Example Plugins. If you navigate to the Settings/Media library Assistant Documentation tab and click the “Example Plugins” button you will see a new submenu that lists all the example plugins and give you a “one-click” action for installing them. I hope this will make future installations of the example plugins more convenient for all MLA users. Thanks for helping to inspire this MLA enhancement.