Select Multiple Files for Download

Hi Again David,

Here is a graphic of how we are wanting the new, additional functioning to display, which I hope will help for clarity.

Can you advise how to apply CSS styling to the relevant shortcode templates?

Colin
Winework Solutions Images

Good to hear from you again. Thanks for your positive feedback and long-time interest in MLA.

First, regarding styling, it looks like you want to style the options displayed in the dropdown popup window; is that right? I’m not sure how to do that or if it’s possible but I will have a look.

Regarding the download feature, it looks like a good candidate for a small custom plugin. There is a somewhat similar MLA Example plugin, “MLA Gallery Download Archive”, that could be adapted for this application. I will see what I can do and post an update here when I have progress to report.

Hello David,

Thank you for your prompt response and for your offer of help with the multiple downloads functionality.

I think we have most of the styling for the search results section sorted now, and the remaining area is the drop-down. Here is the styling code we want to apply:

<style type='text/css'>
	#[+selector+] {
		height: 15px;
		border: 0px;
                border-radius:6px;
                background-color: #FFFFFF;
		overflow-y: scroll;
		list-style: none;
		margin: auto;
		width: 100%;
	}
	#[+selector+] .custom-list-item {
		float: [+float+];
		margin: [+margin+];
		text-align: center;
		width: [+itemwidth+];
	}
	#[+selector+] .custom-list-caption {
		margin-left: 0;
                margin-bottom: 0;
		vertical-align: top;
	}
</style>

What we don’t know is where and how to apply it to the drop-down in MLA – or in the HTML on the Image Library page itself. Any advice would be received with appreciation.

Kind regards,
Colin Ford

Hi again David,

We’ve made enough progress that we are going to take our new images website LIVE tomorrow (Wednesday). We’ll continue development in staging and apply styling improvements over time.

I’m sorry to bombard you with questions… but… there is one aspect of working with MLA in the Image Library section that I can’t seem to get my head around. As the visual in my earlier post shows, we have the search results displayed in two columns, with each column composed of the image, with the relevant title and meta-data shown next to it.

The issue we’re having is that the width of the text seems to override the width of the image. This means that if a product has a long name, the image is displaying smaller to accommodate that, resulting in images displaying in irregular sizes. I’ve set thumbnails to be 250px by 250px in SETTINGS>MEDIA>THUMBNAILS, but I don’t seem to be able to force the image to display at 250px high. Is there somewhere in MLA gallery where we can set that image height when it is displayed, so that the image sizes are regular throughout?

Many thanks,

Colin Ford.

Thanks for your patience while I worked on a solution for your download application and answers to your other questions.

First, regarding your desire to apply CSS styles to the terms displayed in the dropdown control, I regret that this does not seem to be possible. The W3Schools website documents the style attribute in this entry:

HTML style Attribute

There it says:

“The style attribute can be used on any HTML element (it will validate on any HTML element. However, it is not necessarily useful).”

I tried adding a style attribute to the dropdown “select” tag and to the corresponding “option” tags; neither tag seems to use this attribute.

You wrote “The issue we’re having is that the width of the text seems to override the width of the image.” I had a look at your site, and your thumbnails are “proportional”; the height is 250px or 300px and the width varies from around 70px to 90px. I was able to manually add styles to force the display height to 250px, but the width did not change and the image was distorted. If you also change the width to maintain proportional dimensions, the metadata text will be significantly narrowed. I regret that I could not find a solution for this issue; my CSS skills are not that strong. You may be able to modify the markup template in some way that helps.

Turning to your initial request, I have completed work on an MLA example plugin that should give you a solution. The “MLA Gallery Download Checklist” plugin has a shortcode that adds a Submit button to an HTML form containing a list of checkbox elements to select gallery items, and an AJAX-based function that generates a ZIP archive of selected items when the form is submitted. The plugin adds a Settings/MLA Download Checklist page with a Documentation tab that has all the details. I’d like to get your feedback on the Documentation so I will not adds anything to this post.

I have uploaded a new MLA Development Version dated 20250123 that includes the enhancement. You can find step-by-step instructions for using the Development Version in this earlier topic:

How to download & install the current development version of MLA

Once the Development Version is installed you must install and activate the example plugin. Navigate to the Settings/Media library Assistant Documentation tab and click the “Example Plugins” button. Type “checklist” in the text box and click “Search Plugins” to filter the table.

You are looking for the “MLA Gallery Download Checklist” plugin. Find that plugin and hover over the title in the left-most column. Click the “Install” rollover action, then go to the WordPress Plugins/Installed Plugins submenu and activate the example plugin as you would any other plugin.

Once the Development Version and updated example plugin are installed and active you can
implement the solution for your application. As I said, please let me know if you have any problems, further questions or feedback regarding the Documentation tab content.

The enhancement will be part of my next MLA version, but in the interim it would be great if you could install the Development Version and let me know how it works for you. Thanks for inspiring this MLA enhancement.

Thank you David,

