img

Images

Creates an image tag for the first image file matching the specified glob pattern. The image can also be cropped by defining a maximum width and height.

<@ img { options } @>

Options

file String|false
The path to the file to be placed. In case a glob pattern is provided, the first match is used. The default is false.
width Integer|false
The optional maximum width of the placed image. The default is false.
height Integer|false
The optional maximum height of the placed image. The default is false.
crop Boolean
Defines whether the placed image is cropped or scaled to fit the specified height and width. The default is false.
class String|false
An optional class for the <img> tag. The default is false.
filelist nav
Images
Images play an essential role on the web and in any digital presence. Automad provides responsive images, image galleries, and slideshows as blocks that can be added to any block editor field. These blocks make it easy to display individual images with custom focal points and responsive aspect ratios, as well as manage and present image collections in versatile ways — from structured galleries to responsive slideshows.
findFirstImage
Finds the first img tag in a rendered HTML string and returns the src attribute. This function can be used to extract the first image form a block variable to be used separately in any other place like a teaser section of a page card in a pagelist.
foreach
with
Working With Images