Solved

Show last image in card-product.liquid - Dawn Theme

R_Reno
Shopify Partner
19 1 2

Finally upgrading to a 2.0 theme and am having trouble.  In the card-product.liquid, I need to show the last image rather then the featured image.

 

Here is the code regarding the image.  Can anyone help with changes to show the last image?

 

 

 

 

 

<img
                                srcset="
                                  {%- if card_product.featured_media.width >= 165 -%}{{ card_product.featured_media | image_url: width: 165 }} 165w,{%- endif -%}
                                  {%- if card_product.featured_media.width >= 360 -%}{{ card_product.featured_media | image_url: width: 360 }} 360w,{%- endif -%}
                                  {%- if card_product.featured_media.width >= 533 -%}{{ card_product.featured_media | image_url: width: 533 }} 533w,{%- endif -%}
                                  {%- if card_product.featured_media.width >= 720 -%}{{ card_product.featured_media | image_url: width: 720 }} 720w,{%- endif -%}
                                  {%- if card_product.featured_media.width >= 940 -%}{{ card_product.featured_media | image_url: width: 940 }} 940w,{%- endif -%}
                                  {%- if card_product.featured_media.width >= 1066 -%}{{ card_product.featured_media | image_url: width: 1066 }} 1066w,{%- endif -%}
                                  {{ card_product.featured_media | image_url }} {{ card_product.featured_media.width }}w
                                "
                                src="{{ card_product.featured_media | image_url: width: 533 }}"
                                sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
                                alt="{{ card_product.featured_media.alt | escape }}"
                                class="motion-reduce"
                                {% unless lazy_load == false %}
                                  loading="lazy"
                                {% endunless %}
                                width="{{ card_product.featured_media.width }}"
                                height="{{ card_product.featured_media.height }}"
                              >

 

 

 

 

Accepted Solution (1)

EBOOST
Shopify Partner
833 229 256

This is an accepted solution.

Hi @R_Reno ,

May I suggest code below:

1. get last image

{%  assign lastImage  =  card_product.images | last  %}

2. replace "card_product.featured_media" by "lastImage"

{%  assign lastImage  =  card_product.images | last  %}
<img
    srcset="
      {%- if lastImage.width >= 165 -%}{{ lastImage | image_url: width: 165 }} 165w,{%- endif -%}
      {%- if lastImage.width >= 360 -%}{{ lastImage | image_url: width: 360 }} 360w,{%- endif -%}
      {%- if lastImage.width >= 533 -%}{{ lastImage | image_url: width: 533 }} 533w,{%- endif -%}
      {%- if lastImage.width >= 720 -%}{{ lastImage | image_url: width: 720 }} 720w,{%- endif -%}
      {%- if lastImage.width >= 940 -%}{{ lastImage | image_url: width: 940 }} 940w,{%- endif -%}
      {%- if lastImage.width >= 1066 -%}{{ lastImage | image_url: width: 1066 }} 1066w,{%- endif -%}
      {{ lastImage | image_url }} {{ lastImage.width }}w
    "
    src="{{ lastImage | image_url: width: 533 }}"
    sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
    alt="{{ lastImage.alt | escape }}"
    class="motion-reduce"
    {% unless lazy_load == false %}
      loading="lazy"
    {% endunless %}
    width="{{ lastImage.width }}"
    height="{{ lastImage.height }}"
                              >
Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤

View solution in original post

Reply 1 (1)

EBOOST
Shopify Partner
833 229 256

This is an accepted solution.

Hi @R_Reno ,

May I suggest code below:

1. get last image

{%  assign lastImage  =  card_product.images | last  %}

2. replace "card_product.featured_media" by "lastImage"

{%  assign lastImage  =  card_product.images | last  %}
<img
    srcset="
      {%- if lastImage.width >= 165 -%}{{ lastImage | image_url: width: 165 }} 165w,{%- endif -%}
      {%- if lastImage.width >= 360 -%}{{ lastImage | image_url: width: 360 }} 360w,{%- endif -%}
      {%- if lastImage.width >= 533 -%}{{ lastImage | image_url: width: 533 }} 533w,{%- endif -%}
      {%- if lastImage.width >= 720 -%}{{ lastImage | image_url: width: 720 }} 720w,{%- endif -%}
      {%- if lastImage.width >= 940 -%}{{ lastImage | image_url: width: 940 }} 940w,{%- endif -%}
      {%- if lastImage.width >= 1066 -%}{{ lastImage | image_url: width: 1066 }} 1066w,{%- endif -%}
      {{ lastImage | image_url }} {{ lastImage.width }}w
    "
    src="{{ lastImage | image_url: width: 533 }}"
    sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
    alt="{{ lastImage.alt | escape }}"
    class="motion-reduce"
    {% unless lazy_load == false %}
      loading="lazy"
    {% endunless %}
    width="{{ lastImage.width }}"
    height="{{ lastImage.height }}"
                              >
Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

https://www.eboosttech.net

EBOOST
DONATE ❤❤