Cornerstone WC Single Layout | Not All Gallery Images Coming From Looper

[whitemedia]

Hi,

I have a new WC Single Layout in Cornerstone, which is not quite behaving as I expect it.

A bit of back-history: Originally I had planned on using the Woocommerce Gallery Element to handle the featured image and WC gallery. However, its sizing was tiny and I was unable to get it filling the entire width the of column it is in. (The element is still on the page).

My next step was to try to recreate the gallery using Loopers and Sliders. The main image stacked slider is created from two slider; the first brings through the product’s featured image, the second the gallery using a Looper. Similarly, the thumbnail navigation uses the same set up (noted as “1” in the below screenshot for the featured image slide and “2” for the gallery looper slider), but with an inline slider. I have managed to get it all working, but with two exceptions:

1. Clicking on the thumbnail in the navigation slider (“1” below) does not show the featured image in the main slider.

2. In the navigation slider, the first image of the product’s schematic, when clicked shows the featured image, not the schematic image in the main slider. In addition, the main slider does not include the schematic image at all, despite it being in the product’s gallery together with the other two images!

I am baffled as to why I am not seeing the correct results in the two sliders. Any advice will be much welcomed.

As a secondary topic, is it possible to get the Woocommerce Gallery element sized properly - as mentioned it is still on the layout (but not in the screenshot).More details in the Secure Note.

Thanks,
Christopher

[ruenel]

Hello @whitemedia,

Thanks for writing in!

It is because of how you linked the thumbs to the slides.

You have linked the 2nd thumb to slide 1. It should be linked to slide 2.

And by the way, the Featured Image Slide should NOT be a Looper Consumer.

Best Regards.

[whitemedia]

Hi @ruenel,

Thanks for your reply. I am not sure where the linking is wrong? In the thumbnail slider, the first image seems to display the last image in the main image slider, the second image in thumbnails displays the main featured image and so on. I cannot seem to find where the linking is wrong.

Thanks,
Christopher

[ruenel]

Hello Christopher,

You are using data-x-slide-goto {{dc:looper:index}}. It always starts at 1 so you cannot make the Featured Image as your first slide. You will have to move it to the last item instead.

You will also have to link it to slide #4. This will become an issue if you have more than 3 images for the gallery which means that the Slide #4 will no longer linked to the featured image.

Best Regards.

[whitemedia]

Hi @ruenel,

Apologies for a late reply. I am beginning to understand how the custom attribute works and that your explanation was very helpful.

Is there another method which can be used so that the featured image is the first image upon load in the main slider? If it is not the main image in the navigational slider, that does not matter.

Many thanks,
Christopher

[whitemedia]

Hi @ruenel,

I have answered my own question. I have tried to be too “clever” by separating the featured image from the gallery. In my setup, I simply need to add the featured image to the gallery and remove the featured image sliders from both sliders and all works as I wanted!

The proper featured image still does its job in SEO plugins and on Cornerstone Layouts. I had overcomplicated things, but your help pointed me in the right direction!

One extra request for Themeco’s Docs is, could a fuller section be added about “Custom Attributes”, what they are and how they can be used. It is clearly an area which has great functionality, but is not easy to understand and with very little intelligible information anywhere on the Internet. A detailed update would be a really useful thing for us middle-grounders! (@kory / @charlie).

Many thanks,
Christopher

[tristup]

Hi Christopher,

Glad that you were able to find the solution. We will surely consider your suggestion to include a complete section for Custom Attribute in our documentation.

Thanks