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
The foreach loop iterates collections and lists of files. Depending on the type of list, Automad provides different runtime variables within the code block of the loop to refer to the current item. The :i variable always contains the index of the current iteration.
with
The with statement processes a block of code within the context of a given page or file. When using the URL of a page or one of the keywords prev and next as argument, the context changes to that page. When using a file path, the related runtime variables can be used and images can be resized or cropped directly. In case there is no matching page or file, an optional else block is processed instead.
Working With Images
Images are an essential part of almost every website, from blogs to portfolios. Automad's template language provides handy methods for basic image processing like resizing and cropping. When using a single image or iterating a set of images, resizing options can simply be passed to a with statement or a foreach loop. Resized images are generated on the fly and cached, so that every size is only processed once.