Images

AI Integration Advanced Basics Blocks Collections Conditionals Configuration Content Context Customizations Date Development Extensions Files Flow Control Functions Installation Loops Math Navigation PHP Regex SEO Snippets String System URL Variables
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.
img
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.
foreach
with
Working With Images