Image-banner.liquid code request

[kyle6661]

I have to version of code for image2 in image-banner.liquid for Dawn theme. The first one is my version and the second one is generated by Chatgpt, which one is better for SEO and improve score in Pagespeed insights? Thanks!

Version 1:

{%- if section.settings.image_2 != blank -%}

<div class="banner__media media{% if section.settings.image != blank %} banner__media-half{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">

{%- liquid

assign image_height_2 = section.settings.image_2.width | divided_by: section.settings.image_2.aspect_ratio

if section.settings.image != blank

assign image_class_2 = ‘banner__media-image-half’

endif

if section.settings.image != blank and section.settings.stack_images_on_mobile

assign sizes = stacked_sizes

elsif section.settings.image_2 != blank

assign sizes = half_width

else

assign sizes = full_width

endif

  -%}

{{

section.settings.image_2

    | image_url: width: 3840

    | image_tag:

width: section.settings.image_2.width,

height: image_height_2,

class: image_class_2,

sizes: sizes,

widths: widths,

fetchpriority: fetch_priority

}}

Version 2:

{%- if section.settings.image_2 != blank -%}

{%- liquid assign image_height_2 = section.settings.image_2.width | divided_by: section.settings.image_2.aspect_ratio if section.settings.image != blank assign image_class_2 = 'banner__media-image-half' endif

  if section.settings.image != blank and section.settings.stack_images_on_mobile
    assign sizes = stacked_sizes
  elsif section.settings.image_2 != blank
    assign sizes = half_width
  else
    assign sizes = full_width
  endif

  assign image_src_avif = section.settings.image_2 | image_url: width: 3840, format: 'avif'
  assign image_src_webp = section.settings.image_2 | image_url: width: 3840, format: 'webp'
  assign image_src_jpg = section.settings.image_2 | image_url: width: 3840
-%}

<picture>
  <source srcset="{{ image_src_avif }}" type="image/avif" sizes="{{ sizes }}">
  <source srcset="{{ image_src_webp }}" type="image/webp" sizes="{{ sizes }}">
  <img
    src="{{ image_src_jpg }}"
    width="{{ section.settings.image_2.width }}"
    height="{{ image_height_2 }}"
    class="{{ image_class_2 }}"
    sizes="{{ sizes }}"
    widths="{{ widths }}"
    loading="eager"
    fetchpriority="high"
    decoding="async"
    alt="{{ section.settings.image_2.alt | escape }}"
  >
</picture>

{%- endif -%}

[PieLab]

Hi @kyle6661

To add the custom banner, create a new section file in your theme’s code editor named custom-image-banner.liquid. Delete any default code in that new file and paste the complete code block below. Once saved, you can add and customize your new “Image Banner” section from the theme editor.

<style>
  .custom-banner { position: relative; width: 100%; background-size: cover; background-position: center; display: flex; justify-content: center; align-items: center; text-align: center; color: #fff; }
  .custom-banner--small { min-height: 280px; }
  .custom-banner--medium { min-height: 400px; }
  .custom-banner--large { min-height: 550px; }
  .custom-banner__content { padding: 20px; background-color: rgba(0, 0, 0, 0.3); border-radius: 5px; }
  .custom-banner__heading { font-size: 2.5rem; margin: 0 0 15px; }
  .custom-banner__button { display: inline-block; padding: 12px 24px; background-color: #000; color: #fff; text-decoration: none; border-radius: 3px; font-weight: bold; }
  .custom-banner__image--desktop { display: none; }
  .custom-banner__image--mobile { display: block; }
  @media screen and (min-width: 768px) {
    .custom-banner__image--desktop { display: block; }
    .custom-banner__image--mobile { display: none; }
  }
</style>

{%- liquid
  assign section_height = section.settings.section_height
  assign desktop_image = section.settings.desktop_image
  assign mobile_image = section.settings.mobile_image
  assign bg_image_desktop = desktop_image | image_url: width: 1920
  assign bg_image_mobile = mobile_image | image_url: width: 750
  if mobile_image == blank
    assign bg_image_mobile = bg_image_desktop
  endif
-%}

<div class="custom-banner custom-banner--{{ section_height }}" style="background-image: url('{{ bg_image_mobile }}');" {%- if desktop_image != blank %} data-desktop-image="url('{{ bg_image_desktop }}')" {% endif %}>
  <div class="custom-banner__content">
    {%- if section.settings.heading_text != blank -%}
      <h2 class="custom-banner__heading">{{ section.settings.heading_text | escape }}</h2>
    {%- endif -%}
    {%- if section.settings.button_text != blank and section.settings.button_link != blank -%}
      <a href="{{ section.settings.button_link }}" class="custom-banner__button">{{ section.settings.button_text | escape }}</a>
    {%- endif -%}
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const banner = document.querySelector('.custom-banner');
    const desktopImage = banner.getAttribute('data-desktop-image');
    function handleResize() {
      if (window.innerWidth >= 768 && desktopImage) {
        banner.style.backgroundImage = desktopImage;
      } else {
        banner.style.backgroundImage = `url('${banner.style.backgroundImage.slice(5, -2)}')`;
      }
    }
    handleResize();
    window.addEventListener('resize', handleResize);
  });
</script>

{% schema %}
{
  "name": "Image Banner",
  "settings": [
    { "type": "image_picker", "id": "desktop_image", "label": "Desktop Image" },
    { "type": "image_picker", "id": "mobile_image", "label": "Mobile Image", "info": "If blank, desktop image is used." },
    { "type": "select", "id": "section_height", "label": "Section Height", "options": [
        { "value": "small", "label": "Small" },
        { "value": "medium", "label": "Medium" },
        { "value": "large", "label": "Large" }
      ], "default": "medium" },
    { "type": "text", "id": "heading_text", "label": "Heading", "default": "My Banner" },
    { "type": "text", "id": "button_text", "label": "Button Text", "default": "Shop Now" },
    { "type": "url", "id": "button_link", "label": "Button Link" }
  ],
  "presets": [{ "name": "Image Banner" }]
}
{% endschema %}

Hope this helps!