[Resolved] making links out of repeater field image

[Author]

Posts

[brianO]

I am trying to:
I have a custom image field that allows multiple images. In the content type that uses field group, I would like to better control each image with a light box link.
Based on: https://toolset.com/documentation/user-guides/repeating-fields/#Displaying

<div class="projectImages">
  <ul>
[wpv-for-each field="wpcf-project-images"]
  <li><a rel="lightbox" href="[types field="project-images" size="large" url="true" resize="proportional"][/types]">
  [types field="project-images" size="medium" align="none" resize="proportional"][/types]
    </a>
  </li>
[/wpv-for-each]
</ul>

I visited this URL:

I expected to see:

A list of images each linking to there respective lightbox original image.

Instead, I got:
List of images, with broken "a" tags

<ul>
<li>
 <a rel="lightbox" href="[types field=" project-images"="" output=""raw"][/types]""> 

<img alt="/wpg/wp-content/uploads/2015/07/slide1-wpcf_300x145.png" title="<em><u>hidden link</u></em>" class="attachment-medium" src="/wpg/wp-content/uploads/2015/07/slide1-wpcf_300x145.png?1a919b"> 

</a>
</li>
</ul>

[Beda]

Thank you for contacting us here in the Support Forum

Currently you could experience this issue due to the issue with WordPress API Update 4.2.3
https://toolset.com/2015/07/wordpress-4-2-3-fixes-a-security-problem-but-breaks-sites-with-shortcodes/

To see if that is the cause, please follow this instructions:
★ INSTRUCTIONS:

❌ Backup your website and database ❌
• Deactivate/Delete the "Installer" plugin (if you have it)
• Deactivate Views and Types plugins
• Login via FTP to your wp-content/plugins folder
• Delete Views and Types Plugins folders
• Go to https://toolset.com/account/downloads/ and download the latest beta Views and Types Plugin, then extract it.
• Upload the plugin via FTP to the wp-content/plugins folder.
⌥ alternatively you could upload the .zip file using Dashboard > Plugins > New > Upload
• Activate them in Dashboard > Plugins
This should not generate any problems.

If the issue doesn't solve with the above approach, I can suggest a similar approach with ThickBox, which is the inbuilt WordPress "Lightbox"
https://toolset.com/forums/topic/lightbox-effect/
https://toolset.com/forums/topic/image-slider-within-a-post/#post-272455

As example, you can then use:

[wpv-for-each field="wpcf-image"]
<a class="thickbox" rel="gallery" href="[types field="image" raw="true"][/types]">[types field="image" size="your_size"][/types]</a>
[/wpv-for-each]

You will need to first enable ThickBox in the Theme's functions.php

add_action( 'wp_enqueue_scripts', 'add_thickbox' );

Your approach also should work, using this:

<div class="projectImages">
  <ul>
[wpv-for-each field="wpcf-project-images"]
  <li><a rel="lightbox" href="[types field="project-images" raw="true"][/types]">
  [types field="project-images" size="medium" align="none" resize="proportional"][/types]
    </a>
  </li>
[/wpv-for-each]
</ul>
</div>

Please don't hesitate to inform me in case the issue persists

Thank you

[brianO]

Hi Beda,
Thank you for the response. I will work on this tonight and let you know.

Brian

[Beda]

Thanks for the Details

Please don't hesitate in case the issue persist, to request my feedback

Please acknowledge my Working Hours, you can see them in my profile:
https://toolset.com/forums/users/beda-s/

I'm off until Sunday, but Shane and also I will keep an eye on the queue here, so if you have urgent queries somebody will get back at you.

Thank you for your patience.

[brianO]

Hi,

Sorry still getting the same outcome with thickbox (no update beta):

<a class="thickbox" rel="gallery" href="[types field=" project-images"="" size="large" url="true" resize="proportional" ][="" types]"="">
  <img alt="<em><u>hidden link</u></em>" title="<em><u>hidden link</u></em>" class="attachment-medium" src="//www.jvmconstruct.com/wpg/wp-content/uploads/2015/07/house1-about-wpcf_300x222.png">
    </a>

Should I be escaping the " \"

<div class="projectImages">
[wpv-for-each field="wpcf-project-images"]
 <a class="thickbox" rel="gallery" href="[types field="project-images" size="large" url="true" resize="proportional"][/types]">
  [types field="project-images" size="medium" align="none" resize="proportional"][/types]
    </a>
[/wpv-for-each]
</div>

I made a copy of the site and updated to the beta version of tool/views.
Thickbox is not working. But the lightbox kinda works, but has issues. It is giving larger images rather than medium, and linking to the same size it is showing.

[wpv-for-each field="wpcf-project-images"]
<div class="projectImages">
      <a rel="lightbox" href="[types field="project-images" size="large" url="true" resize="stretch"][/types]">
        
        [types field="project-images" size="thumbnail" align="center" resize="stretch"][/types]
    </a>
  
</div>
[/wpv-for-each]

<a rel="lightbox" href="<em><u>hidden link</u></em>">
        
        <img alt="<em><u>hidden link</u></em>" title="<em><u>hidden link</u></em>" class="attachment-thumbnail aligncenter" src="<em><u>hidden link</u></em>">
    </a>

[brianO]

I created a new content and deleted the old, and now it works. The beta was the trick for me.

Thank you.

Brian