From 59c25447e144fb2fb0cac5ca083682564b679347 Mon Sep 17 00:00:00 2001
From: Tyler Rowsell <tyler.rowsell@shopify.com>
Date: Tue, 9 Aug 2022 16:54:28 -0400
Subject: [PATCH] image_tag in collapsible-content

---
 sections/collapsible-content.liquid | 22 ++++++----------------
 1 file changed, 6 insertions(+), 16 deletions(-)

diff --git a/sections/collapsible-content.liquid b/sections/collapsible-content.liquid
index 67fc1bf5b11..68cee653f1e 100644
--- a/sections/collapsible-content.liquid
+++ b/sections/collapsible-content.liquid
@@ -35,22 +35,12 @@
               <div class="collapsible-content__media collapsible-content__media--{{ section.settings.image_ratio }} media global-media-settings gradient"
                 {% if section.settings.image_ratio == 'adapt' %} style="padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;"{% endif %}
               >
-                <img
-                  srcset="{%- if section.settings.image.width >= 165 -%}{{ section.settings.image | image_url: width: 165 }} 165w,{%- endif -%}
-                    {%- if section.settings.image.width >= 360 -%}{{ section.settings.image | image_url: width: 360 }} 360w,{%- endif -%}
-                    {%- if section.settings.image.width >= 535 -%}{{ section.settings.image | image_url: width: 535 }} 535w,{%- endif -%}
-                    {%- if section.settings.image.width >= 750 -%}{{ section.settings.image | image_url: width: 750 }} 750w,{%- endif -%}
-                    {%- if section.settings.image.width >= 1070 -%}{{ section.settings.image | image_url: width: 1070 }} 1070w,{%- endif -%}
-                    {%- if section.settings.image.width >= 1250 -%}{{ section.settings.image | image_url: width: 1250 }} 1250w,{%- endif -%}
-                    {%- if section.settings.image.width >= 1500 -%}{{ section.settings.image | image_url: width: 1500 }} 1500w,{%- endif -%}
-                    {{ section.settings.image | image_url }} {{ section.settings.image.width }}w"
-                  src="{{ section.settings.image | image_url: width: 1500 }}"
-                  sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
-                  alt="{{ section.settings.image.alt | escape }}"
-                  loading="lazy"
-                  width="{{ section.settings.image.width }}"
-                  height="{{ section.settings.image.height }}"
-                >
+              {% capture sizes %}(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2){% endcapture %}
+              {{ section.settings.image | image_url: width: 1500 | image_tag:
+                loading: 'lazy',
+                sizes: sizes,
+                widths: '165, 360, 535, 750, 1070, 1250, 1500'
+              }}
               </div>
             </div>
           {% endif %}