Does "get_asset_url" function work in css?

SOLVE
SandyG1
Contributor | Partner

Hi all, I hope someone can help me.

 

Either this is not possible or it just doesn't work. I'm trying to add a bg image to a pseudo element (:after) using the function {{ get_asset_url }}


Using the following method outlined in the image below, I am given the exact code I need to enter:

 

SandyG1_0-1597311233515.png

This gives me  {{ get_asset_url("/theme-2020/assets/images/figure_point_graphic.svg") }}

 

But when I use this in CSS it doesn't resolve at all.

Can someone confirm whether this should or shouldn't work so I can stop wasting my time trying to figure out why it's not working.

If someone thinks it's possible would you be kind enough to check that it still works your end. 

Thanks for your help in advanced!

 

S

0 Upvotes
1 Accepted solution

Accepted Solutions
Kevin-C
Solution
Recognized Expert | Partner

Ohh! I see, I though you were working in like a master css file and not a module specific css area!

 

For future reference: Hubl will not be resolved in custom module css.

 

This article had a few other options worth checking out!

View solution in original post

0 Upvotes
7 Replies 7
Kevin-C
Recognized Expert | Partner

Hey @SandyG1 

 

Do you know how that code resolves?

Try hitting the "Show output" toggle and see if the path resolves to what you expect. If not it will need modification. Or it might point out that your CSS has a bug.

0 Upvotes
SandyG1
Contributor | Partner

Hi @Kevin-C 

 

Thanks for getting back to me.

 

SandyG1_0-1597324941536.png


As you can see here, it resolves to nothing. Are you suggesting that this function should work in css?

The bits that are covered are simply what you see on the left inspect.

Inspect shows url empty (myimage itself shows the location of the css file but thats chrome inspect default behaviour when no url is declared - afaik)

 

0 Upvotes
Kevin-C
Recognized Expert | Partner

@SandyG1 

 

Interesting, the hubl isn't even being touched!

This surprises me because I just tested the same technique and it resolved for me…

 

What build method are you using? Theme, template, or module?

 

EDIT:

Just saw that you path says "theme"

0 Upvotes
SandyG1
Contributor | Partner

Hold on, you did get it to work?

 

That's so strange

0 Upvotes
SandyG1
Contributor | Partner

Hi @Kevin-C 

I now know that this is not possible. As I'm developing locally, I don't get the errors which appear in the design manager.

 

Upon checking the design manager, it has a warning


Warning:45:27HubL in your CSS or JavaScript won’t be parsed, except for the module_asset_url function



That's a shame we don't get such warnings when trying to push this file.

Kevin-C
Solution
Recognized Expert | Partner

Ohh! I see, I though you were working in like a master css file and not a module specific css area!

 

For future reference: Hubl will not be resolved in custom module css.

 

This article had a few other options worth checking out!

View solution in original post

0 Upvotes
SandyG1
Contributor | Partner

@Kevin-C 

 

You absolute star! WHY didn't I think about this. 

Tunnel vision. I thought I'd exhaused the docs. I read HUBL but not coding modules. thank you!

Have a virtual beer. thanks for your time.