What's on this page

• asset
  • Asset attributes
• integrity

Assets

asset

An asset is a resource useable in templates, like CSS, JavaScript, image, audio, video, etc.

The asset() function creates an asset object from a file path, an array of files path (bundle) or an URL (remote file), and are processed (minified, fingerprinted, etc.) according to the configuration.

Resource files must be stored in the assets/ (or static/) directory.

{{ asset(path, {options}) }}

Option	Description	Type	Default
filename	Save bundle to a custom file name.	string	styles.css or scripts.js
ignore_missing	Do not stop build if file is not found.	boolean	false
fingerprint	Add content hash to the file name.	boolean	true
minify	Compress CSS or JavaScript.	boolean	true
optimize	Compress image.	boolean	false
fallback	Load a local asset if remote file is not found.	string	``
useragent	User agent key (See Assets configuration).	string	default

Examples:

{# CSS #}
{{ asset('styles.css') }}
{# CSS bundle #}
{{ asset(['poole.css', 'hyde.css'], {filename: styles.css}) }}
{# JavaScript #}
{{ asset('scripts.js') }}
{# image #}
{{ asset('image.jpeg') }}
{# audio #}
{{ asset('audio.mp3') }}
{# video #}
{{ asset('video.mp4') }}
{# remote file #}
{{ asset('https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.3.1/anchor.min.js', {minify: false}) }}
{# with filter #}
{{ asset('styles.css')|minify }}
{{ asset('styles.scss')|to_css|minify }}

Asset attributes

Assets created with the asset() function expose some useful attributes.

Common:

• file: filesystem path
• missing: true if file is not found but missing is allowed
• path: public path
• ext: file extension
• type: media type (e.g.: image)
• subtype: media sub type (e.g.: image/jpeg)
• size: size in octets
• content: file content
• hash: file content hash (md5)
• dataurl: data URL encoded in Base64
• integrity: integrity hash

Remote:

• url: URL of the remote file

Bundle:

• files: array of filesystem path in case of a bundle

Image:

• width: image width in pixels
• height: image height in pixels
• exif: image EXIF data as array

Audio:

• duration: duration in seconds.microseconds
• bitrate: bitrate in bps
• channel: 'stereo', 'dual_mono', 'joint_stereo' or 'mono'

Video:

• duration: duration in seconds
• width: width in pixels
• height: height in pixels

Examples:

{# image width in pixels #}
{{ asset('image.png').width }}px
{# photo's date in seconds #}
{{ asset('photo.jpeg').exif.EXIF.DateTimeOriginal|date('U') }}
{# audio duration in seconds #}
{{ asset('song.mp3').duration|round }} s
{# video duration in seconds #}
{{ asset('movie.mp4').duration|round }} s
{# file integrity hash #}
{% set integrity = asset('styles.scss').integrity %}

integrity

Creates the hash (sha384) of a file (from an asset or a path).

{{ integrity(asset) }}

Used for SRI (Subresource Integrity).

Example:

{{ integrity('styles.css') }}
{# sha384-oGDH3qCjzMm/vI+jF4U5kdQW0eAydL8ZqXjHaLLGduOsvhPRED9v3el/sbiLa/9g #}

In this section