Select second product image instead of first?

[kristobar]

Is there a way to have this select the second image in the product images, instead of the first one?

Thank you!

 <a href="{{ item.url | within: collections.all }}" class="thumbnail">
<figure class="lazy-image {% if item.image.src contains 'png' %} lazy-image--transparent {% endif %}" data-ratio style="padding-top: 130%">
<img 
src="{{ item.image | img_url: '100x130', crop: 'center' }}" alt="{{ item.title | escape }}"
srcset="{{ item.image | img_url: '100x130', crop: 'center' }} 100w, {{ item.image | img_url: '200x260', crop: 'center' }} 260w"
sizes="100px" class="img lazy"
loading="lazy"
width="{{ item.image.width }}" height="{{ item.image.height }}"
/>
</figure>

[LitExtension · Accepted solution]

Hi @kristobar,

Please change all code:

<a href="{{ item.url | within: collections.all }}" class="thumbnail">
{% assign image_product = item.product.media[1] %}
<figure class="lazy-image {% if image_product.src contains 'png' %} lazy-image--transparent {% endif %}" data-ratio style="padding-top: 130%">
<img 
src="{{ image_product | img_url: '100x130', crop: 'center' }}" alt="{{ item.title | escape }}"
srcset="{{ image_product | img_url: '100x130', crop: 'center' }} 100w, {{ image_product | img_url: '200x260', crop: 'center' }} 260w"
sizes="100px" class="img lazy"
loading="lazy"
width="{{ image_product.width }}" height="{{ image_product.height }}"
/>
</figure>

Hope it helps!

[kristobar]

Wow thank you!

Would it be possible to add a part that checks if the product has more than one image to select the second one?

Sorry to bug you again

[LitExtension]

Hi @kristobar,

Please change all code:

<a href="{{ item.url | within: collections.all }}" class="thumbnail">
{% if item.product.media[1] %}
  {% assign image_product = item.product.media[1] %}
{% else %}
  {% assign image_product = item.image %}
{% endif %}
<figure class="lazy-image {% if image_product.src contains 'png' %} lazy-image--transparent {% endif %}" data-ratio style="padding-top: 130%">
<img 
src="{{ image_product | img_url: '100x130', crop: 'center' }}" alt="{{ item.title | escape }}"
srcset="{{ image_product | img_url: '100x130', crop: 'center' }} 100w, {{ image_product | img_url: '200x260', crop: 'center' }} 260w"
sizes="100px" class="img lazy"
loading="lazy"
width="{{ image_product.width }}" height="{{ image_product.height }}"
/>
</figure>

[kristobar]

Thank you so much!

[LitExtension]

Hi @kristobar,

I saw you liked my answer. If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

[happylippo]

Hello, is it possible to have that feature just on one "landing page". So in the normal Shop it shows the first image as a thumbnail and on a specific page with featured Products it shows the second image? Maybe over custom css?

Thanks in advance!