A media grid or single-row carousel of media which can be set to fill the screen on click.
The Media Gallery section places a grid or row / carousel (available on some plans only) of images and/or videos within your page.
Media Gallery section options enable choosing between the two major styles (grid 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 style
In the grid style, the media gallery displays 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 animals are hidden.
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.
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 Unsplash.
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 in its top right.
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
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 the choice to set 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 small, medium, and large 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.
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.
If there are more images in the section than will fit within the row, 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.
Section options allow for changing the height of the section (consequently making all images in it appear larger), 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.










