Adding a gallery of images – Squarespace 5

In Squarespace 5, you can use a Picture Gallery page to showcase one or more image galleries.

Tip: After creating a Picture Gallery, you can display its images in a slideshow.

Watch a video

Before you begin

While you're logged in, enter Preview mode to see the changes you've made to your site. In Content and Structure mode, Picture Gallery pages may display differently.

Step 1 - Add a Picture Gallery page

To start building the page, enter Structure Mode, add a page to your site, and choose Picture Gallery. Then click Select & Configure.

Step 2 - Choose the number of galleries

In the configuration window, add a title, then scroll down to the Presentation Options section.

Use the General Display Format to choose how your Picture Gallery page displays:

Display Multiple Image Galleries - Your Picture Gallery page becomes a landing page for multiple galleries. Each gallery creates a thumbnail image on the landing page.
Display A Single Gallery Of Images - Your Picture Gallery displays all the images from a single gallery.
Display A Single Gallery Of Images (Auto-Display First Full Image) - Your Picture Gallery displays images from a single gallery, one image at a time. A navigation at the top allows visitors to choose the image.

Tips:

See examples of each of these options below.
If your Picture Gallery page has multiple galleries and you switch to a single-gallery format, the top gallery is the one that displays. You can rearrange the gallery order by dragging them in Content mode, just as you would individual images.
View your site in Preview mode to see it as your visitors will.

Step 3 - Choose the other settings

Use the other options in the configuration window to set up your Picture Gallery page. If you have multiple Picture Gallery pages, these settings apply to all of them.

Presentation Options include:

General Display Format - Display one or multiple galleries. Learn more.
Thumbnail Page Titles - Display gallery titles.
Thumbnail Page Description - Display gallery descriptions.
Loading Animation - Choose whether your images display a fade-in effect on load.
Hover Animation - Choose whether your images display a fade-in or zoom effect on hover.
Full Image Display Format - If you chose a gallery format that displays a single gallery with one image on the page at a time, choose how the navigation is styled.
Lightbox Display Method - Choose whether lightboxes display titles and descriptions.
Navigation Location - Set where navigation displays.
Image Titles - Set the display for image titles, or hide them.
Image Description - Set the display for image descriptions, or hide them.

Thumbnail Options include:

Use Square Thumbnails
Thumbnail Size
Thumbnail Column Width (px)
Thumbnails Per Row

Data Options include:

Sow Multi-User Data - Choose whether the name of the person who created the image displays.
Show EXIF Data - Display extended camera information.
Prevent Image Hotlinking - Prevent other sites from linking to your files.

Next, click Create Page. Hover over the page navigation link and click Enable to make it live.

Step 4 - Create a new gallery

To add a gallery to the Picture Gallery page:

Go to your Picture Gallery page.
Enter Content Mode.
Click Create A New Picture Gallery.
Give your gallery a Title. You can also choose a display style, add a description, and set a maximum width.
Click Save & Close.

Note: Once the maximum width is set, it can't be changed.

Step 5 - Add images

In the blank gallery that appears:

Click Upload New Pictures.
Click Browse.
Choose an image. Each image must be 5 MB or less.
To add more images, click Add Another Image.
When you're finished, click Upload.

Tips:

Add images in .jpg or .png format only. .gif images won't display.
Compressed .zip folders can contain up to 100 files. Each file must be 5 MB or smaller.
The page will show a Thumbnail Processing placeholder until the image is fully processed.

Step 6 - Set the front picture

If you chose to display multiple galleries in Step 2, set the image that will display on the Picture Gallery landing page by clicking Set As Front Picture next to that image.

Change image titles and descriptions

While in Content mode, click Modify next to any image to update the title, file name, and image description.

Click Change Gallery Properties to choose whether picture descriptions display with the thumbnails.

Move images

To move an image within a gallery:

Go to the gallery that contains the image.
While in Content mode, hover over the area next to the image. Your cursor will turn into a multi-directional arrow.
Drag the image up or down.

To move an image from one gallery to another:

Go to the gallery that contains the image.
While in Content mode, click Organize next to the image.
Use the directory to choose a new gallery. Each gallery has its own folder.
Click Save & Close.

Gallery layout examples

Multiple galleries

If you chose General Display Format: Display Multiple Image Galleries in Step 2, the Picture Gallery landing page becomes a landing page for multiple galleries. Clicking any thumbnail or title takes you to that gallery.

Note: When set to show multiple galleries, the landing page always displays as a list.

One gallery, all images

If you chose General Display Format: Display A Single Gallery Of Images, the Picture Gallery displays all the images from a single gallery.

When picture descriptions are showing, the gallery always displays as a list. To display the images as a grid, hide the descriptions:

Enter Content mode.
Click Change Gallery Properties.
Choose Display Style: Display Thumbnails Only.
Click Save & Close.
Enter Structure mode.
Hover over the page link and click Configure.
Use the Thumbnails Options section in page configuration to set the number of thumbnails per row.

One gallery, one image at a time

If you chose General Display Format: Display A Single Gallery Of Images (Auto-Display First Full Image), the Picture Gallery displays images from a single gallery, one image at a time.

A navigation allows visitors to choose the image. Use the Full Image Display Format drop-down in Page Configuration to choose whether it's a numbered list or thumbnails.

Lightbox mode

If you chose Full Image Display Format: Show Large Images Using A Lightbox Animation in Step 3, images in a gallery will display in a black lightbox popup when clicked.

The lightbox goes through images in a single gallery. It doesn't move from one gallery to another.
If you chose General Display Format: Display A Single Gallery Of Images (Auto-Display First Full Image), the lightbox doesn't include navigation arrows. Instead, use the navigation on the page to view each image.
Enter Preview mode to see the lightbox while logged in.

Find the MediaRSS link

To find a Picture Gallery page's MediaRSS link so visitors can subscribe to your page via a feed reader or news aggregator, view the source code and look for a line of code near the top that looks like this:

The link for the MediaRSS is the URL in the final quotes.

Troubleshooting

If you changed the width of your site and your gallery images aren't displaying correctly, you may need to manually reprocess them:

From the Website Management Bar, go to Website Settings under Structure.
Click Advanced, and scroll down to the Site Wide Manipulations section.
Use the Reprocess Gallery drop-down to choose a gallery, or select All.
Click Reprocess Selected Gallery.
Clear your browser's cache.

Squarespace 7 comparison

Our current platform has many sophisticated ways to present images, including multiple gallery types. To learn more about the different options, visit Image galleries on Squarespace on our Squarespace 7 Help site.

To learn about moving to Squarespace 7, visit Squarespace 5 vs. newer versions.