Your response has been very helpful.
I’ve installed the development version of MLA and the checklist plugin. We can now work through the implementation and styling in staging over the next few days, before moving the changes over to the live site.

I’ll report back to you and will let you know when the changes are on the live site, so you can have a look at the finished result.

Again, thank you for your generosity in the support you give.

WINEWORK SOLUTIONS IMAGES
wineworkimages.com

Hello again David,

We have successfully launched our new images website, which uses MLA in the Image Library section. You may like to see it in action here: https://www.wineworkimages.com/image-library/

We are pretty happy that we have the styling largely how we want it, and now we’re working in staging on implementing the checklist plugin you developed. However, I’m having some trouble getting it to function. Here’s what I’ve done…

• Installed the development version of MLA
• Installed the checklist plugin
• Created a copy of the product_mu template, including the checkbox code line, and set the markup template option to “product_mu-copy. See below.

<td class='gallery-icon' style="width:150px">
    <a onclick="ga('send', 'event', 'download', [+query:attachment_category,single+]', '[+file+]');" href="[+downloadlink_url+]" target="_blank">[+thumbnail_content+]</a>
  </td>
  <td class='wp-caption-text gallery-caption' style="line-height:1.5">
<div align="left">
	<strong><span style="font-size: 16px; line-height: 1.2; color: #336699">[+caption+]</span></strong><br/><br>
	<span style="letter-spacing:.1px"><strong>File Name:</strong> [+file+]<br />
	<strong>File ID:</strong> [+description+]<br />
	<strong>File Type:</strong> [+terms:category+]<br />
	<strong>File Format:</strong> [+mime_type+]<br />
	<strong>Dimensions:</strong> [+dimensions+] px<br />
	<strong>File Size:</strong> [+file_size,commas+] bytes<br /></span>
       <strong>Multi-File Download: </strong> <input type="checkbox" name="mla-checklist-archive-items[]" value="[+attachment_ID+]">
</div>
</td>

On the Image Library page, we now have three sections of MLA code as below.

The first is the brand selector drop down…

<form id="mla-text-form" class="row" action="." method="post">
<p><span style="color: #000000; font-size: 20px;"><strong>BRANDS AVAILABLE FOR DOWNLOAD</strong></span><br><br>
<span style="color: #000000; font-size: 16px;">Downloading brand images is <strong>FREE</strong>. Choose a brand from the BRAND SELECTOR/dropdown list, click SELECT - then <strong>click on an image</strong> from the resulting list to <strong>download and save...</strong></span><br><br><br><span style="color: #336699; font-size: 18px;"><strong>BRAND SELECTOR:</strong></span><p>
[mla_term_list taxonomy=attachment_category child_of=15 mla_output=dropdown mla_option_value="{+slug+}" show_count=true pad_counts=false ]
<div style="height:10px" aria-hidden="true" class="wp-block-spacer"></p></div>
<p><span style="padding-left:10px;";><input id="text-form-submit" name="text_form_submit" type="submit" value="SELECT" style="height:42px; width:85px; padding:5px"></span></p>
</form>

The second section of code is the checklist html block.

<form action="https://staging.wineworkimages.demohub.site/wp-admin/admin-ajax.php" method="post" id="mla-checklist-download-form">
[mla_gallery]
attachment_category=abc
mla_markup=product_mu-copy
[/mla_gallery]
[mla_download_checklist]
attachment_category=abc
archive_name=selections
button_text="Download ALL Selections"
allow_empty_gallery=false
empty_text="No Selections"
[/mla_download_checklist]
</form>

And the third hmtl block displays the results.

<p>[mla_gallery]<br>attachment_category="{+template:({+request:tax_input.attachment_category+}|kumeu-river)+}" posts_per_page=100 mla_output="paginate_links, prev_next"<br>mla_link_href='{+new_url+}?tax_input[attachment_category]="{+query:attachment_category,text+}"'<br>[/mla_gallery]</p>
<p>[mla_gallery]<br>attachment_category="{+template:({+request:tax_input.attachment_category+}|kumeu-river)+}" size="thumbnail" posts_per_page=100 orderby="caption"<br>[/mla_gallery]</p>

And this is a screenshot of how the Image Library page displays…

So, “No Selections” is displayed as no checkboxes are selected; which is correct.

But if I then select multiple check boxes, the download button isn’t displayed, to allow me to download the selections.

Can you please point out where I am going wrong here?

Thank you,

Colin Ford
WINEWORK SOLUTIONS IMAGES
wineworkimages.com

Thanks for the update with your progress and all the details of your current application; very helpful.

In your HTML form you have copied and pasted the example from the plugin Documentation tab a bit too literally. The attachment_category=abc parameter in the example is a placeholder for data selection parameters used in your actual application. You don’t have an “abc” category, so the data selection returns no items. Also, the [mla_gallery] in the form is a placeholder for the gallery shortcode(s) in your application. You have two of them in your “third html block”.

Your gallery shortcode(s) must be within the HTML form so the checked boxes are returned to the server when the submit button is clicked. Here is a solution that should give you the results you seek:

