Adding a picture gallery

A Gallery is the best and easiest way to display images on your Squarespace site -- and each Gallery you create can contain one or more single image galleries or albums if you choose to configure it that way.

 

 

 

 

 

Step 1 - Add a Gallery Page

Enter Structure Editing mode and click the add page link.  Within the page types list choose Picture Gallery as the type and click to select and configure.

See this illustrated guide for assistance with adding Pages »

Step 2 - Configure Picture Gallery Page

Choose the configuration options for your gallery page and click create page.  Note, these settings will apply to all single galleries within your gallery page.

To begin adding images you will need to switch to Content Editing Mode in the upper right corner of your screen.

Step 3 - Create a New Picture Gallery

Navigate to your gallery page to start adding new images.

Enter Title, Description and Thumbnail Preferences

In the edit window, enter your gallery title, description, preferred configuration for thumbnail display, and maximum width for large gallery images.

You can configure your gallery to display thumbnails and descriptions (which will display the thumbnails in a list with text descriptions next to them) or you can configure your gallery to display thumbnails only (which will display your thumbnails in rows and columns).

Note: If you choose to display thumbnails only, you can choose how many thumbnails to display in a row in the configuration for this component.  Access the page configuration to assign thumbnail widths, spacing between thumbnails and their description text, and the number of thumbnails per row.
Note: Once the Maximum Width of your new picture gallery is set, it cannot be changed.

Step 4 - Upload Pictures

After creating and configuring your first gallery, you can now add images.  Click the gallery title to enter the gallery and on the next screen click Upload New Pictures. Upload images using the fields provided, or for faster uploading of multiple images, upload a zip archive of all the images you'd like to add.

Note: Note: Zip files uploaded within a gallery must contain fewer than 100 images.  See this troubleshooting guide. Individual gallery images must be no larger than 5 MB.
Note: All images should be optimized for the web, and should be saved as JPG, PNG, or GIF images.  View the guide for optimizing images here.  Animated GIF images will not generate a thumbnail view in the gallery page, and should not be used.

Step 5 - Select a Front Image

After adding your images, choose an image to display as the front image on your main gallery page.  Navigate to the image you want to use, and click the set as front picture button for that individual image.

Note: When you go to view your gallery page to see how it displays, you'll need to view those pages in Preview editing modes, you'll see your galleries display an image management screen to allow you to more easily manage those images.

Step 6 (optional) - Configure one or more Galleries

You can configure a gallery page to contain one gallery or multiple galleries.  A page containing one gallery will have the images directly within.  A page containing multiple galleries will show thumbnails for the contained galleries.  

This can be configured within the page configuration for the gallery, under Presentation Options > General Display Format.

Note: Ensure you have enabled your gallery page in order to view this live on your site.
Single Gallery

    

Multiple Galleries

 

When configured to display as Single Gallery, the picture gallery will automatically paginate after 20 rows of content, regardless of how many thumbnails you have set to appear in one row.  To have more images before the gallery paginates, increase the number of thumbnails per row.  To have fewer images, decrease the number of thumbnails per row.

When configured to display Multiple Galleries, the initial gallery overview page will not paginate. However, all subsequent galleries within the initial page will paginate after 20 rows of content, as indicated above.

Note: Lightbox arrow navigation applies per page for galleries configured to use lightbox for scrolling through images. The lightbox feature does not paginate between multiple pages.

Why are my gallery images displaying incorrectly?

If you've recently changed the width of your site, reprocessed the thumbnails or uploaded images, and your gallery images aren't displaying correctly, you may need to manually reprocess them.

To reprocess your images, navigate to [Website Management > Website Settings > Advanced] and scroll to the bottom of the page. 

Choose the gallery you want to reprocess from the drop down menu, and then click the button to Reprocess Selected Gallery.

 

NOTE: You should also clear your cache after requesting this change, see the instructions for this here. 

How do I find my MediaRSS link for my Gallery page?

You can find a Gallery page's MediaRSS link by viewing the source code of your Gallery page and looking for a line of code near the top of the source code that looks like this:

<link rel="alternate" type="application/rss+xml" title="RSS" href="http://mysite.squarespace.com/gallery/gallery-name/mediaRss.xml" />

The link for the MediaRSS is the URL within the quotes of the href. So for the above it would be:

http://mysite.squarespace.com/gallery/gallery-name/mediaRss.xml

You can then add a link to the MediaRSS within your site to allow site visitors to subscribe to your Gallery updates via a feed reader/news aggregator.

How do I remove the descriptions from my gallery page?

You can prevent your gallery from displaying descriptions for your thumbnail images by changing your gallery settings. Click to enter Content Editing Mode while viewing the individual image gallery and click the Change Gallery Properties link at the top of your page.

You can change your settings to display thumbnails only in the drop down menu.

If you've removed your descriptions and want to add them back to the gallery, use the steps above, and choose to display thumbnails with picture descriptions.


Be sure to click save & close to apply the changes to your gallery page.

Note: The file name and description will display to you as the site owner when logged in and viewing the gallery in Structure mode to view your gallery as it will appear to site visitors.

How can I display my thumbnails in a grid?

If you'd like to display your gallery thumbnails in a grid you can set this up with two simple steps.  Please note that this is for thumbnails within your gallery page.  If you use multiple image galleries, these will display in a list down the main gallery page.

Set Gallery Properties

Enter Content Editing on the top right, and select Change Gallery Properties to display thumbnails only.

Configure Gallery Page

Access the page configuration and change the Full Image Display format to Show large images using a Lightbox animation.

Notes

  • When using multiple galleries within a module the main gallery page cannot be configured to display in a grid.
  • You'll need to switch to Preview editing modes, you are presented with an image management interface to allow you to more easily manage those images.
  • If you're using text or thumbnail navigation for your Full Image Display Format, thumbnails will not display in a grid.
  • By default, the gallery page module is configured to display multiple galleries and then to display the thumbnails for each gallery within the grid view.

How do I display arrow navigation within a gallery?

So you'd like to be able to navigate your Gallery using arrows while viewing the images in Lightbox mode?  Here's how to set this up.

Access your gallery page configuration and locate the Full Image Display Format drop down menu.  In the drop down, select to show large images using a Lightbox animation

Then this is how it will be displayed within the Lightbox: 

In order for the arrow navigation to display properly, the Gallery's General Display Format must be setup to display either a Single Gallery of Images or Multiple Image Galleries and must not be configured to display text or thumbnail navigation within the Full Image Display Format drop down menu.

Note: Lightbox arrow navigation applies 'per page' for galleries configured to use lightbox for scrolling through images. The lightbox feature does not paginate between multiple pages.

How do I sort pictures in a picture gallery?

Enter Content Editing Mode while viewing the individual gallery of images. Hover over the image you want to move and your cursor will turn into a multi-directional arrow, so you can select the image and move this up or down in the list.

Was this article helpful?
0 out of 4 found this helpful