Sage: Displaying images in assets / images folder

1

Love Sage :smile:

I’ve successfully setup and starting building 3 projects with Sage recently.

I started a new Sage project and am having difficulty getting images to display on the front end like I have with earlier projects.

With earlier projects, I’ve simply put images in the assets/images folder and referenced them like:

<?php echo site_url(); ?>/assets/images/image.jpg"

It’s never been a problem before. Now I can’t get images to show using the same method. I’m wondering if there might be something I’m forgetting to do.

However, I do have a background image in the same folder and have successfully managed to reference it in my less file like so:

background-image: url(../images/starbkg.jpg);

So I’m not sure what gives here.

Thanks for any help.

1 Like
2 
<img src="<?= get_template_directory_uri(); ?>/dist/images/example.jpg">

You need to reference images from dist/, not assets/

2 Likes
3

Thanks Ben, worked perfect.

Has something changed just recently with this because as I mentioned, the other method has worked fine with Sage about a week ago.

4

Git is returning this error when running Gulp Watch after saving images in /assets/images:

[11:57:31] Starting 'images'...

events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: ENOENT, lstat 'z:\Google Drive\_dev\htdocs\_xxx\wp-content\themes\sage\assets\images\ps2572.tmp'

But all is well if I manually run Gulp Build.

5

<?php echo site_url(); ?> would have only worked with rewrites enabled, which hasn’t been in the Roots theme for quite some time.

6

Well, that’s strange because it works with Sage on a project I started a few weeks ago.

7

I’m not sure how http://example.dev/assets/images/image.jpg would work if that image is in your theme.

8

Regarding the watch error… not sure but I started over with a fresh setup of Sage and it’s working now.

10

Is it just me, or when you build production, the images get random numbers appended to them, making the url dynamic at the point of building so swapping to /dist/ doesn’t really fix the issue?

11

This thread is two years old and as a result is referencing a previous version of Sage. The most recent version of Sage, version 9, appends a hash to assets as you’ve mentioned. Previous versions did not.

The relevant part of the docs for Sage 9 can be found here: https://github.com/roots/docs/blob/sage-9/sage/theme-development-and-building.md#images-in-template-files.

In summary, you use:

<img src="@asset('images/example.jpg')">

This will ensure the referenced assets get the hash appended within your templates.

16 Likes
12

What if you want to use the image assets inside CSS? @nathobson

13
14

If I’m using an SVG for a background image, will it still register the hash in CSS?

15

What have you tried? Please don’t ask just to ask, please try :slight_smile:

1 Like
16

SVG images will get the hash on build if used as background images in CSS.

Also, it confused me for a little while how to get the hash for SVGs used inside PHP. The trick is to use the asset_path() function like so:

<img src="<?= asset_path("images/image.svg"); ?>">

1 Like
17

Thanks, works perfectly.

18

Should asset_path() be available in Sage 9? don’t see it anywhere …

19

Hey @trainoasis - check helpers.php. :wink:

1 Like
20

Indeed, ty, but somehow not callable in front-page.php? (function does not exist). I guess I’m doing something wrong? :slight_smile:

21

Quite possibly! Can’t say without your code, but my guess is that you aren’t referencing the right namespace.