I am trying to:
Show a slider and allow downloading for the "original" size image(s) or URLs for videos. The downloading can be part of the slider or handled separately below the slider. The user should be able to download the individual item or all items.
I have created the below. This works for the slider, but I can't figure out how to create links to the "original" size version of the images. Maybe a different short code?
<div class="mm-slider">
<ul>
[wpv-for-each field="wpcf-mm-images"]<li class="mm-image" data-download="[types field='mm-images' output='raw'][/types]">[types field="mm-images" title="%%TITLE%%" alt="%%ALT%%" class='mm-preview' size='large' align='center' resize='proportional'][/types]</li>[/wpv-for-each]
[wpv-for-each field="wpcf-mm-videos"]<li class="mm-video" data-download="[types field='mm-videos' output='raw'][/types]">[types field="mm-videos" title="%%TITLE%%" alt="%%ALT%%" class='mm-preview' size='large' align='center' resize='proportional'][/types]</li>[/wpv-for-each]
</ul>
</div>
For the download all option the best I could come up with was ta field in the admin to allow editors to upload a ZIP that contained the files in question. Extra credit if you have an automated solution...
Example of implementation:
hidden link
Dear Chris,
You can setup the link by adding HTML a tag, for example, replace the codes from:
[types field="mm-images" title="%%TITLE%%" alt="%%ALT%%" class='mm-preview' size='large' align='center' resize='proportional'][/types]
To:
<a href="[types field="mm-images" size='full'][/types]">[types field="mm-images" title="%%TITLE%%" alt="%%ALT%%" class='mm-preview' size='large' align='center' resize='proportional'][/types]</a>
This does not work. In what you sent:
[types field="mm-images" size='full'][/types]
will resolve to a complete IMG tag, which is not valid for the href attribute of the a tag. I just need the URL.
To get the image URL, you can add attribute "url" in the Types shortcode, for example:
[types field="mm-images" size='full' url='true'][/types]
More help:
https://toolset.com/documentation/customizing-sites-using-php/functions/#image
url:
'false'(default) | 'true'
true=output the url of the image instead of the html img tag.
Works with the size attribute to output the url of the re-sized image
Thanks! I found that output="raw" also works, though I suppose that url="true" is superior as that would return a resized image (if that was what's wanted).
Bonus question: Is there a way to get the index of the loop? I would like to show something like
Download Image: 1 2 3 4
I tried hacking something with a <ol>, but that didn't work.