Sliders and galleries
Content slider
In the content slider element, every element inside is a slide: images, cards, testimonials, texts or whole element groups. Creuva adds the following to the slider settings:
- Elements per view (1–4): at most two on tablets, one on phones
- Navigation arrows and Dots: can be turned off individually, shown in a bar below the slides; they are hidden when all elements fit into the view
- Thumbnails: preview images below the slider, taken from the first image of each slide, e.g. for an image gallery
Autoplay (delay), speed, start slide and loop are the Contao fields. Cards and boxes in a row have the same height.
Gallery
You set the columns with Images per row (1–6), and Full-size view opens the lightbox. You can choose more layouts in the CSS Style Selector under „Galerie-Anordnung“ (gallery layout):
| Class | Layout |
|---|---|
u-gallery-mosaic | large image on the left, next to it one wide and two small ones, four images each |
u-gallery-mosaic-right | like the mosaic, large image on the right |
u-gallery-featured | first image across the full width |
u-gallery-masonry | images in their own height – choose an image size without cropping |
Image size
A gallery has only one image size for all images. So that every tile still loads a suitable image, the demos and
the Styleguide include the image size „Galerie (responsiv)“ (gallery, responsive; proportional, widths from
320 to 1600 px). The gallery template sets the right sizes value for every image, depending on the layout, the
position and “Images per row”. The important part set in the file manager stays visible in the tile.
For your own galleries, choose this image size or create one following the same principle – the widths are enough.
The format of an image is defined by the image size, not by the CSS. Gallery grids and gallery sliders need a size with fixed cropping for images of equal height (e.g. „Karte (4:3)“, card 4:3). Mosaic and „Erstes Bild groß“ (first image large) fill their tiles with any size, masonry needs a size without cropping.
Lightbox
With Full-size view/new window, images in the gallery and the image element open the Creuva lightbox: dark background, caption or title from the metadata, counter, previous/next, keyboard (Esc, arrow keys) and swiping on phones. The images of a gallery form a group. You don’t need any jQuery or MooTools templates in the page layout for this.
Preferred loading
The first large image on a page (at least 400 px wide, in the first article, e.g. the hero image) is automatically prioritized and loaded without lazy loading. This improves the Largest Contentful Paint in PageSpeed. If a page starts with text, all images stay unchanged.