Roots Discourse

Sage: Displaying images in assets / images folder

#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.

11 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.

#22

Default new Sage install, not referencing anything, am on front-page.php, just calling {{ asset_path() }}. But same happens on other pages :slight_smile:

#23

Sounds like you’re actually in front-page.blade.php?

In your Blade templates, use the @asset directive instead of calling asset_path().

Check out the docs here: https://roots.io/sage/docs/theme-development-and-building/#images-in-template-files

BTW the docs have a new search field in the sidebar powered by Algolia, so finding references to things like this is much quicker now–definitely encourage everyone to take advantage of it!

2 Likes
#24

Nice!! Never used this before, awesome :slight_smile: Will check the new search as well, thank you.

1 Like
#25

Related to asset_path(), that’s why I did not open a new ticket: is there an option to check for file existence first? Similar to @includeif directive for example?

The use case is, we have certain video files that we put in a theme location and they are based on language, say video_en.mp4, video_es.mp4, video_fr.mp4 and so on …

What I’d like to do is check for file existence and use default EN language file if the file does not exists.
I tried with PHP’s file_exists() but it returns false when I pass in my asset_path().

Thanks for any tips

#26

Not as part of asset_path() no, I don’t believe so. You can check out the code behind it right here: https://github.com/roots/sage-lib/blob/master/Assets/JsonManifest.php

I’ve never needed to determine existence of an asset, but I have needed to get the absolute path (i.e. for embedding SVGs), and I used the following technique:

// in /theme/config/assets.php add the following to the array:

'path' => get_theme_file_path().'/dist',

// in `app/helpers.php` add the following:

/**
 * Get the absolute path to an asset.
 *
 * @param string $asset
 * @return string
 */
function locate_asset($asset)
{
    return trailingslashit(config('assets.path')) . sage('assets')->get($asset);
}

// Now you can do something like this:

/**
 * Determine if asset exists.
 *
 * @param string $asset
 * @return bool
 */
function asset_exists($asset)
{
    return file_exists(locate_asset($asset));
}
2 Likes
#27

thanks @alwaysblank :hugs: Unfortunately my file_exists still returns false every time even though the path is okay (using assets.uri instead of .path, probably Sage 9 difference…).

I needed to pass local path without the domain to file_exists …

So what works is:

Add to app/config/assets.php:

'relative_path' => get_theme_file_path().'/dist'

then use where you need to check for file existence (say, in one of the controllers):

$path = config('assets.relative_path') . '/videos/video_'.ICL_LANGUAGE_CODE.'.mp4';
if(file_exists($path)) {
    return asset_path('videos/video_'.ICL_LANGUAGE_CODE.'.mp4');
}  
// here return a default video for example that you know exists for sure