How to Create a Photo or Video Gallery Using Squarespace

When yous apply images or videos on your site, do you lot postal service them one at a fourth dimension, or do you want them organized into a gallery?

Galleries can be a swell option for a more than compact design, and a skilful way to group multiple images or videos that share a theme or category. You tin can create slideshow galleries, carousels, and other sorts of galleries for your media on a Squarespace site, you only need to know-how. Luckily, you have me to help.

vii.0 Gallery Pages

First upwardly, allow'south talk about gallery pages. Squarespace 7.0 is more than restrictive in blueprint than 7.one, so rather than being able to add a gallery to an existing content page, you lot need to create a specific gallery folio. If you want a gallery embedded in another piece of content, similar a web log post, yous need to:

  • Make a gallery page and fill it with your media.

  • Use a gallery block to pull content from the gallery page and embed it into your principal page.

Gallery pages are also somewhat limited. Their design and style come from the parent template, and you're not able to change very much about it without implementing custom code. You can, however, choose whether your gallery will exist a filigree, slideshow, stacked display, or carousel. Yous're allowed to accept up to 250 pieces of media – photos and videos – in a gallery and can mix photos and videos in the same gallery.

Adding a Gallery.jpg

On the plus side, adding a gallery folio is easy. But log into your dashboard, click on Pages from the Home carte du jour, and so click on Gallery. From there, customize the gallery page simply like you lot would any other Squarespace page.

7.0 and 7.1 Gallery Blocks

Gallery blocks are slightly different from gallery pages. Where a folio is a full, well, folio on your site, a block is an element that can be used in a page. A gallery block tin can be used on a page, in a weblog post, or on other parts of your website, and it can call its information from a gallery folio or tin can stand alone.

Where you tin use a gallery block depends on whether your site is on vii.0 or seven.1.

  • vii.0 sites tin can put gallery blocks in any content area of their site.

  • 7.one sites can put gallery blocks anywhere a gallery section isn't supported. This includes blog posts, individual elements, and product infoboxes. Gallery blocks cannot exist added to layout pages, drove landing pages, footers, or portfolio sub-pages.

Adding Gallery Block.jpg

To create a gallery block in both 7.ane and 7.0, click on whatsoever location where a gallery block can be added. Click to insert a gallery block. On the resulting cake, the Content tab allows you to add your images or videos, while the Design tab allows you to customize the style and design of the block.

Which Is Better: Gallery Blocks or Gallery Pages?

Looking at the in a higher place, yous might be wondering which of the ii you should employ. Which is better, blocks or pages, and why?

The truth is, they both have pros and cons. A lot depends on what your use example is. So, let's talk near the benefits of each. Start up, the benefits of the gallery block:

  • Gallery blocks are consistent between templates on 7.0 sites. While the broad, general styling can alter if you lot alter your template, the format and content of a gallery block volition remain if yous wanted to brand that change.

  • Gallery blocks are just that: blocks. In a page that tin have multiple cake types, gallery blocks piece of work seamlessly with other kinds of blocks, like text.

  • Gallery blocks can be added pretty much anywhere on your site, as long as your template supports adding a block to whichever identify you're trying to add it.

  • Gallery blocks can pull their content from a gallery folio. That way, yous can embed the same gallery block on several pages and, if y'all demand to change an image in information technology, can just alter it on the gallery page and have the changes automatically reflected in the gallery blocks.

And then what nigh gallery pages? They have a few benefits of their own.

  • They may have special features for specific templates on 7.0 sites. For example, Momentum allows total-bleed cropping instead of traditional cropping.

  • Gallery pages tin can be added to alphabetize pages, simply like any other kind of major page type. If you're a media producer who has lots of individual galleries to share, this can be a slap-up tool for a portfolio site.

  • Gallery pages can be added to summary blocks, the aforementioned style other page types can. This can allow for actress metadata and another user-friendly features.

That all applies generally to 7.0 sites. On 7.1 sites, you can't use gallery pages. You can, however, utilize gallery sections.

What Most Gallery Sections?

Gallery sections are sort of like gallery blocks, made for Squarespace 7.1 sites. 7.ane sites tin use both blocks and sections.

Gallery sections can be added to whatever folio as role of the page content. They can't be added to areas of your site that don't use sections, such equally weblog posts or event pages. On those pages, you demand to use the gallery block format.

To create a gallery section, your site has to exist a 7.1 site. Log in and go to your Abode menu, then click on the Pages card and click +. Click folio layouts, and choose Gallery, and choose one of the layouts for the gallery. You lot can change this later on if you want without having to remake the gallery.

This opens upwardly the new section editor. Add your title, printing enter, and click edit on the page. From there, yous can add images and alter the style of the section. Once you're done, save and publish your department.

One of the biggest drawbacks to gallery sections on 7.ane, as compared to gallery blocks on 7.0, is that they don't support video, only images. If y'all want videos in a gallery on a vii.1 site, you demand to use gallery blocks, which might mean using a different page type.

