Skip to main content

Media Gallery section

A media grid or single-row carousel of media which can be set to fill the screen on click.


The Media Gallery section is a grid or row/carousel of images and/or videos that can optionally be set to expand on click.

Media Gallery section options enable choosing between the two major styles (grid/gallery or carousel), setting the overall size of the gallery, whether the gallery images display at their original aspect ratio or cropped into rows of equal height, whether items in the gallery expand to fill the screen when clicked, gallery background colours, and more.

Grid / gallery style

In the gallery style, the media gallery displays a 'grid' of images in multiple rows:

There are two sub-options for the "Media size" shown in the grid and they affect whether the images are shown cropped into rows of equal height or at their original aspect ratio (uncropped). The animation below shows the same gallery with both the original and cropped media size options:

Note how the original version shows more of the giraffe and dog (the full uploaded images) and that the two rows of images are of different heights. The cropped version of the gallery shows rows of images of equal heights, however some parts of the images have been cropped out in order to achieve this. A choice between the two options will likely depend on your preference of the balance between a neater-looking grid or preserving the entirety of each of the uploaded images. In either case, if the section is set to expand images when clicked, the full uncropped version of each image will be shown.

When first adding a Media Gallery section to your story, it will contain some default images. To change any image, click the 'EDIT MEDIA' button in its top-left corner and a media window will open, enabling you to choose from still images or video to upload from your computer, or pick from our media integrations with Unsplash and Pexels.

To add a new image to the grid, click one of the round + buttons at the edge of any image. A new default image will be added at that location and can then be replaced with an image or video of your choice. To delete an image, click the trash icon on the right of the menu.
​

Rearrange images in the grid by dragging them to the desired locations.

Additional options from the image context menu enable rounding the corners of the images and choosing from several animation styles that will be applied as the images scroll into view.

If you have chosen the Cropped option for the Media size in the grid, then the width of each container can be set to small, medium, or large: affecting its width, but not height (the image will be cropped to fill the available space). Changing the size of any container will also change the size of others in the same row:

If you chose the Original option for media size, then you won't see a control to set the container size for the images as their size will be determined automaticaly to fill the grid without cropping the images.

Section options also allow setting the images to expand to fill the screen when clicked: at which point the images will be shown in a slideshow-like view with captions and arrows to progress the slideshow. In this slideshow view, the full uncropped iamges will be shown regardless of whether the grid view is set to Original or Cropped.

Captions added to media will display at the bottom of that media when moused over, and by default below the media when in it is displaying as a slideshow:

With section options, the overall size of the grid within the page can also be altered. Here, the Narrow, Wide, and Full options change the amount of padding to the left and right of the grid and the general scale of all of the images/videos that it contains.


​

Be aware that although it's possible to have multiple videos playing within a gallery, it may degrade the story performance, especially if the videos are large in file size.

Carousel style

In the carousel style, only a single row of images is shown.
If there are more images in the section than will fit within the view, arrows at the right and left allow readers to click to progress through all the images in the section. On mobile devices, readers can also swipe through the images.


​

The carousel style of the Media Gallery section can be applied by choosing the option from the Section Options panel:

In this style of the Media Gallery, images are displayed uncropped at their natural aspect ratio.

Section options allow for changing the size/height of the section (consequently setting the height of the media), changing background colour, whether the images expand to fill the screen when clicked (at which point the section will change to a full-screen 'slideshow-like' mode), and whether the carousel starts with the first image in the sequence on the left or center of the screen.

Did this answer your question?