To add a photo gallery to your Editor 2.0 website, open the page in Content > Site Editor, click Add (+) in the left sidebar, search for "gallery" and drag the Photo Gallery onto the page. Click the gallery and use Manage Photos to add or remove pictures and Edit Design to change its layout, then click Republish.

Applies to: Org admins whose role includes Site Editor access, such as Administrator or Content Editor · All plans, for organizations with Editor 2.0 (the CMS module) · Editor 2.0 (CMS)

Where: Content > Site Editor > Add (+) > Photo Gallery

What a Photo Gallery does

A Photo Gallery shows a set of pictures in a grid or another layout, with optional captions, links, buttons and hover effects. It can also show the posts of an Instagram account. Use one for season photos, to replace a photo gallery or image rotator from your legacy website, or for a block of sponsor logos.

Add a photo gallery

1. Go to Content > Site Editor and open the page.
2. In the left sidebar, click Add (+). The Elements panel opens.
3. Search for "gallery", or scroll to Photo Gallery.
4. Drag the Photo Gallery onto a column, or click it to insert it into the column you selected.
5. Add your pictures (see the next section), then click Republish, the orange button in the top-right corner.

Or start from a ready-made gallery section

1. Hover over the page where the gallery should go and click Add Section.
2. Choose Designed, then the Gallery sections, and scroll to a layout you like.
3. Choose it, then click Save Section at the top right.
4. Put your own pictures in it (see the next section), then click Republish.

Add, remove or replace pictures (Manage Photos)

1. Click the gallery on the page, then click Manage Photos in the toolbar above it. The Photo Gallery Content panel opens.
2. Click + Add image and upload pictures from your computer or device.
3. To remove a picture, click the X on its thumbnail. Delete All Images removes every picture at once, so use it with care.
4. To show an Instagram account's posts instead, click Connect Instagram and connect the account. The gallery fills with its posts.
5. Click Republish.

The picture above shows the Photo Gallery Content panel, where you add and remove pictures and connect Instagram.

Manage Photos or Manage Media? A Photo Gallery's button reads Manage Photos. A Media Slider's button reads Manage Media, so if that's what you see, you've selected a slider (see Photo Gallery or Media Slider, below).

Set a picture's caption, link, button and alt text

1. In the Photo Gallery Content panel, click a picture's thumbnail. Its Image Settings open on the right.
2. Fill in what you need (see the list below).
3. To make pictures open a page or another website, turn on Enable links on gallery images at the bottom of the panel, then add each picture's link in its settings.
4. Click Republish.

• Caption: text shown over or under the picture, depending on the layout.
• Position: the picture's focal point, the part kept in view when the gallery crops it.
• Button: a call-to-action button on the picture.
• Image alt text: a short description of the picture for screen readers and search engines.

Change the gallery's layout and look (Edit Design)

Click the gallery, then click Edit Design in the toolbar above it. Choose a layout for the gallery, then adjust these settings:

Two toggles there control where the gallery shows: Content display for desktop only hides it on tablets and phones, and Content display for tablet only hides it everywhere but tablets. Click Republish when you're done.

Photo Gallery or Media Slider?

• Photo Gallery: every picture at once, in rows and columns. Each picture can have its own link.
• Media Slider: the pictures take turns in one space, which saves room on a busy page. Its pictures are managed with Manage Media. Many websites use one to rotate sponsor logos: see CMS: Add sponsors and sponsor logos to your website.

What you'll see

New and changed pictures show in the editor right away. Visitors see them after you click Republish, and a linked picture opens its link when clicked.

If it doesn't work

• Pictures are cut off. The gallery crops each picture to fill its tile. In Edit Design, turn on Display full image, or set each picture's Position.
• You don't see Manage Photos. Click the pictures themselves, not the section around them. If the button reads Manage Media, it's a Media Slider.
• A picture doesn't open its link. Turn on Enable links on gallery images, add the picture's link and republish.
• Captions look different on phones. Captions that show only when you point at a picture on a desktop show all the time on the tablet and mobile layouts. Check each view at the top of the editor.
• Visitors don't see your change. Click Republish, then open your website in a private (incognito) browser window.
• You deleted pictures by mistake. Click Undo (the curved left arrow in the top bar) right away. If it's too late for that, restore a site backup: see CMS: Restore an earlier version of your website (Site Backup).
• The gallery shows View Only or can't be selected. It's in a locked part of your website. See CMS: Why can't I edit the header, footer or some page text? (View Only and locked areas).

Good to know

• Coming from the legacy content editor? Galleries and image rotators from your legacy website aren't moved automatically: they're rebuilt in the Site Editor, by the Content Team or by you. The legacy Content > Photo Galleries page isn't part of Editor 2.0. See How to move your website to Editor 2.0: steps, timeline and what transfers.
• Pictures of a similar shape line up best, especially logos.
• Who can edit galleries. Any admin who can open the Site Editor.

Related articles

• CMS: Add sponsors and sponsor logos to your website
• CMS: Replace an image or your page header (hero) image
• CMS: Columns and Layout
• CMS: Save, preview and publish your website changes
• CMS: Restore an earlier version of your website (Site Backup)
• CMS: Introduction to Editor 2.0