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

Set Covers are cropped square.

Set Information can appear underneath, or on top of the Set Cover on hover.

๐ŸŽจ 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.

๐ŸŽจ 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.

๐ŸŽจ 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.

๐ŸŽจ 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.
๐ŸŽจ Customise it - Hide the Set Covers completely for a minimal text-only view, or experiment with different Set Cover positions for a unique look.

Slide

Set Covers are shown as full page banners, which slide over one another when scrolled for a striking sets view.
๐ŸŽจ Customise it - Go for bold typography to complement the cover imagery.


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.
๐ŸŽจ Customise it - Go large and chunky with fewer columns and roomy padding instead.

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.
๐ŸŽจ Customise it - change the number of columns and padding to create more negative space for a modern look.

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.
๐ŸŽจ Customise it - remove all padding and make the images full-width for a stunning gallery.

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.
๐ŸŽจ Customise it - This style looks great with large images and bold styling.

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.
๐ŸŽจ Customise it - experiment with the max width of the column to make large images the focus, or create more negative space.

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.
๐ŸŽจ Customise it - Constrain images by height or width and add padding to create a smaller thumbnail side-scrolling gallery, which can click through to a larger single view.


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.