asset_img_url produces invalid URL

Solved
Basharc
Tourist
3 1 0

I have an image Wave_Bottom.png in my Assets.

{{ 'Wave_Bottom.png' | asset_img_url: '122x35' }} in the body of a section produces the correct the URL. However:

background-image: url("{{ 'Wave_Bottom.png' | asset_img_url: '122x35' }}");

in the Stylesheet of the section produces:

https://cdn.shopify.com/s/files/1/0602/0952/9051/t/2/compiled_assets/%7B%7B%20'Wave_Bottom.png'%20%7...

which does not exist. 

Any idea?

Accepted Solution (1)

Accepted Solutions
Basharc
Tourist
3 1 0

This is an accepted solution.

Solved.

Turns out we can't have liquid inside {% stylesheet %}. So the solution is to have a <style></style> in the body of the section and complete ignore {% stylesheet %}.

https://community.shopify.com/c/shopify-design/can-t-use-variable-in-between-stylesheet-tags-in-temp... 

I fail to see the point of {% stylesheet %}. I know it gets injected dynamically, but as soon as liquid is required (such as a background image), I need to move from {% stylesheet %} to <style>. Why would anyone ever use {% stylesheet %} ?

View solution in original post

Replies 3 (3)
LitCommerce
Trailblazer
262 68 70

Hi @Basharc,

You can change the code:
background-image: url("{{ 'Wave_Bottom.png' | asset_img_url: '122x35' }}");
=>
background-image: url(Wave_Bottom.png);

Or please send your site and if your site is password protected, please send me the password.

I will check it for you.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
Basharc
Tourist
3 1 0

url(Wave_Bottom.png) also produce an invalid URL

Basharc
Tourist
3 1 0

This is an accepted solution.

Solved.

Turns out we can't have liquid inside {% stylesheet %}. So the solution is to have a <style></style> in the body of the section and complete ignore {% stylesheet %}.

https://community.shopify.com/c/shopify-design/can-t-use-variable-in-between-stylesheet-tags-in-temp... 

I fail to see the point of {% stylesheet %}. I know it gets injected dynamically, but as soon as liquid is required (such as a background image), I need to move from {% stylesheet %} to <style>. Why would anyone ever use {% stylesheet %} ?

View solution in original post