How can I display an uploaded image using a custom liquid section?

[wmwm]

I see that the 2.0 editor does not have a section to display an image I've uploaded to Files. I'm thinking a "Custom Liquid" section is probably the answer — but I can't seem to figure out the image_tag.

Simply put, the file I want to display in Files is called 'sample.jpg.' It's not attached to a product or anything else. How can I display this using liquid only?

Thanks for the help.

[Jason]

If it's in the files section you'll want to look at this:
https://shopify.dev/api/liquid/filters/url-filters#file_img_url

If you're not sure how to use it, let us know. Hopefully the doc link above gets you going.

[wmwm]

This is where I’m stuck — I’m using file_img_url in the Custom Liquid section, and now my page has the lengthy Shopify CDN URL plastered on it. The problem is that I want to pass this URL into image_tag so that the image will actually render. 

There’s no section type in Dawn 4.0 to just display a basic image that I’ve uploaded. So I need to be able to stay fully within liquid for the Custom Liquid section type to render the image on the page. Can this be done?

[Jason]

Is there a reason why you can't pop that url into the src property of an img tag? Shopify has filters for image tags as well if you didn't want to add that html.

If it helps (and maybe I'm not understanding the issue) feel free to drop some code chunks here or visuals to help me follow along.

You could also make a new section for single image display if you had something specific in mind that a theme didn't include.

[wmwm]

Thanks for your help. I got it to work by first assigning the image to an object and then using image_tag. The img_tag you suggested actually worked a lot easier, but I read that it's deprecated and I should use image_tag moving forward. Here's what I eventually settled on (if you see any improvements that can be made please let me know):

{% assign sample_image = images['sample.jpg'] %}

{{ sample_image | image_url: width: 400 | image_tag }}

This rendered the image successfully using only the "Custom Liquid" section that is included in Dawn. Without assigning the image to an object, the error given was: "input to image_tag must be an image_url." You apparently can't pass a file_img_url — and image_url has to be an object (I think).

Thanks again.

[jarvisuser90]

Thanks sharing the solution. It works for me too. 

Can you help me understand it better? Where does images[] come from? I can't find any ref to it in the docs.

[dartacus]

I don't know either, must be some sort of superglobal created in the background by shopify.

[dartacus]

This was the final piece of the puzzle, thanks.

(I was able to just use images['image-name.jpg'] directly in the liquid, without assigning it to an image first).

To expand, if you're going to be doing a lot of these with the same dimensions, you can also save time by creating a snippet that takes the image file name as an argument. This code is based on the Shopify article here: https://performance.shopify.com/blogs/blog/responsive-images-on-shopify-with-liquid

****

Example code for a snippet 'quick-render-image.liquid'

{% comment %}
Renders an image
Accepts:
- ws_img_name: {String} name of the image from files section of admin
Usage:
{% render 'quick-render-image', ws_img_name: xxxx %}
{% endcomment %}

<picture>
<source
media="(max-width: 800px)"
srcset="
{{ images[ws_img_name] | image_url: width: 300 }} 1x,
{{ images[ws_img_name] | image_url: width: 600 }} 2x,
">
{{ images[ws_img_name] |
image_url: width: 1920 |
image_tag:
widths: '1000, 2000',
sizes: '(min-width: 1000px) 760px, (min-width: 800px) calc(100vw - 380px), (min-width: 400px) 298px, 78.75vw',
alt: "Image alt text"
}}
</picture>

...and use {% render 'quick-render-image', ws_img_name: xxxx %} where you want an image.

G