Layouts
Every Gallery and Gallery overview element has its own layout (tab Display > Layout). All layouts use responsive image sizes, lazy loading and the same lightbox. The column count and row height can be changed with CSS variables, see CSS variables. All four layouts can be tried in the live demo.
Mosaic in rows
Images stand in rows of equal height and fill the full width. Every image stays complete – portrait and landscape formats are not cropped. This is the default and fits almost any selection of images.
- Settings
- Row height
--(from 600 px, default 220px) andcrg- zeilenhoehe --(default 100px).crg- zeilenhoehe- mobil - Limitations
- The last row is not stretched and may end before the right edge.
Grid
All thumbnails have the same format and stand in a calm, even grid. The thumbnail is cropped for this; the lightbox shows the whole image. Good for series and pages with a uniform look.
- Settings
- Columns
--(desktop, default 4),crg- spalten --(default 3),crg- spalten- tablet --(default 2).crg- spalten- mobil - Limitations
- Thumbnails are cropped at the center.
Mosaic in columns
Images flow in columns, each in its own aspect ratio. Portrait images look especially good here.
- Settings
- Columns as for the grid.
- Limitations
- The order runs column by column from top to bottom. Lightbox, keyboard and screen readers follow the order of the HTML, which differs from the visual arrangement.
Large cover image and grid
The first image is shown large as cover image, the others follow in a grid. This gives a gallery a clear start, e.g. for an event or a project.
- Settings
- Columns as for the grid. The cover image is the first image in the order of the module – drag the desired image to position 1.
- Limitations
- The cover image and the grid tiles are cropped.
Gallery overview
The Gallery overview shows one tile per gallery with its first image, title and number of photos. The overview does not load the lightbox. A click opens the gallery on the same page in the layout chosen in the element.