Hi! I had a problem where liquid would not output an image when using image_tag filter. I initially had an img_tag filter, which was working fine. But theme check told me it is a deprecated filter and that I should use image_tag instead. When I switched to image_tag, it would not work. The theme I was working on was not a 2.0 theme, so idk if it has something to do with that.
That suggestion pops up up also for the img_url filter, and probably others having img in them.
Also I think it’s annoying that a newly downloaded Dawn theme shows up a lot of errors in theme check, around 300, both in Shopify CLI: shopify theme check, and in Shopify Liquid VsCode extension, which shows syntax highlighting from theme check.
Additional question: how would you go about deactivating that particular rule (img_tag > image_tag) for all files in .theme-check.yml
Thanks,
Arti
1 Like
Hi,
I just had the same problem. img_url is deprecated and image_url didn’t work the same way img_url did.
Turns out the syntax is a little bit different.
img_url for example looks like this:
{{ ... | img_url: '150x' }}
image_url on the other hand looks like this:
{{ ... | image_url: width: 150 }}
Reference:
https://shopify.dev/api/liquid/filters/url-filters#image_url
https://shopify.dev/api/liquid/filters/deprecated-filters#img_tag
Hope I could help!
Lukas
2 Likes
Also, I just want to add here that the new image_tag won’t work with images in the assets folder.
{{ ‘watch-feature-icon.jpeg’ | asset_img_url: ‘19x24’ | img_tag: ‘Some alt text’, ‘feature-icon’ }}
Above won’t work with image_tag because we want to avoid images from assets and to have the merchant uploaded images instead.
2 Likes
Isn’t that the sort of thing that should be in the docs? It isn’t as far as I can see, and seems like the sort of thing that would leave people scratching their heads (or pulling out their hair) until they stumbled upon this answer.
3 Likes
Why would the new dawn theme ship with deprecated tags?
Will shopify developers fix these tags and push to the dawn upstream repo in the future?
Oh, so code that used to use the Theme editor to select images for, say, a slider that stored the images in the assets - using :
{
“type”: “image”,
“id”: “slide_1.jpg”,
“max-width”: 2000,
“label”: “Image”,
“info”: “2000 x 400px recommended”
},
in the settings_schema.json, with no other choice BUT to save in the assets, won’t work with image_tag because “…you want to avoid images from assets…” - without bothering to actually document it anywhere, or mention it, whatever.
Sure.
Great approach.
2 Likes
Absolutely this. If someone could explain how to make image_tag work with these files that are referenced from settings_schema.json because that’s where they are stored when the client is adding files via theme editor that would be really helpful.
1 Like
Thank you for this. I was wondering the exact same thing.
Coming back to this ghost forum to say that I’m also wondering the same! Has a solution been found or created for this?
For anyone having trouble rendering an image from your Shopify files, I was able to do it like this:
{{ images['example.png'] | image_url: height: 100 | image_tag }}
An example of this is shown here in the liquid docs, but never explicitly called out as the proper way to generate an image tag from an image in Shopify’s files.
