How to show related featured image background scene?

[Boyi]

Context:

• We created a specialized listing page based on product colour for SEO purposes

Challenge:

• We want to show the applicable colour variant's scene image as the secondary image on hover
• Within the product media, the scene image is directly after the featured image

        

        

Ask:

• How to identify what is the number of the featured image in the overall media array? We can use the number + 1 to call the scene image 
• Any other way to call the corresponding colour scene image to display on hover?
• Context for consideration: https://cozylant.com/collections/brown-sofas

Thanks!

[PaulNewton]

---

@Boyi wrote:

• Within the product media, the scene image is directly after the featured image

---

{{ products.media[1] }}

https://shopify.dev/docs/api/liquid/objects/product#product-media 

https://shopify.dev/docs/api/liquid/basics#array 

@Boyi wrote:

How to identify what is the number of the featured image in the overall media array?

---

.position property https://shopify.dev/docs/api/liquid/objects/media#media-position 

Important point a variants featured_image is the only image attached to the variant atow.

https://shopify.dev/docs/api/liquid/objects/variant#variant-featured_image 

So is this only needing the 2nd image/media out of the product media array or the only image on a variant.

If needing the product featured_image is there a reason the featured_image is not normally the first.

@Boyi wrote:

• Any other way to call the corresponding colour scene image to display on hover?

---

It's not uncommon for stores to use the ALT text with a naming convention to parse|liquid-filter for associating different images with different things like a color variant-options. 💣 While still trying to be valuable semantic information for accessibility concerns and SEO, i.e. "Color: Brown, picture of a leather couch with legs raising it off the floor".

Also see https://shopify.dev/docs/api/liquid/objects/image#image-attached_to_variant?