How to show related featured image background scene?

How to show related featured image background scene?

Boyi
Shopify Partner
13 0 1

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

        Boyi_0-1690252776378.png

        Boyi_2-1690252848907.png

 

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!

Reply 1 (1)

PaulNewton
Shopify Partner
7450 656 1562

@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? 

 

Contact [email protected] for the solutions you need


Save time & money ,Ask Questions The Smart Way


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Thank Paul with a Coffee for more answers or donate to eff.org