Skip Navigation

[Résolu] How to open [types field="thumbnails" in enlarged view?

The Toolset Community Forum is closed, for technical support questions, please head on to our Toolset Professional Support (for paid clients), with any pre-sale or admin question please contact us here.
This support ticket is created Il y a 10 années et 5 mois. There's a good chance that you are reading advice that it now obsolete.
This is the community support forum for Types plugin, which is part of Toolset. Toolset is a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients and people who registered for Types community support can post in it.

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Hong_Kong (GMT+08:00)

This topic contains 11 réponses, has 2 voix.

Last updated by anthonyS-2 Il y a 10 années et 5 mois.

Assisted by: Luo Yang.

Auteur
Publications
#148609

Hello,

Can someone please tell me how I can open a thumbnail image in enlarged views when the thumbnail image is clicked? What I am trying to achieve is to have each thumb image on the my page open in a new window so that the enlarged version of the thumb image/s can be viewed.

Below are the views I am using for my content template; however, the thumbs are static on the page at present and are not click-able so they open a larger version of the thumb image.

[types field="thumbnails" size="thumbnail" align="none" separator=", " id=""][/types]
[types field="floor-plans-3-beds" size="thumbnail" align="none" title=""][/types]

Normal HTML structure would look like something like the following:

<a href="target.htm"
onclick="window.open('target.htm', 'myWin', 'toolbar=no, directories=no,
location=no, status=yes, menubar=no, resizable=no, scrollbars=yes, width=640,
height=480'); return false">

Any help would be greatly appreciated as I am struggling to get this to work.

Thank you.

#148625

Hi anthonyS-2

Please try add parameter url="true":
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
https://toolset.com/documentation/functions/#Image

For example:

<a href='[types field="floor-plans-3-beds" size="full" align="none" title="" url="true"][/types]'
onclick="window.open('[types field="floor-plans-3-beds" size="full" align="none" title="" url="true"][/types]', 'myWin', 'toolbar=no, directories=no,
location=no, status=yes, menubar=no, resizable=no, scrollbars=yes, width=640,
height=480'); return false"><img src='[types field="floor-plans-3-beds" size="thumbnail" align="none" title="" url="true"][/types]'></a>
#148767

Hi Luoy,

I am sorry it didn't work. I have followed your instructions, and also referred to the example code reference documentation and it still didn't work. Instead, the example was outputting the URL for each thumbnail onto the page and no re-size occurred.

I have attached a screenshot of the thumbnails I want to show the bigger images for. I have also enclosed below the code I am using for the output in its current state as attached. Any assistance would be greatly appreciated. Many thanks.

CURRENT HTML OUTPUT FOR THE FLOOR PLANS BELOW:

</div>

Floor plans studio
<div class="vp-image">[types field="floor-plans-studio" size="thumbnail" align="none" title=""][/types]</div>
Floor plans 1 bed
<div class="vp-image">[types field="floor-plans-1-bed" size="thumbnail" align="none" title=""][/types]</div>
Floor plans 2 beds
<div class="vp-image">[types field="floor-plans-2-beds" size="thumbnail" align="none" title=""][/types]</div>
Floor plans 3 beds
<div class="vp-image">[types field="floor-plans-3-beds" size="thumbnail" align="none" title=""][/types]</div>

HTML OUTPUT FOR THE THUMBNAILS ON THE RIGHT BELOW:

<div class="one_thirds_col">
[types field="thumbnails" size="thumbnail" align="none" separator=" " id=""][/types]

Best regards
Anthony

#148768
thumbnail_output_14102013.jpg

Pls see screenshot attached.

#149152

Hello,

I would be grateful for any help on this request. I am still awaiting feedback on this issue.

Many thanks.

#149205

I am creating a test site for you, will feedback if there is any found, thanks for the patient

#149259

Here is the test site:
hidden link
user/pass: xgren/111111

Same code, and I removed a empty paragraph, please check if it is what you want.

#149430

Hi Luoy,

Thank you for doing the test site. Really appreciated!

1) I am using the views content template for my pages as there are 100s of pages using this template.

2) I see that the test works only for single thumbs. However, I am using multiple thumbnails that are attached to each floorplan and it seems the code does not work for multiple thumbnails. So for example:

[types field="floor-plans-studio" has 6 - 8 thumbnails
[types field="floor-plans-1-bed" has maybe 4 thumbails
[types field="floor-plans-2-beds has maybe 2 thumbails
[types field="floor-plans-3-beds has maybe 1 thumbnails

However, the number of thumbnails varies per listing and its like that across the website.

Any idea how to go about this?

I have copied the code I currently have above and would appreciate any form of assistance whatsoever.

Many thanks.

Best regards
Anthony

Cheers!

Anthony

#149580

Please try Views shortcode: wpv-for-each
Iterate through multple items in a post meta field and output the enclosed text for each item

For example:

<ol>[wpv-for-each field="wpcf-floor-plans-3-beds"]
<li><a href='[types field="floor-plans-3-beds" size="full" align="none" title="" url="true"][/types]' onclick="window.open('[types field="floor-plans-3-beds" size="full" align="none" title="" url="true"][/types]', 'myWin', 'toolbar=no, directories=no, location=no, status=yes, menubar=no, resizable=no, scrollbars=yes, width=640, height=480'); return false"><img src='[types field="floor-plans-3-beds" size="thumbnail" align="none" title="" url="true"][/types]'></a></li>
[/wpv-for-each]<ol>

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

#149974

Hello Luoy,

Thank you so much! That worked for the floorplans 🙂 Well done!!

The only problem right now is that its not working for my thumbnails. I have multiple images approx 12 multiple thumbs I need to show in enlarged views.

Here's what I currently have in my views content template:
[types field="thumbnails" size="thumbnail" align="none" separator=" " id=""][/types]

and I changed it to the following from the wpv-for-each examples you gave:

==========================

[wpv-for-each field="thumbnails"]
<a href='[types field="thumbnails" size="full" align="none" title="" url="true"][/types]' onclick="window.open('[types field="thumbnails" size="full" align="none" title="" url="true"][/types]', 'myWin', 'toolbar=no, directories=no, location=no, status=yes, menubar=no, resizable=no, scrollbars=yes, width=640, height=480'); return false"><img src='[types field="thumbnails" size="thumbnail" align="none" separator=" " id="" url="true"][/types]'></a>
[/wpv-for-each]

==========================

But it didn't work! Is my code wrong? Please kindly let me know.

Many thanks for all your help.

Best regards
Anthony

#150018

I assume your custom field is created with Types, Types prepend wpcf- before the custom field, so the code should like this:
[wpv-for-each field="wpcf-thumbnails"]
<a href='[types field="thumbnails" size="full" align="none" title="" url="true"][/types]' onclick="window.open('[types field="thumbnails" size="full" align="none" title="" url="true"][/types]', 'myWin', 'toolbar=no, directories=no, location=no, status=yes, menubar=no, resizable=no, scrollbars=yes, width=640, height=480'); return false"><img src='[types field="thumbnails" size="thumbnail" align="none" separator=" " id="" url="true"][/types]'></a>
[/wpv-for-each]

#150378

Hello Luoy,

I'd like to personally thank you for all your help with this ticket. My issues are now resolved. I would not have been able to resolve them without your assistance.

Many thanks once again.

Best regards
Anthony

Le forum ‘Types Community Support’ est fermé à de nouveaux sujets et réponses.

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