<form action="https://staging.wineworkimages.demohub.site/wp-admin/admin-ajax.php" method="post" id="mla-checklist-download-form">
[mla_download_checklist]
attachment_category="{+template:({+request:tax_input.attachment_category+}|kumeu-river)+}"
posts_per_page=100
archive_name=selections
button_text="Download ALL Selections"
allow_empty_gallery=false
empty_text="No Selections"
[/mla_download_checklist]
<p>[mla_gallery]<br>attachment_category="{+template:({+request:tax_input.attachment_category+}|kumeu-river)+}" posts_per_page=100 mla_output="paginate_links, prev_next"<br>mla_link_href='{+new_url+}?tax_input[attachment_category]="{+query:attachment_category,text+}"'<br>[/mla_gallery]</p>
<p>[mla_gallery]<br>attachment_category="{+template:({+request:tax_input.attachment_category+}|kumeu-river)+}" size="thumbnail" posts_per_page=100 orderby="caption"<br>[/mla_gallery]</p>
</form>

Give that a try and let me know how it works for you.

Good Morning David,

That did it! Fantastic. We have the Image Library functioning well in staging with the styling looking good too. Many, many thanks.

There is one final thing I have been trying to figure out but without success so far.

When the brand is selected from the drop down list, I would like it to be retained after submit is clicked. My understanding is that this needs to be done with sessionStorage in Javascript. I’ve pieced together the following script, but it isn’t working. Can you offer any advice?

<form id="mla-text-form" class="row" action="." method="post">
<p><span style="color: #000000; font-size: 20px;"><strong>BRANDS AVAILABLE FOR DOWNLOAD</strong></span><br><br>
<span style="color: #000000; font-size: 16px;">Downloading brand images is <strong>FREE</strong>. Choose a brand from the BRAND SELECTOR/dropdown list, click SELECT - then <strong>click on an image</strong> from the resulting list to <strong>download and save...</strong></span><br><br><br><span style="color: #336699; font-size: 18px;"><strong>BRAND SELECTOR:</strong></span><p>
[mla_term_list taxonomy=attachment_category child_of=15 mla_output=dropdown mla_option_value="{+slug+}" show_count=true pad_counts=false ]
<div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>
<p><span style="padding-left:10px;";><input id="text-form-submit" name="text_form_submit" type="submit" value="SELECT" style="height:42px; width:85px; padding:5px"></span></p>
<script>
    // Store the selected value in a hidden input field
    document.addEventListener('DOMContentLoaded', function() {
        var selectedValue = document.querySelector('[name="mla_term_list"]').value;
        var hiddenInput = document.createElement('input');
        hiddenInput.type = 'hidden';
        hiddenInput.name = 'slug';
        hiddenInput.value = selectedValue;
        document.getElementById('mla-text-form').append(hiddenInput);
    });

    // Restore the selected value when the form is reloaded
    window.onload = function() {
        var hiddenInput = document.querySelector('[name="slug"]');
        if (hiddenInput) {
            var selectElement = document.querySelector('[name="mla_term_list"]');
            selectElement.value = hiddenInput.value;
            hiddenInput.remove();
        }
    };
</script>
</form>

Thanks for your update with the good news on your progress.

You can use another MLA example plugin to make the dropdown box “sticky” without any JavaScript. The “MLA UI Elements Example” plugin adds several enhancements, detailed in its Settings/MLA UI Elements Documentation tab. For your application, the “use_filters, for [mla_term_list]” Documentation section gives the appropriate information.

You must install and activate the example plugin. Navigate to the Settings/Media library Assistant Documentation tab and click the “Example Plugins” button. Type “UI” in the text box and click “Search Plugins” to filter the table.

You are looking for the “MLA UI Elements Example” plugin. Find that plugin and hover over the title in the left-most column. Click the “Install” rollover action, then go to the WordPress Plugins/Installed Plugins submenu and activate the example plugin as you would any other plugin.

Once the example plugin is installed and active you can simply add a use_filters=true parameter to your [mla_term_list] shortcode to make the dropdown value sticky when the page refreshes.

Hi David,

Is there nothing MLA can’t do?
I have installed MLA IU now and it is doing exactly what we wanted!

We’ve now moved the updated features from staging onto our LIVE site, which can be seen here:
https://www.wineworkimages.com/image-library/

Thank you again for your generosity with your time. You’ve helped make our site everything we wanted.
I’ll now mark this as resolved.

You mentioned in an earlier post that you would like feedback on the updates, please contact me if you have any questions or if there is any information I can provide that could be helpful.

Yours faithfully,

Colin Ford
WINEWORK SOLUTIONS IMAGES
Auckland, New Zealand

Thanks for the final report on your application and the link to the results; it’s a good-looking page.

There are many things that MLA can’t do, but I keep working on filling the gaps. This topic gave me the inspiration for a new example plugin; thanks for that. I will make some updates to the plugin’s Documentation based on your experience. If you have any other comments or feedback, let me know. Thanks again for your long-time interest in MLA.