What's on this page

• image_srcset
• image_sizes
• image_from_website
• resize
• cover
• maskable
• webp
• avif
• lqip
• dominant_color

Images

image_srcset

Builds the HTML img srcset (responsive) attribute of an image Asset.

{{ image_srcset(asset) }}

Examples:

{% set asset = asset(image_path) %}
<img src="{{ url(asset) }}" width="{{ asset.width }}" height="{{ asset.height }}" alt="" class="asset" srcset="{{ image_srcset(asset) }}" sizes="{{ image_sizes('asset') }}">

image_sizes

Returns the HTML img sizes attribute based on a CSS class name.
It should be use in conjunction with the image_srcset function.

{{ image_sizes('class') }}

Examples:

{% set asset = asset(image_path) %}
<img src="{{ url(asset) }}" width="{{ asset.width }}" height="{{ asset.height }}" alt="" class="asset" srcset="{{ image_srcset(asset) }}" sizes="{{ image_sizes('asset') }}">

image_from_website

Builds the HTML img element from a website URL by extracting its illustration image. Returns null if no image is found.

{{ image_from_website('url', {attributes}, {options}) }}

The image is searched in the page HTML with the following fallbacks, the first candidate that can be downloaded as an image is used:

1. Open Graph: og:image:secure_url, og:image, og:image:url
2. Twitter: twitter:image, twitter:image:src
3. <link rel="image_src">
4. Microdata: itemprop="image"
5. JSON-LD: image property
6. First <img> of <article>, <main> or <body>
7. <link rel="apple-touch-icon">
8. <link rel="icon">

Relative URLs are resolved against <base href> or the page URL.

The resolved image URL and the downloaded image are cached (see cache.assets.remote.ttl).

Options:

• fallback: image path (or URL) used if no image is found
• other image options (e.g.: responsive, formats)

Examples:

{{ image_from_website('https://example.com/page-with-image.html') }}

{# with a fallback image #}
{{ image_from_website('https://example.com/', {alt: 'Illustration'}, {fallback: 'images/default.png'}) }}

resize

Resizes an image to a specified width (in pixels) or/and height (in pixels).

• If only the width is specified, the height is calculated to preserve the aspect ratio
• If only the height is specified, the width is calculated to preserve the aspect ratio
• If both width and height are specified, the image is resized to fit within the given dimensions, image is cropped and centered if necessary
• If remove_animation is true, any animation in the image (e.g., GIF) will be removed

{{ asset(image_path)|resize(width: width, height: height, remove_animation: bool) }}

Examples:

{{ asset(page.image)|resize(300) }}
{# equivalent to: #}
{{ asset(page.image)|resize(width: 300) }}
{# resizes to 300px width, height auto-calculated to preserve aspect ratio #}
{{ asset(page.image)|resize(height: 200) }}
{# resizes to 300px width and 200px height, and crops if necessary #}
{{ asset(page.image)|resize(300, 200) }}
{# removes any animation from the image #}
{{ asset(page.image)|resize(width: 1200, height: 630, remove_animation: true) }}

cover

Resizes an image to a specified width and height, cropping it if necessary.

{{ asset(image_path)|cover(width, height) }}

Example:

{{ asset(page.image)|cover(1200, 630) }}

maskable

Adds padding, in pourcentages, to an image to make it maskable.

{{ asset(image_path)|maskable(padding) }}

Example:

{{ asset('icon.png')|maskable }}

webp

Converts an image to WebP format.

Example:

<picture>
    <source type="image/webp" srcset="{{ asset(image_path)|webp }}">
    <img src="{{ url(asset(image_path)) }}" width="{{ asset(image_path).width }}" height="{{ asset(image_path).height }}" alt="">
</picture>

avif

Converts an image to AVIF format.

Example:

<picture>
    <source type="image/avif" srcset="{{ asset(image_path)|avif }}">
    <img src="{{ url(asset(image_path)) }}" width="{{ asset(image_path).width }}" height="{{ asset(image_path).height }}" alt="">
</picture>

lqip

Returns a Low Quality Image Placeholder (100x100 px, 50% blurred) as data URL.

{{ asset(image_path)|lqip }}

dominant_color

Returns the dominant hexadecimal color of an image.

{{ asset(image_path)|dominant_color }}