What's on this page

• url
• html
• readtime
• hash
• cache_key
• getenv
• dump
• d

Functions

Functions can be called to generate content. Functions are called by their name followed by parentheses (()) and may have arguments.

url

Creates a valid URL for a page, a menu entry, an asset, a page ID or a path.

{{ url(value, {options}) }}

Option	Description	Type	Default
canonical	Prefix URL with baseurl or use canonical.url if exists.	boolean	false
format	Defines page output format (e.g.: json).	string	html
language	Defines page language (e.g.: fr).	string	null

Examples:

{# page #}
{{ url(page) }}
{{ url(page, {canonical: true}) }}
{{ url(page, {format: json}) }}
{{ url(page, {language: fr}) }}
{# menu entry #}
{{ url(site.menus.main.about) }}
{# asset #}
{{ url(asset('styles.css')) }}
{# page ID #}
{{ url('page-id') }}
{# path #}
{{ url('about-me/') }}
{{ url('tags/' ~ tag) }}

html

Creates an HTML element from an asset (or an array of assets with custom attributes).

{{ html(asset, {attributes}, {options}) }}
{# dedicated functions for each common type of asset #}
{{ css(asset) }}
{{ js(asset) }}
{{ image(asset) }}
{{ audio(asset) }}
{{ video(asset) }}

Option	Description	Type
attributes	Adds name="value" couple to the HTML element.	array
options	{preload: boolean}: preloads. For images: {formats: array}: adds alternative formats. {responsive: bool|string}: adds responsive images (based on width or pixels density). {placeholder: string}: fills the image background before loading (color or lqip).	array

Examples:

{# CSS with an attribute #}
{{ html(asset('print.css'), {media: 'print'}) }}
{# CSS with an attribute and an option #}
{{ html(asset('styles.css'), {title: 'Main theme'}, {preload: true}) }}
{# Array of assets with media query #}
{{ html([
  {asset: asset('css/style.css')},
  {asset: asset('css/style-dark.css'), attributes: {media: '(prefers-color-scheme: dark)'}}
]) }}
{# JavaScript #}
{{ html(asset('script.js')) }}
{# image without specific attributes nor options #}
{{ html(asset('image.png')) }}
{# image with specific attributes, responsive images and alternative formats #}
{{ html(asset('image.jpg'), {alt: 'Description', loading: 'lazy'}, {responsive: true, formats: ['avif', 'webp']}) }}
{# image with responsive pixels density images #}
{{ html(asset('image.jpg'), options={responsive: 'density'}, attributes={width: 256}) }}
{# image with a Low-Quality Image Placeholder #}
{{ html(asset('image.jpg'), {alt: 'Description', loading: 'lazy'}, {placeholder: 'lqip'}) }}
{# Audio #}
{{ html(asset('audio.mp3')) }}
{# Video #}
{{ html(asset('video.mp4')) }}

readtime

Determines read time of a text, in minutes.

{{ readtime(value) }}

Example:

{{ readtime(page.content) }} min

hash

Calculates the hash of an object, an array or a string with a given algorithm.

{{ hash(value, algorithm) }}

algorithm can be any algorithm supported by PHP's hash() function (e.g.: md5, sha256, etc.). Default is xxh128.

Example:

{{ hash('my string', 'sha256') }}

cache_key

Calculates a cache key for fragments cache based on a name and an optional value.

{% cache cache_key(name, value) %}
  {# cacheable content #}
{% endcache %}

The function adds a hash of the value (could be a string, an array or an object) to the name (and the current language and build ID to be sure the generated cache key is unique) so if the value is changed the cache key is changed too and the cache is automatically cleared.

getenv

Gets the value of an environment variable from its key.

{{ getenv(var) }}

Example:

{{ getenv('VAR') }}

dump

The dump function dumps information about a template variable. This is mostly useful to debug a template that does not behave as expected by introspecting its variables:

{{ dump(user) }}

d

The d() function is the HTML version of dump() and use the Symfony VarDumper Component behind the scenes.

{{ d(variable, {theme: light}) }}

• If variable is not provided then the function returns the current Twig context
• Available themes are « light » (default) and « dark »