Mobile browsing of websites has increased considerably in recent years. This video offers guidance on how to adapt gallery blocks for smaller screen sizes.
Galleries are an effective way to display multiple photos or videos at once in one layout. Squarespace provides several gallery styles – grids, carousels and stacked image formats are among them – for your consideration when creating galleries.
How to Change Gallery Layout
Add a gallery section to your website as an easy way to showcase a collection of images in a grid, carousel or slideshow format. Text can also be added for each image’s title or caption if necessary. Squarespace offers many ways to build galleries such as using gallery blocks or the Gallery Page template.
When adding a gallery block or page, its design and layout will depend on both its parent template and what kind of gallery you create. Options include creating a stacked gallery display, slider carousel full-width carousel full-width carousel or even mixing photos and videos in a gallery display.
Gallery blocks are consistent across 7.0 templates and integrate seamlessly with other types of blocks, like text blocks. You can add these gallery sections anywhere on your site that supports gallery sections – such as page headers or footers – or add one above or below an existing block in that location.
As part of editing an existing gallery, you can change its size, spacing and image height as well as add borders around each section. Furthermore, features like lightbox or divider can be enabled and set a customized color theme; all these settings can help your galleries appear more polished on both desktop and mobile devices.
If you want to create a slideshow gallery on your website, clicking “Edit Section” for each page where it should go is an effective way of doing this. Once clicked, a prompt will appear asking you which gallery template or block option to select; after making your selection you’ll then have an opportunity to customize its grid or carousel style before clicking again “Edit Section” button again in order to set image dimensions for the gallery.
If you’re working with a Pacific template, in order to properly stack images on mobile, a grid-row-gap must be specified to prevent an uninterrupted row of images being shown instead. This allows them to transition more smoothly.
Grid
Squarespace provides various methods to showcase images and photos in a professional way. Gallery Blocks or Page templates enable you to use an organized grid, carousel, or slideshow of images from which visitors can click-through for additional viewing information or clickthrough links. Furthermore, images can be resized to fit different screen sizes while remaining easily visible on mobile devices.
If you’re using a Grid layout, you can alter how images appear by dragging the dots at the bottom of each image border. By pulling either up to expand or down to reduce size. Individual images can also be selected and moved around within this grid to reorder them or simply by selecting and clicking pencil icon to resize them.
Squarespace makes editing existing galleries simple by simply visiting the page with it and clicking “Edit.” From there you can make adjustments to your Gallery Grid such as Image Focal Points – which determine how images will appear when cropped for mobile devices – as well as changing its number of columns and rows or altering the thumbnail layout.
Keep in mind that any changes made to the Squarespace gallery layout will affect all galleries on your site. Gallery blocks are built specifically to work with certain templates, and changing one will cause all galleries on your website to display a different layout. It is therefore wiser to stick with the default Gallery Grid configuration if possible.
If you want to customize the gallery layout on a per-gallery basis, adding custom CSS can help. The process for doing so is similar to that described in the video above, except you will have to add slightly different code into Page Header Code Injection and be familiar with editing HTML and CSS before opting for this route.
Masonry
If you’re searching for an easy and effective way to display images on your Squarespace website, masonry galleries and slideshows could be just what you need. Not only can they fit almost anywhere on any page of your site but come equipped with various customization options allowing visitors to easily understand your content. Additionally, text can be added so they have all of the information necessary to comprehend what they see.
Mason galleries provide your site with an elegant and polished aesthetic, from using the default grid layout to customizing each column’s height and changing to either horizontal or vertical layout. They make creating unique and engaging websites easier than ever!
Squarespace galleries can be displayed in numerous ways, from using dedicated Gallery Page templates or as Gallery Blocks, both offering options to add carousels, full or reel slide shows or standard grids with captions/descriptions and lightbox functionality.
The Gallery Page template is ideal for showcasing large, high-resolution images in an eye-catching grid format. Adjusting Focal Points enables you to arrange photos attractively. Having this functionality available makes your site ideal for mobile viewing – which can only benefit you and your users!
Gallery Pages offer an extra feature: lightbox viewing that lets you easily view large images without leaving the page, enabling you to share links of entire galleries with family, friends and colleagues.
If you’re using a Grid or Grid Strips gallery, using the Row Height tweak can ensure that images are evenly spaced across each row. However, please keep in mind that due to Squarespace’s responsive design features, the width of your gallery may shift depending on which device or browser is being used.
Strips
When it comes to showcasing multiple images in one cohesive gallery layout, Squarespace offers multiple gallery options. Which option you select will depend on which version of Squarespace and where the gallery should go.
Gallery blocks in both classic editor and Fluid Engine can be added to pages, blog posts, events, portfolios, storefronts and other collection pages for easy browsing of photos or videos in a grid, slideshow, stacked display or carousel format. Text can also be added for an engaging carousel effect; up to 250 media items (photos or videos) may be displayed simultaneously within one gallery page.
While it is impossible to change the default image size of a gallery block, you can adjust its height and width so it fits with whatever image is being displayed. Furthermore, adding borders can also add customization – these can either be left- or right-aligning depending on where they’re used on your website.
When using a Grid or Masonry-style gallery, if desired you can add a text box at the top to display captions for individual images. Furthermore, in a Slideshow gallery or Carousel this text box may also be added directly onto any slide for easy text addition.
Add captions and other text to any image in a gallery or slideshow by clicking the “i” icon in the block editor. Remember when adding text that file sizes should remain small as this will facilitate quick loading times for gallery images; Squarespace recommends images under 10MB that only contain letters, numbers, underscores and hyphens for optimal performance.
Once you are ready to publish a gallery, press “Save”. This will save all changes made and upload the new image directly onto your site. Alternatively, preview mode can help test out new templates without impacting live sites, though I wouldn’t advise doing this unless starting completely over from scratch; changing live sites can have significant ramifications on SEO and other aspects that take time to recover from.
