Creating a dropdown list of PDF files

Thanks for you kind words and for the question.

It might be possible to create a dropdown control for each of the “galleries” using a custom markup template. If that’s of interest I can experiment a bit and be more specific. You can also consider a solution that has come up before:

Show main category with list inside

The Collapse-O-Matic plugin has been used in a number of MLA applications and works well.

If you have a lot of documents you might be interested in this earlier topic:

Alphabetical pagination

The details are different but you may be able to adapt the example plugin to your needs.

PDF lists are a common MLA application. Here is an earlier topic that links to a number of other topics on the subject:

Is there doc that shows how to use this plugin?

If the Collapse-O-Matic approach works for you, let me know. If you’d like more details on the dropdown control alternative I can pursue that. I will leave this topic unresolved until I hear back from you. Thanks for your interest in the plugin.

THANK YOU for your prompt reply and sending these links!

I was also experimenting with the [mla_term_list] code, which creates a nice drop-down list, but I couldn’t figure out how to display the correct PDF files.

I’d love to learn more about creating a dropdown control for a gallery – if you have any examples, please let me know.

My goal is to create a widget that looks like this:
https://madbirdesign.com/woodland/dropdown-example.png

The user can select the PDF file they want from the dropdown lists.

Thanks for your update and the kind words. Thanks as well for including the link to your proposed widget. Here is an example you can experiment with.

First you must create a custom markup template for your controls. Navigate to the Settings/Media Library Assistant Shortcodes tab, click on the “Go to [mla_gallery] Markup Templates” link and then scroll down to the blank template. Enter your template parts as follows:

Name:
dropdown-gallery

Arguments:

mla_onchange=''

Open:

<select name='[+template:[+query:dropdown_name+]|mla_dropdown+]' class='gallery-dropdown' id='[+selector+]' [+query:mla_onchange+]>
	<option class="gallery-dropdown-option" value=""> - Select a document - </[+option+]>

Item:

<option class="gallery-dropdown-option" value="[+attachment_ID+]">[+title+]</[+option+]>

Close

</select>

You can leave the other parts empty. Note the two single-quotes in the mla_onchange argument. Scroll to the bottom of the page and click “Save Changes” to record the new template.

Here’s how to use the template to create three dropdown controls in a form, and an [mla_gallery] to display the selected document:

<h3>Meeting Materials</h3>
<form id="mla-text-form" action="." method="post" class="row">
<strong>Agendas</strong>
[mla_gallery attachment_category='agendas' post_mime_type=application/pdf orderby=date order=desc mla_markup=dropdown-gallery]

<strong>Regular Meeting Minutes</strong>
[mla_gallery attachment_category='agendas' post_mime_type=application/pdf orderby=date order=desc mla_markup=dropdown-gallery dropdown_name=mla_dropdown_R]

<strong>Special Meeting Minutes</strong>
[mla_gallery attachment_category='agendas' post_mime_type=application/pdf orderby=date order=desc mla_markup=dropdown-gallery dropdown_name=mla_dropdown_A mla_onchange='onchange="return this.form.submit()"']

<input id="text-form-submit" name="text_form_submit" type="submit" value="Filter" />
</form>

[mla_gallery]
ids="{+template:{+request:mla_dropdown+}|{+request:mla_dropdown_R+}|{+request:mla_dropdown_A+}|999999+}"
post_parent=all
post_mime_type=application/pdf
size=icon link=file
mla_caption="{+title+}"
mla_viewer=false
[/mla_gallery]

You can paste this content into a standard WordPress page and play around with it. Once you’re satisfied you can move the controls into a widget (such as the MLA Text widget).

You can see that I’ve replaced the link=file columns=1 parameters with the mla_markup parameter to use the custom template. The first two controls are “select only”; you make a selection and the click the “Submit” button to fetch the document. The third control has one more parameter, mla_onchange='onchange="return this.form.submit()"', that submits the form as soon as a selection is made. This might be more appropriate for the widget; you can copy the parameter to the other two controls to make them all “immediate”.

The final [mla_gallery] at the bottom displays a thumbnail for the selected document. Click on the thumbnail to open the document itself. I know this is an extra step, but you didn’t specify what should happen when a selection is made. It should be possible to use a plugin such as the excellent PDF Embedder by Dan Lester to open the document within the destination page or use a bit of code to go directly to the document download. Let me know what you have in mind.

In the interim I encourage you to try out the above template and shortcodes. I look forward to hearing your feedback.

Wow, this is amazing — you have truly gone above and beyond!

I have made these changes on my localhost temp server. I am getting an error message:
ERROR: Invalid mla_gallery tax_query = ‘Regular’

Any ideas?

I’ll upload it with a link so you can see the widgets in action.

To answer your question, ideally I would like the user to select a PDF document from the list, and it would open immediately in a new window (target=”_blank”). An example of what I’m trying to do is in the sidebar of this page, under Meeting Minutes: https://www.portcw.com/index.php/about/commission/

Hi David,

I have posted a link to a working sidebar widget here:

