Usage: {{img_url value}}
Description
The img url helper outputs the correctly calculated URL for the provided image property.
You must tell the {{img_url}}
helper which image you would like to output. For example, to output a URL for a post’s feature image inside of post.hbs, use {{img_url feature_image}}
.
Force the image helper to output an absolute URL by using the absolute option: {{img_url profile_image absolute="true"}}
. This is almost never needed.
To output the image in question at a resized resolution based on your theme config, pass in dynamic image sizes via the size
option.
Convert an image to a different image format (webp
, avif
, png
, jpg
, jpeg
, or gif
) by using the format
option. (This only works in combination with the size
option.)
Example code
Below is a set of examples of how to output various images that belong to posts, authors, or keywords:
{{#post}}
{{!-- Outputs post's feature image if there is one --}}
{{#if feature_image}}
<img src="{{img_url feature_image}}">
{{/if}}
{{!-- Output feature image at small size from theme package.json --}}
<img src="{{img_url feature_image size="small"}}">
{{!-- Output feature image at small size, formatted as a WebP image (size is required) --}}
<img src="{{img_url feature_image size="small" format="webp"}}">
{{!-- Output post author's profile image as an absolute URL --}}
<img src="{{img_url author.profile_image absolute="true"}}">
{{!-- Open author context instead of providing full path --}}
{{#author}}
<img src="{{img_url profile_image}}">
{{/author}}
{{/post}}