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.