Winework

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

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>

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

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

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.

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,

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

Thank you for your prompt assistance David.
That’s got it sorted.
Appreciate your help.

Hello David,
Firstly, I apologise for my slow reply. Vintage is about to kick-off here and I’m finding myself with more tasks than hours.

To go through each of your questions…

• Just to confirm, are you using the Media/Add New (Upload New Media) admin screen with MLA’s Bulk Edit Area?
  Yes, I am using MEDIA > ASSISTANT > ADD NEW > OPEN BULK EDIT AREA.
• Does “I add the taxonomies in the bulk upload area” mean that you are checking one or more existing terms in the Categories taxonomy before uploading the images?
  Yes. In CATEGORIES I have several types of images defined, from which I can select. In ATT> CATEGORIES I have a list of product brands from which I can select. And in TAGS, I enter a date (eg. 30 April).
• ”I am having to go through each new image file and individually set the taxonomies in Media > Library,” Have you tried using the Media/Assistant screen, selecting several files at once and using the Bulk Edit area to assign terms?
  I have just tried that method and it is successful! I didn’t even realise that option existed until you pointed it out. I can alter my workflow to do it this way from here on.

Thank you for a successful resolution.
Best regards,
Colin
Winework Solutions Images

Hi David,

I have installed the Development Version (20201210) and it works perfectly!

Issue resolved.

Thank you for your outstanding customer service, as usual!

Colin Ford
Winework Solutions

David,

Thanks for the pointer. I think this may be what you’re looking for…

[mla_term_list taxonomy=attachment_category child_of=26 mla_output=dropdown mla_option_value=”{+slug+}” show_count=true pad_counts=false ]

[mla_gallery]
attachment_category=”{+template:({+request:tax_input.attachment_category+}|kumeu-river)+}” posts_per_page=20 mla_output=”paginate_links, prev_next”
mla_link_href='{+new_url+}?tax_input[attachment_category]=”{+query:attachment_category,text+}”‘
[/mla_gallery]

[mla_gallery]
attachment_category=”{+template:({+request:tax_input.attachment_category+}|kumeu-river)+}” size=”thumbnail” posts_per_page=20 orderby=”title”
[/mla_gallery]

[mla_gallery]
attachment_category=”{+template:({+request:tax_input.attachment_category+}|kumeu-river)+}” posts_per_page=20 mla_output=”paginate_links, prev_next”
mla_link_href='{+new_url+}?tax_input[attachment_category]=”{+query:attachment_category,text+}”‘
[/mla_gallery]

Regards,

Colin

Hi David,

Sorry, but I don’t know where to look for those sections of code. Can you guide me?

I have the following templates showing under the Sortcodes tab in MLA settings.

Name, Type, Term List

default, Style, Gallery
(default)

default, Markup, Gallery
(default)

product, Style, Gallery

product_mu, Markup, Gallery

tag-cloud-dl, Markup, Tag Cloud
(default)

tag-cloud-ul, Markup, Tag Cloud
(default)

tag-cloud, Style, Tag Cloud
(default)

tag-cloud, Markup, Tag Cloud
(default)

term-list-checklist, Markup, Term List
(default)

term-list-dl, Markup, Term List
(default)

term-list-dropdown, Markup, Term List
(default)

term-list-ul, Markup, Term List
(default)

term-list, Style, Term List
(default)

Are any of these going to contain the code you’re looking for? Or am I looking in the wrong place?

Colin

• This reply was modified 4 years, 3 months ago by Winework.

Hi David,

I can confirm that my site is working with version 2.84.

[term_list]
Name: term-list
Styles:
<style type=’text/css’>
#[+selector+] {
margin: auto;
width: 100%;
}
#[+selector+] .term-list-item {
text-align: left;
}
#[+selector+] .term-list-caption {
margin-left: 0;
vertical-align: top;
}

#[+selector+].term-list-checklist {
list-style: none;
}
/* see mla_term_list() in media-library-assistant/includes/class-mla-shortcode-support.php */
</style>

[gallery]
Name:
Default
Open:
<div id='[+selector+]’ class=’gallery galleryid-[+id+] gallery-columns-[+columns+] gallery-size-[+size_class+]’>
Row Open:
<!– row-open –>
Item:
<[+itemtag+] class=’gallery-item [+last_in_row+]’>
<[+icontag+] class=’gallery-icon [+orientation+]’>
[+link+]
</[+icontag+]>
[+captiontag_content+]
</[+itemtag+]>
Row Close:
<br style=”clear: both” />

Custom Templates

[product_mu]
Name:
product_mu
Open:
<table id='[+selector+]’ class=’gallery galleryid-[+id+] gallery-columns-[+columns+]’>
Row Open:
<tr class=’gallery-row’>
Item:
<td class=’gallery-icon’>
[+thumbnail_content+]
</td>
<td class=’wp-caption-text gallery-caption’>
<font color=”black”>[+title+]</font><br />
<br>
File Name: [+file+]<br />
File Type: [+terms:category+]<br />
File Format: [+mime_type+]<br />
Dimensions: [+dimensions+] px<br />
File Size: [+file_size,commas+] bytes<br />
</td>
Row Close:
</tr>

[product]
Name:
product
Styles:
#[+selector+] .gallery-item {
float: [+float+];
margin: [+margin+];
text-align: center;
width: [+itemwidth+];
</td>
<td class=’wp-caption-text gallery-caption’ style=”border: none”>
[+title+]<br />
[+caption+]
</td>

I hope this is the info you meant… and hope it is helpful.

Best regards,
Colin

Hello David,

I have used MLA for years on my site and it has been the backbone of our downloadable media library.

However, today I too discovered that my Product Image Library (https://www.winework.com/our-services/winework-solutions-images/product-image-library/) stopped working after recently installing plugin updates. The last date I can identify it as working correctly is 02 December 2020.

The fault produced was such that selecting the desired brand from the Drop Down Menu, and clicking the GO button, did not return the images for the brand selected.

The issue is resolved by rolling back to version 2.84.

Please let me know if I can provide additional info that may help you resolve the issue in a new update.

Kind regards,

Colin Ford
Winework Solutions

Will the addition of add_filter( 'big_image_size_threshold', '__return_false' ); to functions.php be overwritten each time WordPress updates?