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 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.

Every page can have its own files, such as images, documents or downloads. Files that are used across the whole site, such as a logo or favicons, belong to Global Data and Files instead. Both places offer the same tools for uploading and managing files.

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.

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.

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.

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.