CODEWITHSUNDEEP
shopify
Krupal Panchal
Krupal Panchal

Reputation: 1545

Shopify: Get an image URL from for loop

I am new to Shopify. I have started to implement theme customization and created one repeated dynamic section for image and link. Now I have the problem is when I try to get that value it showing nothing but when I checked to debug I found this. https://prnt.sc/tntt73

This is my code.

<hr>
<div id="page-width section-cta">
  <div class="section-header text-center">
    <h3> {{ section.settings.text-box }} </h3>
  </div>
  <div class="logo_slider">
  {% for block in section.blocks %}  
    {{ block.settings }}
    <div class="item">   
      <a href="{{ block.settings.link }}"><img src="{{ block.settings.image }}" /></a>
    </div> 
    {% endfor %}
  </div>

</div>  
<hr>
{% schema %}
{
  "name": "Image Slider Section",
  "settings": [
    {
      "id": "text-box",
      "type": "text",
      "label": "Heading",
      "default": "Image Slider"
    }
  ],
  "blocks": [
    {
      "type": "select",
      "name": "Image",
      "settings": [
        {
          "id": "link",
          "type": "url",
          "label": "Image link"
        },
        {
          "id": "image",
          "type": "image_picker",
          "label": "Image"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Image Slider Section",
      "category": "Custom Dynamic Section"
    }
  ]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

Upvotes: 1

Views: 4664

Answers (1)

Bilal Akbar
Bilal Akbar

Reputation: 4930

You are trying to output image object as the value of src attribute while you actually need the URL there. As defined in the Shopify Docs for Image Picker:

In Liquid, the value of image_picker settings is either an image object (if an image has been selected and exists) or nil (if an image has not been selected, or the image doesn't exist). A URL for the image can be generated using the img_url filter. The image object also has built-in support for alt text.

So using nil check and img_url filter, your code will be

{% for block in section.blocks %}
    {%if block.settings.link != nil and block.settings.image != nil%}
        <div class="item">
            <a href="{{ block.settings.link }}"><img src="{{ block.settings.image.src | img_url: "medium" }}" /></a>
        </div> 
    {% endif %}
{% endfor %}

Upvotes: 2

Related Questions