Skip Navigation

[Resolved] How can I show the full size of the images

This thread is resolved. Here is a description of the problem and solution.

Problem: I have a repeating image custom field, and I would like to show thumbnails of each image that link to full-size image files.

Solution: Use the wpv-for-each shortcode to iterate over each image, then use the types field shortcode to output the resized thumbnail and full-size image URL.

[wpv-conditional if="( $(wpcf-property-gallery) ne '' )"]
<div class="text-center property-gallery">
[wpv-for-each field='wpcf-property-gallery']
<a href="[types field='property-gallery' size='full' url='true'][/types]">[types field='property-gallery' width='300' height='230' align='none' resize='crop'][/types]</a><br />
[/wpv-for-each]
</div>
[/wpv-conditional]

Relevant Documentation:
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-for-each
https://toolset.com/documentation/customizing-sites-using-php/functions/#image

This support ticket is created 7 years, 2 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

No supporters are available to work today on Toolset forum. Feel free to create tickets and we will handle it as soon as we are online. Thank you for your understanding.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 4 replies, has 2 voices.

Last updated by barisS 7 years, 2 months ago.

Assisted by: Christian Cox.

Author
Posts
#570647

hi,

[wpv-conditional if="( $(wpcf-property-gallery) ne '' )"]
<div class="text-center property-gallery">
[types field='property-gallery' width='300' height='230' align='none' resize='crop' separator=' '][/types]
</div>
[/wpv-conditional]

how can I make this section clickable? It resizes the images but I want to be able to click the images one by one and being able to see the original size in the same window.

#570784

Hi, you can wrap the image tag in a link tag, and use the full-size URL shortcode to define the href attribute of the link tag like so:

[wpv-conditional if="( $(wpcf-property-gallery) ne '' )"]
<div class="text-center property-gallery">
<a href="[types field='property-gallery' size='full' url='true'][/types]">[types field='property-gallery' width='300' height='230' align='none' resize='crop' separator=' '][/types]</a>
</div>
[/wpv-conditional]
#570804

It works thank you but only problem it opens all the pictures in the gallery all together. So it directs to a crazy link like. hidden link what can I do about it?

#570834

Oh I see now, it's a repeating image field. You'll have to use a slightly different approach here using wpv-for-each to iterate over each item:

[wpv-conditional if="( $(wpcf-property-gallery) ne '' )"]
<div class="text-center property-gallery">
[wpv-for-each field='wpcf-property-gallery']
<a href="[types field='property-gallery' size='full' url='true'][/types]">[types field='property-gallery' width='300' height='230' align='none' resize='crop'][/types]</a><br />
[/wpv-for-each]
</div>
[/wpv-conditional]
#570869

thank you very much!