Best practice to handle images in theme?!

sage
1

i am pretty new to sage and wonder if there are any guidelines for using images in template and css files.
for template files, there seems to be two ways:

First method (the classic wp way)

<img src="<?= get_template_directory_uri(); 
?>/assets/images/logo.png" alt="<?= get_bloginfo("name"); ?>"/>

Second method (sage style?!)

<img src="<?= Assets\asset_path('images/logo.png ') ?>" 
alt="<?= get_bloginfo("name"); ?>"/>

which one should i prefer? with 2nd method images are expected to be in /dist/ folder.

for css/less files i did not find any way to use images (file not found?!). nothing of these work:

background: url("../images/logo.png") no-repeat;
background: url("images/logo.png") no-repeat;
background: url("assets/images/logo.png") no-repeat;
background: url("dist/images/logo.png") no-repeat;

can’t find any help here in existing threads or in the docs :frowning:

2 Likes
2

The first way, “classic”, should still point to dist.

background: url("../images/logo.png") no-repeat; should work in CSS.

4 Likes
3

You could also define absolute links using a base-url. That works pretty good, but I don’t use autmated deploys (yet), so there might be an issue there. Not sure.

4

Yeah, absolute URL’s are tricky in CSS

5 
background: url("../images/logo.png") no-repeat;

just be sure to run the ‘images’ gulp task beforehand so that the image is actually in dist/images…

6

Anyone experiencing weirdness on how these relative urls are compiled? I keep getting the wrong path — for example, this:

background: url("../images/logo.png");

Is being output in CSS as:

background: url("styles/styles/images/logo.png");

Anyone else experience this ever?

1 Like
7

Yeah, it’s an issue with the minifer. Apply this PR: https://github.com/roots/sage/pull/1452

1 Like
8

@kalenjohnson thanks so much! Perfect fix :slight_smile: