[Resolved] Make an multiple instance image field cliquable

[Author]

Posts

[francoisP-5]

OK, in my CPT (disques) I have a field with multiple instances called "images". Here is the code I use to display those images.

[wpv-conditional if="( $(wpcf-images) gt '' )"]
[types field='images' alt='%%ALT%%' title='%%TITLE%%' width='575px' align='none' resize='proportional' separator=', '][/types]
[/wpv-conditional]

An example here : hidden link

What I want to do is that I would like to make these images on the right side cliquable so that when a user click on the image, he/she will see the (larger) original image displayed.

My question is: How should I tackle this?
Thanks ahead for any hints. BTW, I did search the forum but did not find any related information. Maybe my way of searching, sorry. François

[Nigel]

Hi François

You can get quite creative with the separator attribute when inserting repeating fields, such that you use closing and opening li tags, for example, to generate an unordered list, rather than simply separating items with a comma.

But that doesn't help you here because you need to dynamically output the image URLs for the links, so you will need to use the wpv-for-each shortcode to iterate over the occurrences of the image field.

https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-for-each

For your field "images" that would look something like this:

[wpv-for-each field='wpcf-images']
<a href="[types field='images' size='full' url='true'][/types]">[types field='images' alt='%%ALT%%' title='%%TITLE%%' width='575px' align='none' resize='proportional'][/types]</a>
[/wpv-for-each]

[francoisP-5]

Thank you very much. This did the job numero uno 🙂
Have a very nice day!
François