Dawn theme, issues with recommendations by Shopify CLI. 'image_url' filter. Broken URLs in images

Technical Q&A
1

Hi there, hope you are having a good day.

I have to mention this because Dawn is one of the cornerstones of Shopify regarding theming right now (Dec 30th 2021), and this is no minor issue at all, as it could potentially provoke hours and hours of time wasted in unexperienced developers such as me.

I have installed Shopify CLI, this has been done by installing homebrew, git and rbenv.

At this point I’ve been able to see changes on real time as they are saved into the local repository’ files, even while they aren’t necessarily committed yet, by using the feature theme serve, and it has been great, however, there is another functionality of the CLI that made me lose at least 5 hours due to my inexperience.

That functionality is theme check, that can be used to detect errors and to force some coding guidelines into the theme you’re reviewing.

In this context theme check has displayed lots of occurrences of an allegedly deprecated filter, as it follows:

Screen Shot 2021-12-30 at 11.19.59.png
Screen Shot 2021-12-30 at 11.19.59.png2254×164 310 KB

Deprecated filter img_url, consider using image_url

The problem with using image_url instead of img_url in Dawn theme is that the path to the assets that are displayed is utterly destroyed, for example:

With img_url: https://cdn.shopify.com/s/files/1/0275/3783/4102/files/JFK_TWA_Corridor.jpg?v=1640840461

With image_url: /files/JFK_TWA_Corridor.jpg

I don’t know if I should call them a relative and an absolute path respectively, because one targets a media file hosted at a cdn level, but I’ll leave it that way.

Maybe it is just about a really cool and straightforward solution, a quick one, by modifying some parameter at the Dawn theme code and all of this should be fixed, but there are over 300 occurrences of this in around 30 different files, and I’m not too proficient in development, so that’s why I just restored the filter to its “flawed” state and now images work just fine.

Have you any experience like this one?

And if so, how have you fixed it?

Be well people!

2

Really disappointing to have the same experience of Dawn. Fresh install and Theme Check shows almost 300 “problems” then auto-correcting them breaks the theme.

3

Having this issue also, fresh cli install from homebrew with dawn synced to latest version. Would love some input on that

4

Same issue here and sad to see there is no fix yet.

5

Hi there,

I have been using the image_url tag with Dawn v3 and I am seeing absolute paths (to the CDN) being outputted when I use the image_url tag:

pic.jpg
pic.jpg1570×305 65.5 KB

The problem with using image_url instead of img_url in Dawn theme is that the path to the assets that are displayed is utterly destroyed…

I think you may just have a syntax error in your declaration of the filter; you can’t just replace img_url with image_url - there is a subtle difference in the syntax (see above).

The docs have listed the guts of the params you can pass to the image_url filter under URL filters (rather than media which is where I was originally looking for it) but I’ve tested this quite a bit and the only time I saw a broken link was if the width: or height: param was not passed when calling the filter or if a colon was missing (the output in that case was a GraphQL ID):

Milkbottlelough_0-1645116099625.png

See the docs for more info:

https://shopify.dev/api/liquid/filters/url-filters#image_url

Hope that helps; I’m finding image_url is working well and producing absolute paths.

thanks

L.

6

Hi L. I really appreciate the time you have invested in order to help all of us in a more straightforward fashion.

Examples of usage.

{{ product | image_url: width: 100, height: 100 }}
{{ variant | image_url: width: 720, height: 720 }}
{{ line_item | image_url: width: 1024 }}

{{ variant.image | image_url: width: 300, height: 300 }}
{{ variant.image.src | image_url: width: 240 }}

{{ product | image_url: width: 450, height: 450, crop: 'top', format: 'pjpg', pad_color: 000 }}

{{ product | image_url: width: 450, height: 450 }}

{{ product | image_url: width: 125 }}

{{ product | image_url: height: 500 }}

I haven’t posted anything regarding this because I don’t have time to spare here but yes, that’s the key, they are not the same and can’t be substituted by each other without their pertinent parameters.

I personally, am well aware of the syntax that should be used to replace img_url with image_url, it’s like include and render, they are two completely different animals.

However, the CLI suggestion was:
Deprecated filter img_url, consider using image_url

The complexity of the situation relies on several points:

  • There are (as I’ve stated before) around 300 occurrences across (approximately) 30 files.
  • These 300 warnings are present on the Dawn theme, a theme that is developed and maintained directly by Shopify.
  • A theme that could be gathered through the command shopify theme init.
  • For the newbies this pose a great threat regarding the stability of their code and understanding of how things work with liquid instructions, the CLI only states the sheer amount of warnings and suggest to use one filter instead of the other.
  • There isn’t a syntax example on the suggestion.
  • Based on that, is perfectly understandable that noobs (like me in that situation) tend to bulk replace one string for the other across several files.
  • Once the changes are made the CLI does not check the syntax used for that specific filter. And it’s quite worrying that the CLI is able to focus in something as mundane as suggesting the usage of spaces within curly brackets but isn’t able to detect failures when passing down parameters in filters the very CLI is suggesting.
  • The theme works fine with img_url, so it isn’t really deprecated.
  • The CLI crew is expecting developers to replace and adequate the syntax from a general filter to a entity related one on around 300 occurrences, and that’s just bonkers, especially since the CLI is intended to speed up things a lot.

Maybe later on the day I’ll be posting a bug in their Github, thanks again.

– L.

7

Hi Superfunk,

Ah yes! I missed the fundamentals of the issue you were noting in your original post, thank you for the very detailed clarification!

I agree 100%; it’s kind of crazy that Dawn v3.0 is using deprecated tags (especially as this is the theme I and many others base all of our custom theme builds on). I had a quick look GitHub and noticed this has been reported in some detail just two days ago:

https://github.com/Shopify/dawn/issues/1364

Hopefully the Shopify devs will sort this out. I was going to suggest using a regex find and replace to update the code but you make a very good point; this should ultimately be fixed at source.

I removed theme-check from my deployment pipeline as getting zero errors or warnings is about as likely as getting a page speed score of more than 25.

thanks

L.