Search code examples
shopifyshopify-template

Need help in getting image source in shopify image_picker

This is the current code:

<img src="{{ block.settings.imageId| img_url: 'large'}}" />

{% schema %}
{
    "name": "Single Mobile Image",
"class": "mobile-index-section",
"max_blocks": 1,
    "blocks": [
        {
            "type": "image_picker",
            "name": "Mobile Image",
        "settings": [
            {
            "type": "image_picker",
            "id": "imageId",
            "label": "Mobile Image"
          }
        ]
    }
],
"presets": [
  {
    "name": "Custom Mobile Image",
    "category": "Image",
    "blocks": [
      {
        "type": "image_picker"
      }
    ]
  }
]
}
{% endschema %}

When using {{ block.settings.imageId| img_url: 'large'}} , I'm not getting the image which is added on shopify customization using image picker.

Please help me to find out where I did mistake.

Solution

  • sections.blocks is an array element, you need to loop it or target a specific index.

    In your case {{ section.blocks[0].settings.imageId | img_url: '1024x'}} will get you the first block.

    In addition don't use named sizes, they are deprecated: https://shopify.dev/docs/themes/liquid/reference/filters/deprecated-filters#named-size-parameters.