Dynamic search and filters

Thanks for the positive feedback and for your detailed description of the project you’re working on. You’ve already made quite a lot of progress! I see you’ve discovered the new [mla_term_list] shortcode (which you could use with your categories dropdown) and the mla-custom-taxonomy-example.php.txt example plugin that works with it.

You wrote “keywords (tags) in the search box have to be comma separated, is there a way to make it so that space and commas both work?” Taxonomy term names, e.g., tags, can contain spaces so there is no way to tell where one name stops and another starts if spaces are allowed as a delimiter. You can use one of the [mla_gallery] hooks to rewrite the search string before MLA processes it.

You asked “it is possible to make it so that the user doesn’t have to hit “search”? You can do that with a bit of JavaScript as described in this WordPress Codex entry:

Function Reference/wp dropdown categories

If you have a very large gallery for one or more categories you will want to paginate it as shown in this earlier topic:

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

Finally, you wrote “I can’t find how to combine both together.” I will have to play a bit with your example form and see what I can come up with. I will post an update when I have progress to report. Thanks for your patience and for your interest in the plugin.

Hi David,

Thank you very much for your help.

1. As to the separator between keywords I am not sure how to use hooks, I actually don’t even understand the concept of hooks. I read the documentation over and over but it seems that I am missing some knowledge. Everything I do is only based on years of experience reading forums an googling solutions. So if you have a link of another support thread where you explain what is the principle of hooks and how it works I’d be interested. Thank you.

2. As to the dynamic search, I tried working with the link you shared but I didn’t succeed after 2 hours. Then I found another code (I will paste it at the end) that submit the form as soon as the dropdown is selected. The thing is that it isn’t really dynamic, the page still reloads, and all the previous filters are gone.

The idea is that for example some selects “Vector” then types in the search box “silhouette”, the search processes. Then the results display, but there might be too many so the gallery offers several tags that would narrow down the results even more “landscape, people, object, typo”. So with the code I found, after the page loads (displaying the result) the previous filters (Vector and silhouette) are gone, so if I then check the tage “people” and hit “Filter” it won’t show the images matching the 3 terms “vector, silhouette and people” it will show all the images matching only the term “people”.

To give an example of something similar I would refer to google image. If I type “apple” then it will offer me tags to click “logo, tree, pink, gala, chocolate…”. I kind of assume it must be possible to pass the “previous filters” to the new page. And display an in-line tag cloud sorted by count number.

3. Here’s the only part I really made progress. I can finally combine search and category. 5i will post the code at the end). I still have to use my old dropdown list, I cannot get it to work with the mla_term_list. I don’t know how to tell the gallery which value is selected in the dropdown from the mla_term_list.

4. As to the pagination I totally agree. I actually have already experimented with it and it worked like a charm. There are actually a lot of other functionality that I tried and plan to use in the final version. But now to “play” with it and find solutions for my questions I kind of removed everything that wasn’t necessary to make sure it isn’t interfering. I’ll focus on that and on style once I get past the technical things.

Thanks a lot, I’ll be happy to share my project once it is completed. I am confident that this plugin is capable of doing exactly what we need and I eager to learn more about how to use it.

Here’s the code I am using for the “dynamic” form,

<form>
<select name='form_categories[]" class="postform"' onchange='this.form.submit()'>
		<option selected="selected" value="">All</option>
		<option value="images">Images</option>
		<option value="video">Video</option>
		<option value="audio">Audio</option>
</select>
<noscript><input type="submit" value="Submit"></noscript>
</form>

I didn’t include it in my next code, since I want people to be able to select a category and type a search. And it doesn’t seem to work after typing a search entry.

Here is the shortcode

<h3>Form</h3>
<form id="attachment-category-form" method="post" action=".">

<select name="form_categories[]" class="postform">
		<option selected="selected" value="">All</option>
		<option value="images">Images</option>
		<option value="video">Video</option>
		<option value="audio">Audio</option>
</select>

<input id="mla-search-box" name="search-string" type="text" value="" />

[mla_term_list taxonomy=attachment_tag mla_output=checklist]

<input id="submit" name="submit" type="submit" value="Search" />
</form>

