Showing with images: cards, thumbnails, galleries, carousel, before/after, video
The components in the Media category: Cards, Thumbnails, Photo gallery, Carousel, Before / after and Video, with image proportions, cropping, filters, click-to-enlarge, scrolling, slider comparison, and YouTube or Vimeo videos.
Six components to showcase your images and videos, in the Media category of the palette. The ones that show images take them from the media library and crop them to their proportion, at the center, or around their focal point for the Photo gallery: 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 grid of images, each with an alternative text, a category shown as a caption and an optional link: projects, work, products. The image is required, in 4:3 format, on three columns by default (two on a tablet). Images can also come from a site gallery, chosen under Images shown: see Galleries.
The Full width option on an image turns it into a banner across the whole row, at its natural height and without a caption.
The filter buttons above the thumbnails come from a site gallery: create a Tags field there, tick the ones for each work, then choose that field under Filter buttons. A work appears under each of its tags. See Galleries.
Photo gallery
A grid of photos that enlarge on click: visitors scroll through them full screen, with their title and description. Three presentations in the palette: Photo gallery (regular squares), Mosaic gallery (each photo keeps its 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. Photos can also come from a site gallery, chosen under Images shown: see Galleries.
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.
When the thumbnails are cropped (square, landscape, portrait), the detail view of a photo shows the whole image: click its focal point, the part that must always stay visible, a face for example, or drag the point. The thumbnail in the chosen format follows. The focal point belongs to the image, so it applies everywhere the image is cropped, section backgrounds included, and you get it back if you change format. Recenter removes it. It is stored with Save, and ⌘Z undoes it. In original format (mosaic), nothing is cropped, so there is no focal point to set.
Each photo has its own address. In the viewer, the Copy link button copies the address of the page that opens directly on that photo, enlarged, ready to share in a message or on a social network. It doesn't change if you rename or move the photo. In original format (mosaic), each photo goes into the shortest column, with no gaps, in gallery order.
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, cropping, width, transition, automatic scrolling, navigation. For a mood 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 just 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.
Before / after
Two photos of the same place, one before your work, the other after: visitors drag the slider to move from one to the other, with the mouse, a finger or the keyboard. Ideal for a renovation, a haircut, a garden or a photo retouch. Placed from the palette (Before / after), it is filled in from the block: Before photo, After photo, a description of each for visitors who can't see the image, and a caption if you want one. As long as one of the two photos is missing, it doesn't appear on your site.
The labels show “Before” and “After” in the language of the page; write your own to date the photos (“March”, “June”). The Format sets the proportion of the frame: Portrait (3:4) suits a hairstyle or a face. The Slider direction makes it slide from left to right or from top to bottom, the Slider starting position shows more of the before or more of the after right away, and the Labels go at the top, at the bottom, or disappear. Clicking a label shows its photo in full. If your theme has Motion, the comparison plays once when the visitor reaches the block: a streak of light reveals the after, then the slider returns to its place. In the editor, switch to Preview to see it.
Video
A YouTube or Vimeo video on your page. First upload the video to one of these services, copy its link (Share button) and paste it into Video link. The preview image is optional: without one, you get a dark background in the site's colors. The Vertical format suits Shorts.
Nothing loads for your visitors until they start the video. They first see the preview image and a sentence telling them that the video is hosted by YouTube or Vimeo, which set their own cookies: their click counts as consent. That’s what allows your site to stay free of a cookie banner.