Which should you employ, between a block and a department, on 7.ane?

  • Sections can just exist used in layout pages, landing pages, and portfolio sub-pages. Conversely, blocks tin can be used in blog posts, event descriptions, and additional product infoboxes.

  • Gallery sections display just the gallery and cannot accept other content added to their section. Gallery blocks display a gallery only tin can be added aslope other blocks.

  • Gallery blocks tin can display as slideshows, grids, carousels, or as stacked images. Gallery sections tin can exist elementary, strip, or masonry grids, or simple, full, or reel slideshows. Reels are like to carousel blocks.

There are also some quirks almost clickthroughs, lightbox functionality, and whether or not you tin add animations to the gallery.

Keep in mind that yous can notwithstanding add private images normally, all of the to a higher place are simply restrictions on galleries.

Squarespace Image Guidelines

Galleries can have some quirks if you're trying to upload images in widely varying attribute ratios or dimensions. This is especially prominent on mobile websites, which can't arrange as easily as desktop sites. Squarespace recommends following their image formatting guidelines, which I've reproduced here.

  • Only use .jpg, .gif, or .png for images. Unfortunately, webp is non supported.

  • Endeavor to keep image file sizes small. Especially for galleries, where dozens or more images will load at once, you want to minimize file sizes to speed upwardly load times. The difficult limit is twenty MB for a single paradigm file, just Squarespace recommends aiming for under 500 KB.

  • Restrict what characters yous use in file names. Squarespace only supports messages, numbers, underscores, and hyphens. They do not support accented messages, question marks, percents, or ampersands, as they tin can all cause code errors.

  • Your cap is 60 megapixels. To calculate your megapixel resolution, calculate the number of pixels across and tall, multiply those numbers by each other, and divide the total by 1 million.

  • Use RGB colors. CMYK volition not display properly.

  • Generally, you lot want your images to be between 1,500 and two,500 pixels wide. Larger images will squish down vertically, while shorter images can exist stretched oddly. This varies depending on the size of the container gallery.

  • Create a descriptive filename. Squarespace uses the filename as alt text if no alt text is otherwise specified. Try to avoid writing a filename that is offensive or incorrect, for that reason. It's best to specify alt text, of course, but if you forget, this works as a backup.

  • Don't worry about DPI or PPI; these are measurements for print images, not for web images.

Virtually of this is either going to be washed already past your camera or past image processing, but it'southward worth knowing just in case something is interim weird and y'all're non certain what it is.

Calculation Videos to Galleries

As mentioned above, gallery blocks on both 7.0 and vii.1, as well equally gallery pages (merely not gallery sections) back up video. How, then, can you add together videos?

Unfortunately, videos cannot be uploaded directly. You need to become through a third-party video host to upload and host your videos and use the gallery system to embed those videos.

Adding Video to Gallery.jpg

Squarespace directly supports embedding videos from YouTube, Vimeo, Wistia, and Animoto. Other video services, like DailyMotion, can piece of work, though y'all need to apply their provided embed code.

To add video, click on the + in a gallery to add together a new piece of media, then choose video. You'll be asked for the URL of the video, or you can click on the custom code option to add embed lawmaking from an unsupported site. You lot can also choose your custom thumbnail to load instead of the full video, for site speed purposes.

If you want a video in a gallery that doesn't support information technology, your all-time option is to use some kind of software to convert the video into an animated gif file. This will usually result in a very large file, then you'll want to use other tools to optimize and skin downward the gif, depending on the purpose of the file. Note that animated gifs don't carry sound, and so this method doesn't work if you lot desire context from audio with your video embed.

Other Styling Options

If you're looking for something a little more unique to brand your prototype galleries stand up out from the rest of the people using your template on Squarespace, ane pick is to purchase a third-party custom template. I take several of these on my recommended plugins page.

Masonry Style Squarespace Gallery Plugin – This plugin works for both 7.0 and 7.1 sites, and gives yous a simple masonry-style design for your galleries. You can choose to have it apply to all galleries or just specific galleries on your site.

Gallery: Randomize Prototype Order – This is a simple gallery plugin for both Squarespace vii.0 and 7.one, though it doesn't work on gallery sections. What information technology does is, well, what the proper name implies; it randomizes the display lodge of images in the galleries you use, whenever a company loads a page. It tin can apply to only specific blocks or all blocks and has a fleck more configuration available.

Gallery Block Dot Navigation – Yous know how many sites take small dots beneath a gallery, particularly the ones with an automatic slideshow, to show you which epitome in the serial yous're looking at and how many more than at that place are in the gallery? That'south what this plugin does; it gives yous those dots. Information technology'due south elementary and constructive as an add-on to gallery blocks.

Gallery Image Counter – This ane is quite similar to the higher up, in that it adds a simple "one/x" numerical counter to show the user which number paradigm they're on in a gallery, and how big the gallery is. Information technology's more meaty than dots and is meliorate for larger galleries.

My plugins aren't the only ones available, merely they're the ones I recommend. If yous have other ideas, or requests, experience free to allow me know!