PLEASE HELP product image loop

BMil
New Member
1 0 0

Hello,

I am new to working with liquid with some coding knowledge. I am trying to create a section that can be added to my website where it has an animation showing a chosen products images (depending on how many images are inside the product, but max 5).

BMil_0-1614301781321.png

 

For some reason, whatever I do I can't get the images to show (it either defaults to placeholders or disappears completely). I'm obviously doing something wrong but not sure what it is, I got the section to be able to select a product but for some reason it doesn't find the products images.

Here is the code:

{%- liquid
  assign collection = products[section.settings.product]
  assign isEmpty = false

  if section.settings.product == blank
    assign isEmpty = true
  endif
-%}

{%- if section.settings.divider -%}<div class="section--divider">{%- endif -%}

<div class="page-width">
  <div class="feature-row feature-row--small-none">

    <div class="feature-row__item feature-row__callout-image">
      <div class="callout-images{% if isEmpty %} blank-state{% endif %}" data-aos="collection-callout">
        {%- if isEmpty -%}
          {%- for i in (1..5) -%}
            {%- capture current -%}{% cycle 1, 2, 3, 4, 5, 6 %}{%- endcapture -%}
            {%- if forloop.index == 1 -%}
              <div class="callout-image-centered">
            {%- endif -%}
              <div class="callout-image">
                {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
              </div>
            {%- if forloop.last -%}
              </div>
            {%- endif -%}
          {%- endfor -%}
        {%- else -%}
          {%- for product in product.media limit: 5 -%}
            {%- liquid
              case forloop.index
                when 1
                  assign callout_image_size_small = '280x'
                  assign callout_image_size_medium = '360x'
                  assign callout_image_size_large = '560x'
                when 2
                  assign callout_image_size_small = '180x'
                  assign callout_image_size_medium = '234x'
                  assign callout_image_size_large = '360x'
                when 3
                  assign callout_image_size_small = '160x'
                  assign callout_image_size_medium = '208x'
                  assign callout_image_size_large = '320x'
                when 4
                  assign callout_image_size_small = '200x'
                  assign callout_image_size_medium = '260x'
                  assign callout_image_size_large = '400x'
                when 5
                  assign callout_image_size_small = '100x'
                  assign callout_image_size_medium = '130x'
                  assign callout_image_size_large = '200x'
              endcase
            -%}

            {%- if forloop.index == 1 -%}
              <div class="callout-image-centered">
            {%- endif -%}

              <img
                class="callout-image lazyload"
                data-srcset="
                  {{ product | img_url: callout_image_size_small }} {{ callout_image_size_small | remove: 'x' | append: 'w' }},
                  {{ product | img_url: callout_image_size_medium }} {{ callout_image_size_medium | remove: 'x'  | append: 'w' }},
                  {{ product | img_url: callout_image_size_large }} {{ callout_image_size_large | remove: 'x'  | append: 'w' }}"
                data-sizes="auto"
                alt="{{ product.title | escape }}">

            {%- if forloop.last -%}
              </div>
            {%- endif -%}
          {%- endfor -%}
        {%- endif -%}
      </div>
    </div>

    <div class="feature-row__item feature-row__text feature-row__text--{{ section.settings.layout }} feature-row__callout-text larger-text">
      <div class="feature-row__content">
        {%- if section.settings.subtitle -%}
          <p class="subtitle">{{ section.settings.subtitle }}</p>
        {%- endif -%}
        {%- if section.settings.title != blank -%}
          <h2 class="h3">{{ section.settings.title }}</h2>
        {%- endif -%}
        <div class="rte">
          {%- if section.settings.text != blank -%}
            <p>{{ section.settings.text }}</p>
          {%- endif -%}
        </div>
        {%- if section.settings.cta_text1 != blank -%}
          <a href="{{ section.settings.cta_link1 }}" class="btn">
            {{ section.settings.cta_text1 }}
          </a>
        {%- endif -%}
        {%- if section.settings.cta_text2 != blank -%}
          <a href="{{ section.settings.cta_link2 }}" class="btn">
            {{ section.settings.cta_text2 }}
          </a>
        {%- endif -%}
      </div>
    </div>

  </div>
</div>

{%- if section.settings.divider -%}</div>{%- endif -%}

{% schema %}
  {
    "name": "Product callout",
    "class": "index-section",
    "settings": [
      {
        "type": "product",
        "id": "product",
        "label": "product"
      },
      {
        "type": "text",
        "id": "subtitle",
        "label": "Subheading",
        "default": "Brand new"
      },
      {
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Product callout"
      },
      {
        "type": "textarea",
        "id": "text",
        "label": "Text",
        "default": "Use this section to easily call attention to one of your products. We'll show photos of the first 5 products."
      },
      {
        "type": "text",
        "id": "cta_text1",
        "label": "Button #1 text",
        "default": "Shop Jackets"
      },
      {
        "type": "url",
        "id": "cta_link1",
        "label": "Button #1 link"
      },
      {
        "type": "text",
        "id": "cta_text2",
        "label": "Button #2 text",
        "default": "Shop All Mens"
      },
      {
        "type": "url",
        "id": "cta_link2",
        "label": "Button #2 link"
      },
      {
        "type": "select",
        "id": "layout",
        "label": "Layout",
        "default": "right",
        "options": [
          {
            "value": "left",
            "label": "Text on left"
          },
          {
            "value": "right",
            "label": "Text on right"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "divider",
        "label": "Show section divider",
        "default": false
      }
    ],
    "presets": [{
      "name": "Product callout",
      "category": "Product"
    }]
  }
{% endschema %}

 

0 Likes