Antlers tags
Several fairu tags are available to use
There are different Antlers tags available to generate code and provide shortcuts.
Metadata
Note
The tags generally don't fetch metadata from the Fairu server and build the
file path locally. Use the fetchMeta
parameter to fetch the asset
information from Fairu.
You can fetch metadata by passing fetchMeta="true"
to the tags, which makes the metadata accessible:
- alt
- caption
- description
- copyrights
- focal_point (
x-y-zoom
e.g.40-30-1
) - focus_css (e.g.
40% 30%
) - name
- size
- is_image | is_video | is_pdf | is_audio | mime | extension
- width | height
- ...
Available parameters
Field | Description | Type |
---|---|---|
id | The file ID | string |
name | Custom filename | string |
alt | Custom alt | string |
width | Resize image width | number |
height | Resize image height | number |
quality | Image quality (default: 90) | number |
sources | Semicolon separated srcset entries | string |
ratio | Aspect ratio for sources | string |
format | Convert image format | string |
fit | cover / contain the image | "cover", "contain" |
focal_point | Focal point for cropping | string |
Note
All fields are supported by fairu
, :image
, and :images
components. The
:url
component only supports the id
and name
fields.
{{ fairu }}
Get the file and get access to image properties.
{{ fairu:url }}
Get the URL of a file.
{{ fairu:image }}
Generate a complete HTML image tag.
{{ fairu:images }}
Generate multiple HTML image tags (see [[#{{ fairu image }}
]])
Responsive Images
With most of our tags you have easy access to implementing responsive images using the native srcset
and sizes
properties to define when which source (version of the image) should be used. See the mdn documentation for a great introduction into implementing responsive images.
Implementation
The sources
attribute provides a way to easily pass an array of widths, breakpoints and optionally heights to generate a srcset
property that includes all listed sources.
This allows you to pass the sources property and use the calculated srcset
property along with a fitting sizes
to define which sources should be used when:
Formats
Each pair consists of:
- A width value (in pixels) that defines the image width at that breakpoint
- A height value (in pixels) that defines the image height at that breakpoint (optional)
- A breakpoint value (with 'w' suffix) that corresponds to the viewport width
Ratio
If all sources should have the same aspect ratio, you can use the ratio
attribute as a shortcut without height:
This calculates all heights accordingly.
The sizes attribute
The sizes attribute tells the browser how large the image will be displayed at different viewport widths. If not provided, it will be auto-generated based on the breakpoints in the sources parameter.
For a full-width responsive image, you can leave the sizes property empty or you can use:
For more complex layouts, add media queries and a default or fallback value as last value: