Set Covers are cropped square.
Set Information can appear underneath, or on top of the Set Cover on hover.
Set Information can appear underneath, or on top of the Set Cover on hover.
Essential Portfolio - Gallery page styles
The Essential Portfolio Gallery page is designed to be flexible and easy to customise so that you can tailor it to your own work. We've created a number of preset layout styles to make it easy to change the appearance of the gallery with one click. Within these layouts, you can make endless customisations which are visually controlled by sliders in the Design editor.
The Gallery page has three views - Sets View, Index View and Single View. This hierarchy allows you to present your work in sets by project, style, or any other grouping you choose. Each view's layout is independent of the others, so you can mix and match the appearance of the gallery at each stage.
📎 Read more about Gallery views.
This article aims to show you an overview of the different layout styles for each of the views. Layouts are defined by the different characteristics that each applies to the gallery, such as the aspect ratio of the images or the direction of masonry flow.
🎨 Customise it - You can always change the number of columns, padding, hover styles, colours and typography for all the layouts. Below, we've highlighted some further tips to get the most from each style. Don't worry, it's super easy with no coding needed.
Sets View
Use sets to divide your work into projects or categories to make it easy for visitors to navigate. You can create as many nested sets as you like, for example:
📁Work → 📁Commissioned → 📁Brands → 📁Bentley.
There are 6 Sets View styles:
- Square Grid
- Regular Grid
- Masonry
- Uniform Grid
- List
- Slide
Square Grid
🎨 Customise it - large square Set Covers in two columns create a bold look.
Regular Grid
Set Covers appear uncropped, exactly as the original image.
Set Information can appear underneath, or on top of the Set Cover on hover.
Set Information can appear underneath, or on top of the Set Cover on hover.
🎨 Customise it - smaller Set Covers with roomy padding create a modern and minimal look.
Masonry
Set Covers are tiled in downward flowing columns.
Set Information can appear underneath, or on top of the Set Cover on hover.
Set Information can appear underneath, or on top of the Set Cover on hover.
🎨 Customise it - large Set Covers with no padding can create impactful Masonry galleries.
Uniform Grid
All the Set Cover crops are the same shape, but you can adjust the aspect ratio of that rectangle. This allows you to make tall card-style Set Covers, or narrow banners.
Set Information can appear underneath, or on top of the Set Cover on hover.
Set Information can appear underneath, or on top of the Set Cover on hover.
🎨 Customise it - Drop the number of columns to 1 to make wide full-width banners, or increase the media height to make cards.
List
By default List shows your sets in a text list, with a full page Set Cover appearing on hover.
You can also select each of the sets and choose the crop, shape and its location on the page individually.
Slide
Set Covers are shown as full page banners, which slide over one another when scrolled for a striking sets view.
Index View
The Index view shows you a wider overview of everything in any set. Whether you want to show a gallery of smaller thumbnail, or the full large image - there's a layout for that.
There are 6 Index View styles:
- Square Grid
- Regular Grid
- Masonry
- Horizontal Masonry
- Stream
- Horizontal Scrolling
Square Grid
Perfect for large and busy sets, you can give visitors a lot to choose from with small square thumbnails.
Image information can be on top of the image on hover, or hidden.
Image information can be on top of the image on hover, or hidden.
Regular Grid
As with the Regular Grid sets view, the images appear uncropped in their original aspect ratio.
Image information can be underneath, on top of the image on hover, or hidden.
Image information can be underneath, on top of the image on hover, or hidden.
Masonry
As with the sets view, the Masonry gallery flows in downward columns.
Image information can be underneath, on top of the image on hover, or hidden.
Image information can be underneath, on top of the image on hover, or hidden.
Horizontal Masonry
Similar in style to Masonry, Horizontal Masonry fills columns horizontally instead - so landscape oriented images take precedence.
Image information can be on top of the image on hover, or hidden.
Image information can be on top of the image on hover, or hidden.
Stream
In this view images are shown in full, in one downward scrolling column. This is a great choice for displaying stories in a chronological order.
Image information is shown underneath the image.
Image information is shown underneath the image.
Horizontal Scrolling
The Horizontal Scrolling style is available for sites built from the 6th of July '21 onwards only.
Images flow and scroll horizontally. Ideal for use with smaller/minimal header styles to take advantage of the full width of the monitor.
Image information is shown underneath the image or hidden.
Image information is shown underneath the image or hidden.
Single View
The Single view puts the individual image into the spotlight. You might choose this view to display images as large as possible with no distractions, or to provide more information about the work with titles, descriptions, keywords and other metadata.
There are 3 Single View styles:
- Fullscreen
- Stacked
- Panels
and 2 lightbox styles:
- Frame
- Minimal
Fullscreen shows the largest single image, with icons used to show information and thumbnails.
Stacked shows the image with information and thumbnails underneath.
Panels shows information in a panel to the side of the image, with a row of thumbnails at the bottom of the screen.
Single View Lightbox
With lightbox enabled, images pop up over the index view instead of loading as a separate page.
📎 Read more about the lightbox.
Frame lightbox allows you to show titles and descriptions, as well as image navigation.
Minimal lightbox hides everything apart from the image.
🎨 Customise it - choose a lightbox background in a contrasting colour to the main site (such as black for a predominantly light theme and vice versa) to give the single view a different context.