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

[R_Reno]

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 }}"
                              >

[EBOOST · 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 }}"
                              >