How to link static image asset from SXA using scriban

Question

Sorry this is probably a dumb question but I can't seem to find anything related to it in google.

Basically, I have a static image asset in my SXA Extension theme. e.g

/sitecore/media library/Extension Themes/My Extension/static/images/hero-image

I want to call it directly in a Scriban template and thought that may be using a code like this will suffice

 <img src="/static/images/hero-image.jpg" alt="">

But this doesn't seem to work.

Any ideas will be hugely appreciated

Thanks

Have you tried using full media path? <img src="/-/media/extension-themes/my-extension/static/images/hero-image.jpg" — Marek Musielak, Commented Nov 25, 2021 at 7:08
This one works but I kinda hesitate with this approach because what if user needs to rename the Extension-Themes. :( What I've done instead is just added it to static folder in my VS Solution and just use /static — keysl, Commented Dec 2, 2021 at 6:58

Sumit Bhatia · Accepted Answer · 2022-05-27 11:33:36Z

You probably resolved this already - but just in case you still have it hard coded and want to fix it.

Use the sc_query function to retrieve your image using the Sitecore ID of the media item.

The sc_query function returns an array - but we don't care if we only have one item in the array.

Then use the sc_field function to render the image or use the img tag and set the src attribute.

{{ for i_mediaitem in (sc_query i_home 'query:./*[@@id={ID of media item]') }}
    <img src="{{i_mediaitem.media_url}}">
{{end}}

The syntax of the query will need some work, but once the value is retrieved you won't have the path hard coded anymore, just the media item's id.

1 Answer 1