https://madbirdesign.com/woodland-2/about/

In the sidebar, under Meeting Materials, I have used Collapse-O-Matic (as you suggested earlier). That seems to work okay, except I can’t get the PDFs to open in a new window (target=”_blank”). I read in another post that this might be due to a conflict with the Avada theme.

I’ll paste in my widget html code:

Collapse-O-Matic + Media Library Assistant

[expand title=”AGENDAS” trigclass=”awesomearrows”]
[mla_gallery attachment_category=’agendas’ post_mime_type=’application/pdf’ link=’file’ meta_key=”Display Date” orderby=”meta_value” order=”DESC” numberposts=5 mla_target=”_blank” columns=1 mla_style=pdf-list][/expand]

[expand title=”REGULAR MEETING MINUTES” trigclass=”awesomearrows”]
[mla_gallery attachment_category=’regular-meeting-minutes’ post_mime_type=application/pdf link=file meta_key=”Display Date” orderby=”meta_value” order=”DESC” numberposts=5 mla_target=”_blank” columns=1 mla_style=pdf-list][/expand]

[expand title=”SPECIAL MEETING MINUTES” trigclass=”awesomearrows”]
[mla_gallery attachment_category=’special-meeting-minutes’ post_mime_type=application/pdf link=file meta_key=”Display Date” orderby=”meta_value” order=”DESC” numberposts=5 mla_target=”_blank” columns=1 mla_style=pdf-list][/expand]

<i class=”fa fa-arrow-circle-right” aria-hidden=”true” style=”padding-right: 10px; color: #0074D9;”></i>Meeting Materials Archive

In the next section – Meeting Materials (dropdown) – I have added the code you generously provided above. I’ll paste in my widget html code:

Media Library Assistant with custom dropdown gallery

<form id=”mla-text-form” action=”.” method=”post” class=”row”>
Agendas
[mla_gallery attachment_category=’agendas’ post_mime_type=application/pdf orderby=date order=desc mla_markup=dropdown-gallery]

Regular Meeting Minutes
[mla_gallery attachment_category=’regular-meeting-minutes’ post_mime_type=application/pdf orderby=date order=desc mla_markup=dropdown-gallery dropdown_name=mla_dropdown_R]

Special Meeting Minutes
[mla_gallery attachment_category=’special-meeting-minutes’ post_mime_type=application/pdf orderby=date order=desc mla_markup=dropdown-gallery dropdown_name=mla_dropdown_A mla_onchange=’onchange=”return this.form.submit()”‘]

<input id=”text-form-submit” name=”text_form_submit” type=”submit” value=”Filter” />
</form>

[mla_gallery]
ids=”{+template:{+request:mla_dropdown+}|{+request:mla_dropdown_R+}|{+request:mla_dropdown_A+}|999999+}”
post_parent=all
post_mime_type=application/pdf
size=icon link=file
mla_caption=”{+title+}”
mla_viewer=false
[/mla_gallery]

If you have any other suggestions to make this work, I’ll be very appreciative. Thanks again for providing such excellent support on your plugin.

Thanks for the positive feedback and for your updates detailing the progress you’ve made.

The answers to your questions are in a recent, similar topic that outlines how to separate the controls in the widget from a gallery in the body of a page. It also addresses the “invalid tax_query” issue you have encountered. Here’s a link:

‘Page not found’ when clicking Att. Tag in WP default Tag Cloud widget?

I am marking this topic resolved, but if you have any trouble adapting the suggestions in the related post to your application, post an update here and I will continue the dialog.

