Skip to content
  1. WebAcappella Tempo help
  2. Components
  3. Showing with images: cards, thumbnails, galleries, carousel

Showing with images: cards, thumbnails, galleries, carousel

The components in the Media category: Cards, Thumbnails, Filterable gallery, Photo gallery and Carousel, with image proportions, cropping, filters, enlargement on click, and scrolling.

Five components for showcasing your images, in the Media category of the palette. All of them take their images from the media library and crop to the centre according to their proportion: see Images and icons in the editor.

Cards

A grid of cards with an image, title, and text, plus an optional link on each card: services, projects, team. The image proportion is chosen for the whole block (standard 4:3, square, photo 3:2, landscape 16:9, or natural height). Three columns maximum; one or two cards take up the full width.

Thumbnails

A compact row of images, each with alternative text, a category shown as a caption, and an optional link. The image is required, in 4:3 format, across three columns (two on tablet).

Filterable gallery

A gallery with filter buttons: on one side the list of filters (a technical key and a label, “kitchen” / “Kitchens”), on the other the items (image, caption, the key of the filter the image belongs to, a link, and the Full width option for a banner spanning the whole row).

Photo gallery

A grid of photos that enlarge on click: visitors scroll through them full screen, with their title and description. Three layouts in the palette: Photo gallery (regular squares), Mosaic gallery (each photo keeps its own shape) and Edge-to-edge gallery (no spacing). Everything else is set in the block: number of columns, thumbnail format, spacing, hover effect, caption under each photo. A photo that carries a link leads to that link instead of enlarging.

The quickest way: drag your photos from your computer straight onto the gallery, and they are added at the end. Otherwise, Add photos opens the media library: tick the images (Shift+click for a range, Select all after a search) and they are added in the order chosen. A gallery holds 40 photos maximum (all of them appear on the page: beyond that, create several albums), and each addition 10 maximum. The selector always shows how much room is left. On upload, the GPS position recorded in your photos is removed to protect your privacy; the rest of their information (author, copyright, camera, settings) is kept.

To organise them, double-click the gallery: all the photos appear as thumbnails. Click one to write its title, description, alternative text or link, or to replace it. ⌘ or Ctrl+click and Shift+click select several, to be moved or removed in one go; drag a thumbnail to change the order. The settings (columns, format…) are under Gallery layout.

Carousel

Photos in a fixed format that scroll one by one: with a finger on a phone, with the arrows or the dots, or on their own. Each slide can carry a title, a text and a link (the whole slide becomes clickable). Placed from the palette (Photo carousel), it scrolls when the visitor decides; everything else is set in the block: format, framing, width, transition, automatic scrolling, navigation. For an atmospheric slideshow, choose Automatic scrolling and the Fade transition (or Fade and slow zoom); Full width (edge to edge) turns it into a banner.

Photos are added as in the gallery: drag them onto the carousel or click Add photos, then double-click the carousel to arrange them and write their texts (settings under Carousel layout). A carousel holds 8 photos maximum: beyond that, a gallery shows everything at once. When it scrolls on its own, it stops on hover, and a pause button lets the visitor stop it.