Online Test Banks
Score higher
See Online Test Banks
eLearning
Learning anything is easy
Browse Online Courses
Mobile Apps
Learning on the go
Explore Mobile Apps
Dummies Store
Shop for books and more
Start Shopping

Basics of the Gallery Block on Squarespace

When you add a gallery block on Squarespace, you can quickly add multiple images at once and adjust the gallery’s design to create enjoyable and simple galleries for your site visitors.

The Edit Gallery dialog box has two tabs in the upper-right corner for setting up the gallery block:

  • Design: Choose from four display options: Slideshow, Slider, Grid, and Stacked. Each offers different choices for displaying gallery images.

  • Content: Add images to the gallery block by uploading images from your computer or by pulling images from a gallery page.

Before we look at the different display options in more detail, let’s add images to the gallery block.

How to upload images to the gallery block

As in other image uploading areas of your Squarespace site, you can upload images to the gallery block in two ways. Click the plus sign to open a system dialog box to locate the images on your computer, or drag and drop images to the image upload area of the gallery block.

After you upload your images, double-click an image or click the gear icon that appears when you hover your cursor over the thumbnail of the image. The following settings appear:

  • Title: Give the image a title.

  • Description: Add a short description about the image.

  • Clickthrough URL: Add a link to your image to allow someone to click the image to open a page or a file on your site or go to another website.

    image0.jpg

Squarespace uses the image title to add alternative text for the image. Search engines use this text to get descriptive information about the image, increasing your search engine optimization.

How to pull images from a Gallery page

An alternative method of getting images in your gallery block is to pull them from a gallery page on your site. When you display images from a gallery page, you can't modify or configure the images from within the gallery block. Instead, you must make your changes on the gallery page.

image1.jpg

How to choose a display option

Now that you have images in the gallery block, you need to configure the gallery block to display the images. Four display choices are available:

  • Slideshow

  • Slider

  • Grid

  • Stacked

Let’s look at each one of these in more detail.

Slideshow

The Slideshow display option offers the most configuration settings. In a slideshow, one image is displayed at a time, and navigation controls appear so that visitors can advance through the images.

You can modify the following settings for the Slideshow display option:

  • Autoplay: Automatically begin transitioning between images when the page loads. Use the slider control to set the delay between image transitions from 1 to 10 seconds.

  • Controls: Display arrows on either side of the current image (except the first and last image) to allow someone to manually change images.

  • Auto Crop: Automatically scale and crop the images so that they are the same size.

  • Thumbnails: Display all the images in the gallery block in a row of thumbnails below the slideshow. Use the slider controls to set the height of the thumbnails and the distance of the thumbnail row from the slideshow.

  • Show Title and Description: Display the title and description of each image.

  • Title and Description Position: Reposition the title and description in one of several locations.

  • Show on Hover: Display the title and description only when someone hovers the cursor over an image in the slideshow.

Slider

The Slider display option, like Slideshow, displays the images in a slideshow format. However, the Slider option also displays faded portions of the previous and next image on either side of the current image.

  • Autoplay: Automatically begin transitioning between images when the page loads. Use the slider control to set the delay between image transitions from 1 to 10 seconds.

  • Controls: Display arrows on either side of the slider to allow someone to manually change images.

  • Active Alignment: Position the full image to the left, right, or center of the gallery block.

Grid

The Grid display option shows all your images as thumbnails aligned in a grid. This feature is useful when you want to display all your images at once and let the visitors decide which one they want to view larger. The following options are available:

  • Square Thumbnails: Display your images as square thumbnails, creating a grid of images that are all the same size.

  • Thumbnails per Row: Use the slider to adjust how many thumbnails are displayed on each row.

  • Padding around the Thumbnails: Add more space around your thumbnail images. Note that doing this will decrease the size of the thumbnail.

  • Lightbox: Allow thumbnails to be clicked to display larger versions of the images in a presentation-style format. The website darkens and images are displayed in the center of the window.

Stacked

Stacked is the simplest display option, presenting the images one after the other down the page. It has no settings to configure.

If you don’t have any blocks arranged to the left or right of the gallery block and you choose Stacked, the images will be sized to the full width of the page.

blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.