📚 Create Content > Blocks > Gallery

Purpose: Lay out short bits of text and accompanying photographic elements in various display modes: Slider, 3 columns or Grid.

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. 

  • 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. 

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”.

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