[Resolved] Display Repeating Image Field Inside Avada Carousel Shortcode

[Author]

Posts

[Mojo]

I have a repeating image-upload field that I want to display in the front-end.
This field is added to the "products" of wocommerce and I have a layout made up of content templates for this post-type.

I'm trying to display the repeating image field as Avada's image carousel. I can't seem to make it work.

The Avada Shortcode (edited to be shorter) for a carousel is

[fusion_images other_attributes=""]

[fusion_image image="URL OF IMAGE HERE"" image_id="" link="" linktarget="_self" alt="" /]
[fusion_image image="URL OF IMAGE HERE"" image_id="" link="" linktarget="_self" alt="" /]
[fusion_image image="URL OF IMAGE HERE"" image_id="" link="" linktarget="_self" alt="" /]
[fusion_image image="URL OF IMAGE HERE"" image_id="" link="" linktarget="_self" alt="" /]

[/fusion_images]

I'm trying to loop the "raw" url output of the repeating image url to the "URL OF IMAGE HERE" placeholder position.

I have registered [fusion_images] as a 3rd party shortcode in the settings area of Toolset.

I tried using a shortcode
A bit messy, as I have the beginning and end part of the shortcode as separators.

[fusion_images other_attributes=""]

[fusion_image image="[types field='gallery-images' output='raw' separator=' " image_id="" link="" linktarget="_self" alt="" /][fusion_image image=" '][/types]" image_id="" link="" linktarget="_self" alt="" /]" image_id="" link="" linktarget="_self" alt="" /]

[/fusion_images]

I also tried doing it as a view, but that didn't work either (its too long/elaborate to put here, right?)

Would really appreciate your help.

Thank you

[Beda]

A repeating field will either display all its instances or the instance you pass to it (as example index="4" will display the 4th item of the instances).
https://toolset.com/documentation/customizing-sites-using-php/functions/#image > More
Repeater attributes, User attributes, Term attributes, Usage examples
https://toolset.com/documentation/user-guides/repeating-fields/

Now, in a View, you could use the "for-each" shortcode, that will loop thru each instance and add whatever HTML or other details, to each of the instances.
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-for-each

Please let me know whether you need more details after trying the above suggested solutions.

[Mojo]

Hi Beda,

Thank you for your assistance. I've managed to get the shortcode to work throug a loop in a view ! Thank you ?

One problem tho is that the view (Of the avada image carousel), when inserted into a layout, does not open as a lightbox when clicked.

The view when inserted via Fusion Builder in a standard page template, works and the lightbox opens.

The view in a layout seems to be missing the <a> element that makes it a link that opens/triggers the lightbox.

Below is a snippet of the carousel's individual

element of the carousel that works.

<li class="fusion-carousel-item">
<div class="fusion-carousel-item-wrapper">
<div class="fusion-image-wrapper hover-type-liftup">
<a data-rel="iLightbox[gallery_image_1]" data-title="L6230974.jpg" aria-label="L6230974.jpg" href="**image URL here**" target="_self">
<img width="460" height="295" src="**image URL here**" class="attachment-portfolio-two size-portfolio-two" alt="" />
</a>
</div>
</div>
</li>

This is the snippet of the view in a layout that does not workk

<li class="fusion-carousel-item">
<div class="fusion-carousel-item-wrapper">
<div class="fusion-image-wrapper">
<img src="**image URL here**" alt=""/>
</div>
</div>
</li>

Interestingly this only happens when a user is logged in. When logged out, the correct markup is loaded and the lightbox works in the layout !

Please advise.

Regards

[Beda]

That's strange, but it's not a Toolset Feature that you use here.

I would need to replicate this locally with your plugins and some minimal steps.

Can you provide to me all necessary steps and the necessary Plugins, in the next private reply?

You could also provide a Site's Snapshot along with precise instructions where and how I can see the issue.
https://toolset.com/faq/provide-supporters-copy-site/

[Beda]

I receive:

ERROR: The password you entered for the username beda is incorrect. Lost your password?

This happened after I waited for several minutes for the login page to load completely.

There seems to be an issue with my user.

[Beda]

That could be a JS issue.

It seems some of the JS needed to highlight the hovered Picture, and pop it up in a lightbox is not delivered to the Front End when used in this scenario.

There are a few possible workarounds.

1. Wrap the images yourself in a Lightbox:
https://codex.wordpress.org/Javascript_Reference/ThickBox
https://toolset.com/forums/topic/light-box-ko-now/#post-322627

2. Try to figure out what JS function is used for that Lightbox of yours, then add that function very early in the View.

This can be done in the Views Filter Editor (where you add Custom Search ShortCodes in the View), when you open the JS section, you will see a selfexplaining "Front End Events" button.
Click on that and choose the right hook (I would choose "Custom search events" > "The custom search has been triggered")

Otherwise you might need to attach the JS in Toolset > Layouts JS/CSS