Thank you David. It seems like this last bit of code is the part that is having trouble – when I remove it, I can see the dropdown menus for all 3 sections, with a “Filter” button underneath. (View on https://madbirdesign.com/woodland-2/about/)

[mla_gallery]
ids=”{+template:{+request:mla_dropdown+}|{+request:mla_dropdown_R+}|{+request:mla_dropdown_A+}|999999+}”
post_parent=all
post_mime_type=application/pdf
size=icon link=file
mla_caption=”{+title+}”
mla_viewer=false
[/mla_gallery]

Thanks for your persistence and your update with the offending code.

You have run afoul of a quirk in the way WordPress parses shortcodes, and I regret that my earlier post gave you a bad example.

If you use the “enclosing shortcode” syntax on a post/page you must ensure that it is not preceded by another instance of the same shortcode that does not use the enclosing syntax. The example I gave you has three [mla_gallery] shortcodes for the dropdown controls and then a fourth shortcode to display the results. That final shortcode uses the “enclosing shortcode” syntax, i.e., it surrounds the parameters with [mla_gallery] and [/mla_gallery] delimiters. If you add the closing [/mla_gallery] delimiter to the other three shortcodes the problem will be avoided. For example:

Agendas
 [mla_gallery attachment_category='agendas' post_mime_type=application/pdf orderby=date order=desc mla_markup=dropdown-gallery][/mla_gallery]

Of course, this last shortcode should be moved out of the widget and into a separate post/page so the PDF document gallery and/or documents open in a separate window, as I suggested in my earlier post.

Thanks – it’s getting closer! I updated the code, which you can see in action here:

https://madbirdesign.com/woodland-2/about/

It’s in the sidebar under “Meeting Materials”.

The user process now is
1. Select the document from the dropdown menus
2. Click “Get Documents” button
3. Page reloads, and a PDF icon appears under the dropdown area
4. Click on icon to open the PDF document

I haven’t been able to successfully open the MLA attachments in a new window. Can you clarify this last point?

Of course, this last shortcode should be moved out of the widget and into a separate post/page so the PDF document gallery and/or documents open in a separate window, as I suggested in my earlier post.

Here is my code:

<form id="mla-text-form" action="." method="post" class="row">
<strong>Agendas</strong>
[mla_gallery attachment_category='agendas' post_mime_type=application/pdf orderby=date order=desc mla_markup=dropdown-gallery][/mla_gallery]

<strong>Regular Meeting Minutes</strong>
[mla_gallery attachment_category='regular-meeting-minutes' post_mime_type=application/pdf orderby=date order=desc mla_markup=dropdown-gallery dropdown_name=mla_dropdown_R][/mla_gallery]

<strong>Special Meeting Minutes</strong>
[mla_gallery attachment_category='special-meeting-minutes' post_mime_type=application/pdf orderby=date order=desc mla_markup=dropdown-gallery dropdown_name=mla_dropdown_A mla_onchange='onchange="return this.form.submit()"'][/mla_gallery]

<input id="text-form-submit" name="text_form_submit" type="submit" value="Get Document" />
</form>

[mla_gallery]
ids="{+template:{+request:mla_dropdown+}|{+request:mla_dropdown_R+}|{+request:mla_dropdown_A+}|999999+}"
post_parent=all
post_mime_type=application/pdf
size=icon link=file
mla_caption="{+title+}"
mla_viewer=false
[/mla_gallery]

Am I missing anything?

So appreciate your assistance!

I am happy that you’ve solved the “invalid tax_query” issue.

If you are satisfied with the “display and click the PDF icon” process you can force the document into a separate tab/window by adding mla_target="_blank" to your final shortcode, i.e.:

size=icon link=file mla_target="_blank"

As I wrote earlier, to eliminate that step you could take the last [mla_gallery] shortcode out of the widget and put it in a page of its own. For your application you would change the action="." form attribute to be the URL of the separate page that has the final [mla_gallery] shortcode and PDF Embedder support to display the selected document.

It looks like you are close to a solution!

David, this exchange has been so helpful – thank you! I am getting close to a solution.

I have updated the widget code on the test page >>
https://madbirdesign.com/woodland-2/about/

Which then takes the user to this page >>
https://madbirdesign.com/woodland-2/view-doc/

My preference would be to have a way for the user to go directly to the PDF, rather than the extra steps of clicking the Get Document button, and then clicking the PDF icon.

If that isn’t possible, then using PDF Embedder (plugin) seems like a good option. Do I change this code to incorporate the pdf-embedder?

[mla_gallery]
ids="{+template:{+request:mla_dropdown+}|{+request:mla_dropdown_R+}|{+request:mla_dropdown_A+}|999999+}"
post_parent=all
post_mime_type=application/pdf
size=icon link=file mla_target="_blank"
mla_caption="{+title+}"
mla_viewer=false
[/mla_gallery]

Thanks for your update and the links to your progress.

I believe the best solution would use PDF Embedder with the new page and shortcode you have already implemented. If you install and activate PDF Embedder you can change your shortcode to:

[mla_gallery]
ids="{+template:{+request:mla_dropdown+}|{+request:mla_dropdown_R+}|{+request:mla_dropdown_A+}|999999+}"
post_mime_type=application/pdf
mla_alt_shortcode=pdf-embedder
mla_alt_ids_name=url
mla_alt_ids_value="{+filelink_url+}"
[/mla_gallery]

That should open the document up immediately in the context of the page, which is less disruptive than opening a new window. You could also display the sidebar and the dropdown widgets on the same page so additional document selections could be made.

I am thinking about adding a new [mla_gallery] parameter value, link=redirect to immediately open the document, but I still think the embedded implementation is better.

Give it a try and let me know what you think.

Hello and thanks!

I gave it a try on this page, and the document opens as described. However, some code still shows at the bottom of the open document. Take a look and let me know if I missed something.

https://madbirdesign.com/woodland-2/view-doc/

The sidebar positioning is way “off” – that might be a problem or conflict with the theme I am using (Avada).

Thanks for the progress update. You wrote “However, some code still shows at the bottom of the open document.” I re-tested this and discovered that if you use the mla_alt_shortcode parameter to hand off control to PDF Embedder you can’t use the “enclosing shortcode” ([mla_gallery][/mla_gallery]) format. If you put all your parameters inside the [mla_gallery] brackets and eliminate the [/mla_gallery] the code should disappear.

The sidebar problem looks like a theme or layout issue. The “sidebar” div is inside the “content” div, but I think it should be outside the “content” div. I am guessing, and can’t really be of much help with the theme.