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, 1 month 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.

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)

Tagged: Real estate reference, Reference sites

This topic contains 4 replies, has 2 voices.

Last updated by barisS 7 years, 1 month ago.

Assisted by: Christian Cox.

Author

Posts

September 16, 2017 at 3:03 pm #570647

barisS

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.

September 17, 2017 at 4:21 pm #570784

Christian Cox

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]

September 17, 2017 at 5:45 pm #570804

barisS

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?

September 17, 2017 at 9:11 pm #570834

Christian Cox

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]

September 18, 2017 at 2:18 am #570869

barisS

thank you very much!

This ticket is now closed. If you're a Toolset client and need related help, please open a new support ticket.