[Resolved] Using foreach with a repeating field to integrate Yootheme UI Kit

[Author]

Posts

[markY-2]

Tell us what you are trying to do?
Essentially, I have a repeating image field, and I need to link each image to itself (so I can use a lightbox). How can I go about doing this?

We are building a listings component and showing a property listing and associated images. I created a repeatable image field called "additional-images". I now want to link each iteration of the image to itself, so in PHP terms I would need a foreach loop. I found that a similar function exists in Toolset but I can't seem to get it to work. And not sure if this is even the way I should be going to implement it.

I've tried:
[wpv-for-each field="wpcf-additional-images"]
[types field='additional-images' title='%%TITLE%%' alt='%%ALT%%' size='full'][/types]
[/wpv-for-each]

Which results in a blank page.

[types field='additional-images' title='%%TITLE%%' alt='%%ALT%%' size='thumbnail' proportional='false' class='uk-thumbnail' separator=', '][/types]

This does what I need, I tried messing with the "seperator" to make an "a" tag, but there's no way to get it to change out the URL to the specific image so that doesn't work.

Ideally, I need an image to be displayed like this

Perhaps if I could wrap it in a DIV would be spectacular too.

Is there any documentation that you are following?
Only old forum posts like https://toolset.com/forums/topic/repeating-custom-field-embedded-media-wpv-for-each-doesnt-seem-to-work/ but they don't do exactly what I needed.

Is there a similar example that we can see?
I don't have an example. I've literally done this before and I believe the client that I did it for rebuilt their website so I am unable to see how I did it.

[Jamal]

Hello and thank you for contacting the Toolset support.

Try the following shortcode to generate the URL of the image:

<a href="[types field='additional-images' output='raw' url='true'][/types]" ...

But, you can't generate the image title, from the media library, inside the <a> tag. It can be generated from the <img> tag, but not as a value to be used inside the <a> tag.

Toolset stores images as a URL in the post's custom field. It will require custom code to get the image ID from the URL, then get the image data(title, alt, etc.). You can reuse the shortcode defined in this reply https://toolset.com/forums/topic/alt-text-output-for-images-from-custom-field/#post-1857657
However this shortcode is not optimized from repeating fields, it may require some adjustments.

I would suggest creating a custom shortcode that will generate the whole gallery output(the wrapping div included), instead of generating each image markup within the wpv-for-each shortcode. Let me know if you need a code example.

[markY-2]

My issue is resolved now. Thank you!

For future reference, this was the code needed.

[wpv-for-each field="wpcf-additional-images"]

[types field='additional-images' title='%%TITLE%%' alt='%%ALT%%' size='thumbnail' proportional='false' class='uk-thumbnail' separator=', '][/types]

[/wpv-for-each]