How to replace and resize images in image blocks
About this tutorial
This tutorial was recorded in Squarespace 7.1 using the Fluid Engine editor. Some settings will look different in the Classic Editor and on version 7.0.
In this tutorial I’m showing you how to replace and resize images in image blocks on your Squarespace website.
Watch the video
Tutorial
Replace an image
Single-click the image on the page and then click on the pencil icon, or double-click an image to open the options menu.
Click on Replace
Upload a file from your computer, select from your library of images that you've already uploaded to your Squarespace site, or you can browse stock images*
Resizing an image or adding a shape
You might see blank space at the top and bottom or sides of your image inside the blue container. This is because the previous image was a different shape to what you’ve replace it with. You can either resize the container using the blue edges around the image, or change the image settings.
To change image settings:
Click on Design at the top of the options menu
Choose Fit, Fill or Shape to suit what you need:
Fit, which will fit the entire image inside the blue container regardless of how big the container is
Fill, which will fill the entire blue container
Shape, where you can select a shape from various aspect ratios to crop your image to. (To remove a shape, go back to Design and select Fit or Fill).
Add rounded corners to an image
With Fit and Fill options, you can change the corner radius to round the corners of the image.
Click Design at the top of the options menu
Under Corner Radius, add the number value, e.g. 50, then click outside of the options menu. This will apply to all corners.
To change individual corners, click on the second icon under Corner Radius, then add different values to each field. When you hover over each field, you'll see which corner it relates to.
Add a link to an image
Click Content at the top of the options menu
Click on Link and select On image.
Paste your link or select from your current pages.
Adjusting mobile view
Something to remember whenever you change images on your site (or text, for that matter!) is to double-check the mobile view.
At the top right of the edit page, click on the mobile view icon to switch from desktop to mobile preview
Click on the image and resize using the blue container edges
Use the up and down arrows to the right of the preview screen to change the order of the image with other content, or click and drag to manually arrange.
*Note on using stock images: Typically I would not recommend browsing stock images and adding them to your site through this way because the images won't be optimised when you add them. Generally, they're really big, good quality images more suitable for backgrounds and large banners. If you want to add a smaller image on your site, like in the video example, these integrated stock images will be too large, slowing down your page, and you may be penalised by Google for it.
If you do want to use stock photos, I'd recommend downloading them from the website directly. For example, unsplash.com, which is what Squarespace uses, or pexels.com. Once you've done that and saved it to your computer at the appropriate size, you can go upload the file here.
Your designer
Hey, I'm Cass, founder of Willful Studio. I’m a Squarespace website designer for go-getting women, no matter what stage of business you’re at. If you want to discuss a potential project, you can email at cass@willful.studio or get in touch with me here. Alternatively, you can book in a free 15-minute consultation call here.
