Solved

Why isn't my image code rendering correctly?

aseasy
Tourist
12 2 0

Hi can someone please help and explain why this code is not rendering the image?

 

<img src="{{ block.settings.image | image_url: width: 450 | }}" />


{% schema %}
{
"name": "Slideshow",
"tag": "section",
"class": "slideshow",
"settings": [
{
"type": "text",
"id": "title",
"label": "Slideshow"
}
],
"blocks": [
{
"name": "Slide",
"type": "slide",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
}
]
}
]
}
{% endschema %}

 

I am able to upload the image, but it doesn't show on the page, please help.

thanks,

Y.

 

Can trace it, 

Accepted Solution (1)
aseasy
Tourist
12 2 0

This is an accepted solution.

Hi Simonsron,

Thank you so much for the answer, it renders the image now and your quick response, been seeking for this since two days. Could you please explain why it has to be wrapped in a if statement.

Why can't it just be loaded like this:

<img src="{{ block.settings.image | image_url: width: 450 }}" />

that's what you find in tutorials and documentation, weird.

Anyhow, thanks again and looking forward to your reply.

Y.

Thanks in advance,

 

View solution in original post

Replies 3 (3)

Simonsron
Shopify Partner
699 87 122
{% for block in section.blocks %}
{% if block.type == "slide" %}
<img src="{{ block.settings.image | image_url: width: 450 }}" />
{% endif %}
{% endfor %}

try this

banned
aseasy
Tourist
12 2 0

This is an accepted solution.

Hi Simonsron,

Thank you so much for the answer, it renders the image now and your quick response, been seeking for this since two days. Could you please explain why it has to be wrapped in a if statement.

Why can't it just be loaded like this:

<img src="{{ block.settings.image | image_url: width: 450 }}" />

that's what you find in tutorials and documentation, weird.

Anyhow, thanks again and looking forward to your reply.

Y.

Thanks in advance,

 

Simonsron
Shopify Partner
699 87 122

Because the blocks you define are a large array, you can omit the if judgement if you only have one block of type, when you have multiple blocks of type, you must use the if judgement.

banned