Images

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

Responsive Images

Automad lets you control how images are displayed across different device sizes by defining aspect ratio breakpoints and also lets you define what part of an image is relevant and should be focused when being cropped.

Video Aspect and Focus

Aspect Ratios

As demonstrated in the video above, you can define distinct aspect ratios for a max-width breakpoint in the format max-width:width/height. For example, 700:4/3 would show the image in 4/3 format when the containing element has a width less than 700px. Multiple breakpoints can be separated by whitespace.

Focal Point

When cropping images using aspect ratio breakpoints, the interesting part of an image might get cut off. Automad lets you set a focal point for an image. The area around that point will then always be visible by positioning the image accordingly.

The first image shows the focal point location marked by ● in the original image. The second image demonstrates how the image is cropped and positioned based on that focal point.

Galleries

Galleries let you showcase multiple images at once. Clicking an image opens it in a lightbox for easy viewing. Automad supports three layout options, all of which handle images of different dimensions gracefully. Spacing between images can be configured to achieve the desired layout. To add a gallery, click the little + icon in the block editor and search for Gallery block.

Masonry Columns

Images are arranged in a masonry-style column layout, automatically adjusting the number of columns based on available space. Ideal for collections with varying image sizes.

Horizontal Rows

Images are displayed in continuous horizontal rows, automatically adapting to images of different heights and widths. Works well for flowing presentations of diverse images.

Grid Layout

A clean, uniform grid where each image is centered within its cell. Works well for structured, evenly spaced presentations, even when images have different dimensions.

Slideshows

Slideshows display images in a rotating sequence, perfect for highlights or featured visuals. Spacing between items can be configured, and features such as the transition effect, autoplay, slide speed, and looping can also be customized. To add a slideshow, click the little + icon in the block editor and search for Slideshow block.

Responsive Slides

Slideshows are fully responsive, adjusting the number of visible items per slide depending on the container size. Images of varying dimensions are handled smoothly. Spacing between items can be configured to fit the layout.

Captions

Captions for an image can be defined in the Files tab of a page or in the Global Data and Files section. To edit a caption, open the file card menu using the dropdown in the lower-left corner and select Edit file info.

Captions support Markdown formatting and are displayed automatically in gallery lightboxes and slideshows.●

Components Pagelists & Tags
Publishing
In Automad, changes made to content fields — such as blocks or settings — are saved automatically. These changes are stored as drafts. Signed-in users can see and edit drafts at any time, while public visitors only see content that has been published. This makes it easy to work on content over a longer period without exposing unfinished pages to your visitors.
Global Defaults
One of Automad’s core ideas is the concept of global defaults. Many fields can be set either globally or individually for each page. When a page is displayed, Automad first checks the page itself for a value. If nothing is set there, it falls back to the global data.
Blocks
Blocks are small, self-contained pieces of content such as text paragraphs, headings, galleries, slideshows, and more. You can also add dynamic content like Pagelists, Filelists, or custom snippets. The block editor offers an intuitive editing experience and lets users freely compose a page from multiple blocks.
Layouts
Layouts in Automad are created using the Layout Section block. They can be added anywhere on a page and can contain other Layout Sections, allowing you to create complex, nested designs. Sections can also be set to stretch to the full width of the content area or page. Watch the short videos on this page to see these features in action.
Components
Components in Automad are reusable, static compilations of blocks that let you create consistent sections across your site without having to rebuild them each time. They are ideal for content such as call-to-action elements, card grids, address blocks, or any combination of snippets that should appear in multiple places.
Pagelists & Tags
A pagelist is essentially a curated selection of pages that are rendered using a shared template. Each page in the selection is iterated and displayed in a consistent way, which makes pagelists suitable for many common use cases. They can power a simple navigation, but they work just as well for more visual layouts, such as a portfolio grid or blog where each entry shows a preview, title, or other page-specific information.
AI Assisted Writing
Automad provides optional integrations with OpenAI and Claude APIs to assist with writing, transforming, and translating text-based content. Once you have configured an AI provider, you can access assistance through the prompt box in the bottom right corner.
Multilingual Sites
in case your target group of visitors is spread all over the world and you need to provide your content in different languages, Automad's build in language router lets you easily server different content base on a visitor's locale. Follow the steps outlined on this page to convert your site into multilingual web presence.