Website management
#Engagement

Block: Gallery

Visuals are extremely impacting. Sets of images can convey a powerful message, if combined and displayed properly.

📚 Create Content > Blocks > Gallery

Definition & Purpose

Definition

Use the Gallery block to display images in a carousel, grid, or 3 columns.

Purpose

Allows users to engage with multiple images in a structured and organized manner.

Slider style

A carousel of images relevant for the topic with arrow selectors on the sides to switch from one image to another.

Slider front end

Below you can find an example of gallery using the sliders style. 

Gallery block

Slider

KEY INFOS
  • To get the best result, we strongly recommend you use images with the same HEIGHT.
  • NOTE: When more than one carousel is used on the same page, the carousels should not have the same title, the same image count and the same image dimensions — at least one of these parameters must be unique.

3 Columns

Use this style to combine photographic elements in three columns. Great for accentuating text and telling a visual story.

Pages: ISSUE pages, Evergreen page

Below you can find an example of gallery using the sliders style. 

Gallery block

3 Columns

Grid style

Use this style to show thumbnail of lots of images, properly aligned. Good to use for storytelling, when showing lots of activity on a particular theme.

Grids are used to give an overview at a glance, called helicoptering. For example, they can be used by a campaign to show e.g. “the story so far”, “what we achieved”, or “where we are going”.

Gallery block

Grid

Edit mode

The Gallery block is a WYSIWYG block, so the Title and the description can be edited in place. Then, the images have to be selected. 

After all the images for the slider have been selected, you can next choose the image focal point on the right side of the block. There is a circle displayed on the image, so you can simply move it around to choose where to set the focal point.

You can easily edit and delete or add more images by going at the top of the block re-selecting photos.

Block styles – Campaigns

KEY INFO – Each Campaign has its own Gallery Slider style. The other styles (Grid / 3 Column) are the default ones.

Please check out the Design Systems to see the Gallery slider style of each campaign

Design Elements

All design files of the block are available in the P4 Design Systems > Blocks > Galley

Links & Resources