Custom Product Gallery Looper w/ Featured Image

[OctoCog]

I’m creating a custom product looper that has a featured image, product gallery, and a custom video. I’ve successfully created the layout and set up the slideshow. The problem is I can only click on the thumbnails in the product gallery looper to navigate through the slideshow (see below)

I can’t click on the featured image thumbnail or custom video thumbnail to navigate through the slideshow. How can I have data-x-slide-goto go the first slide for the featured image thumb and data-x-slide-goto go to the last slide for the custom video thumb?

You can see a working example of this custom product gallery here: https://conscienceskin.wpengine.com/product/tea-tree-oil-foaming-facial-cleanser/

[ruenel]

Hey @OctoCog,

Thanks for writing in!

Be advised that you cannot use first and last as the value for the data-x-slide-goto custom attribute. It has to be a number value from 1 to n.

In your slider, you need to set the first and second slides to the featured image and the video or set them to last. A custom JS code could also help in changing the values of the data-x-slide-goto attribute.

Thanks.

[OctoCog]

@ruenel I set the 1st and 2nd slide as the featured image and video slide. Now I need to change the numerical value of the data-x-slide-goto value for the gallery image thumbs, so they are offset by 2.

I was looking at the Twig syntax referenced in this thread post and noticed they were able to modify a dynamic content value by changing it to Twig syntax. Would this be possible with the custom attribute value for data-x-slide-goto?

Here is a sample that I setup but it doesn’t appear to be working.
{{ ({looper.index_number}]+2) }}

Here it is within the custom attribute

I tried this, but it doesn’t appear to be working.

[raye]

Hey @OctoCog!

Just saw, that in my Twig example you mentioned some brackets were completely wrong. I fixed that.
So not sure if this will fix it, but try this:{{ (looper.index_number+2) }}.

You can also remove the inner round brackets since there are only two values summed up:
{{ looper.index_number+2 }}

The question is, if Twig is already recognized in the Custom Attributes. If yes, this should work.

[OctoCog]

@raye Thanks for the heads up. I did try this but it did not work. I wonder if Twig is recognized in Custom Attributes.

[ruenel]

Hey @OctoCog,

Regretfully Twig is not recognized by the custom attribute. We will forward this to @Charlie. Maybe he has something different in mind.

Thanks.

[charlie]

Anywhere you can use Dynamic Content you can use Twig. Custom Attributes can accept Dynamic Content so you’ll be able to do what Raye has suggested when Pro 6.5.0 is out. I ran a double check for you and it’s fine. Have a great weekend everybody.

[OctoCog]

@charlie Thank you for the heads up on Twig being able to be used in Custom Attributes. I’ll run a test once Pro 6.5.0 is out. Is your team thinking of releasing 6.5.0 roughly in a few weeks?

[ruenel]

Hey @OctoCog,

The Pro 6.5.0 version is currently in beta testing. It should be out in a few weeks.

Thanks.

[OctoCog]

Thank you @ruenel I’ll test it out once it is out!

[tristup]

Hi @OctoCog,

You are most welcome.