Do you have to run yarn deploy to use {{ img.jpg | asset_url }} in a liquid file?

[yankeyhotel]

Problem

I have added images to src/static, but they don't show up in the browser until I run yarn deploy. Is there a way to make the images upload to Shopify automatically?

I guess it would work on just restarting via yarn start. Is that the best way?

Thanks

[t-kelly]

yarn start is currently only uploading Liquid files and is intended to fetch all other assets from your local express server. See this PR for more details.

Have you trying referencing this asset using | asset_url filter? Slate should be swapping that filter for a localhost path on build.

[yankeyhotel]

When I use <img src="{{ 'Logos-FrostBite.gif' | asset_url }}" /> I get this error.

./snippets/footer-menu.liquid
Module not found: Error: Can't resolve './Logos-FrostBite.gif' in '/Users/yankeyhotel1/Sites/slate--ha-06-25-18/src/snippets'
 @ ./snippets/footer-menu.liquid
 @ . sync ^\.\/snippets.*\.liquid$
 @ ../node_modules/@shopify/slate-tools/tools/webpack/static-files-glob.js
 @ multi ../node_modules/@shopify/slate-tools/tools/webpack/hot-client.js ../node_modules/@shopify/slate-tools/tools/webpack/static-files-glob.js

and when I use <img src='{{ "Logos-FrostBite.gif" | asset_url }}' /> it's replaced <img src="//cdn.shopify.com/s/files/1/0012/6025/7305/t/4/assets/Logos-FrostBite.gif?5500942190152378940">

[timtorres]

I'm having the same problem in both my theme and header section files.
I'm using {{ 'favicon.png' | asset_img_url: '32x32' }} and my image files are located in the default assets > images folder.

[timtorres]

WAIT! I just read your comment more carefully. I didn't at first notice the difference between the two lines of code you used. I made the same switch between ' ' and " " and the errors cleared up. This has been the source of hours of frustration...

[yankeyhotel]

The reference on how to set up the quotes I found on the Slate Themes Wiki page about the static directory. Which I am doing, but the static files aren't local they are sourcing the files on Shopify.

@timtorres when you use this do you get a local image or the one on Shopify? My understanding is that it should be local so you don't have to deploy the theme everytime you add an image to the static directory. But that isn't currently happening to me.

[eighthday]

for me images are only uploaded when I deploy and when the images are in the static folder (no other folder works)

[yankeyhotel]

Ok, I got this to work. After playing around with single and double quotes.

<a class="img-btn" href="/" style="background-image: url({{ '../assets/static/footer-menu-stocklists-back.jpg' | asset_url }});">

Now compiles to the correct local file...

<a class="img-btn" href="/" style="background-image: url(https://localhost:8080/footer-menu-our-story-back.jpg);">

And most importantly points to the correct file on Shopify when deployed.

<a class="img-btn" href="/" style="background-image: url(//cdn.shopify.com/s/files/1/0012/6025/7305/t/4/assets/footer-menu-our-story-back.jpg?16180373719407306340);">

Hope this help others understand.

[yankeyhotel]

Ok, this works in html, but not in scss.

Liquid in HTML

<a style="background-image: url({{ '../assets/static/footer-menu-stocklists-back.jpg' | asset_url }});" >

compiles to...

<a style="background-image: url(https://localhost:8080/footer-menu-our-story-back.jpg);">

But as Liquid in theme.scss.liquid it compiles this

a {
 background-image: url({{ 'fa-sol-circle.svg' | asset_url }});
}

into...

a {
  background-image: url(https://cdn.shopify.com/s/files/1/0012/6025/7305/t/4/assets/fa-sol-circle.svg?2138954271122538236);
}

or...

a {
 background-image: url({{ '../static/fa-sol-circle.svg' | asset_url }});
}

into

a {
  background-image: url(https://cdn.shopify.com/s/files/1/0012/6025/7305/t/4/assets/fa-sol-circle.svg?2138954271122538236);
}

I guess the main problem is that files in the static folder are not automatically uploaded to Shopify so the images are shown as missing. And/or Slate isn't changing the url parameter in the scss to look at the local address instead of the Shopify address.

Let me know if I am missing something.

[timtorres]

@yankeyhotel When I used what I wrote above, it only pointed to Shopify's CDN. My understanding and results are the same as yours and @eighthday .

What I did was just manually upload my image and css files to the assets folder using the online theme editor and that worked, however that's proving to be a problem with active development. When I use yarn start, it doesn't compile and upload my .css.liquid file, nor will it use a local css file.
If I import my css files into theme.scss, then I can do live local dev work, but it's not compiling Liquid inside the file.

[yankeyhotel]

I'm kinda bummed by these inefficiencies, Slate seems like it could bring a lot to the table, but misses so hard on basic development. I've been using ThemeKit for a long time, and to be honest, its workflow is so much easier and quicker. Probably going to go back to it.

[t-kelly]

Hey @yankeyhotel -- thanks for posting your progress here, it really helps others with the same problem. Please keep in mind that Slate v1 is still in beta so it should be expected to hit some of these kinds of problems.

Would you mind opening a separate issue about using images in SCSS?

[t-kelly]

Assets have been simplified in #850 and the change is now available in v1.0.0-beta.12.

Docs that have also been updated:

https://github.com/Shopify/slate/wiki/Slate-themes
https://github.com/Shopify/slate/wiki/Template-and-layout-bundles
https://github.com/Shopify/slate/wiki/Local-development

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.