<h3>Gallery</h3>
[mla_gallery mla_terms_phrases="{+request:search-string+} , {+request:form_categories+}"]

Thank you.
Ghislain.

Thanks for your update and your continuing experiments. Thanks as well for your patience in awaiting my work on some of the points you have raised.

You wrote “I am not sure how to use hooks .. if you have a link of another support thread where you explain what is the principle of hooks and how it works I’d be interested.” WordPress hooks and the hooks in MLA are straightforward, but only if you know something about programming and the PHP language used for server coding. Basically, hooks allow you to inspect or modify data used for things like shortcode processing. For example, when an [mla_gallery] shortcode is processed hooks allow you to look at the shortcode parameters and then change them to fit your application. The tip of the documentation iceberg is in the WordPress Codex: Plugin API. Do you know enough PHP coding to read code and make small changes?

You wrote “As to the dynamic search, I tried working with the link you shared but I didn’t succeed after 2 hours. Then I found another code (I will paste it at the end) that submit the form as soon as the dropdown is selected. The thing is that it isn’t really dynamic, the page still reloads, and all the previous filters are gone.” You can use a custom markup template to add the onchange= event handler to your [mla_term_list mla_output=dropdown] shortcode. It is true that in any case, “the page still reloads“. The ability to refresh an [mla_gallery] display without reloading the page would require a very different approach that I have not had the time to look into; it would take a lot of development.

You wrote “I cannot get it to work with the mla_term_list. I don’t know how to tell the gallery which value is selected in the dropdown from the mla_term_list.” That is the reason I developed the mla-custom-taxonomy-example.php example plugin. The [mla_term_list] shortcode is new and I am still exploring how to use it; the example plugin is a great way to do that.

Based on your comments I have uploaded a new MLA Development Version dated 20160602 with an enhanced /examples/mla-custom-taxonomy-example/php/txt example plugin. The enhanced example plugin has a new shortcode that generates a “Terms Search” textbox that retains the entered value when the page is refreshed. I have also added a new [mla_gallery] parameter, mla_phrase_delimiter, that lets you change the comma delimiter to a space or any other single character.
For your application the custom taxonomies part of the example does not apply. You can comment out one line of code to eliminate them:

// Comment out the next line to eliminate the custom taxonomies
//self::_build_taxonomies();

Just add the two slashes to that second line of code.

If you install the new Development Version and the enhanced example plugin your page (without the onchange script) could look like this:

<h3>Form</h3>
<form id="attachment-category-form" method="post" action=".">

[mla_term_list taxonomy=attachment_category mla_item_parameter=current_attachment_category mla_output=dropdown option_all_text=All hierarchical=true show_count=true pad_counts=true use_filters=true]

[mcte_terms_search mla_terms_taxonomies=attachment_tag mla_phrase_delimiter=' ' mla_phrase_connector='OR']

Items per page: [mcte_per_page numberposts=6]

<input id="attachment-category-form-submit" name="attachment_category_form_submit" type="submit" value="Search" />
</form>

[mla_gallery numberposts=6 add_filters_to=any mla_output="paginate_links,prev_next"]

[mla_gallery numberposts=6 add_filters_to=any mla_nolink_text="No items match the current filter selections."]

The page text above will work with the example plugin to give you a form with a category dropdown and a tag search box. It will paginate the gallery and you can change the number of items per page. Any values you enter should carry over from refresh to refresh.

Let me know if that makes sense and if you can get it working.

I have updated the example plugins required for this application, splitting the custom taxonomy part from the custom shortcodes that generate the user interface elements. The /media-library-assistant/examples/mla-custom-taxonomy-example.php.txt example plugin now does one thing; generates the custom taxonomies. The new mla-ui-elements-example.php.txt example plugin implements the custom shortcodes and filters. The shortcodes have been changed from [mcte_ ... ] to [muie_ ... ] and some additional features have been added.

It has been a month since the last post in this topic. I assume you have found a solution for your application and I hope the above suggestions were useful.

I am marking this topic resolved, but please update it if you have any problems or further questions regarding the mla-ui-elements-example.php example plugin. Thanks for your interest in MLA.