5 Easy Ways to Resize an Image in Squarespace
EDIT: As of July 2022, Squarespace has rolled out its new editor, Fluid Engine. This editor changes how you can resize images using a literal drag and drop method, as outlined below.
I am going to walk you through five simple ways to resize an image within Squarespace. There are several different built in Squarespace tools you can use to crop, resize, and even change the shape of your image and I will also show you how to resize an image using code. Depending on how you need to resize your image and if you need to specify size depending on screen sizes, these processes should cover it!
Fluid Engine Editor
Now that Squarespace has created the Fluid Engine Editor for Squarespace 7.1, editing and resizing photos is easier than ever.
“With Fluid Engine, you’ll have more flexibility and options for block placement, resizing, and overlap, opening up new possibilities for creative layouts never possible before in Squarespace.”
To add an image, click “Edit” in the top left corner of the page, where you want to add an image. Then click on the “Add Block” button and choose image from the content block menu.
Click “Add Block” to add an image.
Now you can upload or drag your image into the block. Once your image populates, you can simply click on and drag your image anywhere on the page and drag the image re-sizer sliders to change the image size, while keeping the aspect ratio.
Click and drag the image around the section grid to reposition the image.
Click and drag to increase or decrease the block's width, height, or both. A grid appears in the background to help guide your resizing.
Classic Editor: Resizing Images with Squarespace Tools
Content Blocks
First, you will add an image. Click “Edit” in the top left corner of the page where you want to add an image. Scroll over any content on the page until you see “+” appear (this is an insert point). Choose “Image” from the content block menu and add your image.
Insert points to add content blocks.
Content block menu for adding an image and other blocks, specifically spacers for resizing.
Now, using the same steps as above, add any content block on either side of the image (using an insert point) to resize it to preferred size. Spacers are most commonly used to resize images.
Scroll over the edges of each content box until you see the sliders appear and adjust these to resize your image.
This is an image being resized with spacers on either side. You can drag the edges of the image or spacers to resize the image.
Cropping Slider
When you are in “Edit” mode, if you click on your image, you will see a dot appear at the bottom of your image. You can drag this slider in order to crop your image from bottom to top. You can also play with the image focal point in order to recenter your image.
An image can be cropped by dragging the cropping slider at the bottom of the image.
Drag the image focal point to the desired position.
Image Editor
You can also resize an image by cropping it in the Image Editor.
When hovering over an image, click the pencil/edit icon. Click “Edit” below the image in the window that appears. This opens up the image editor. Click the “Crop” icon and choose an option to change the aspect ratio of your image.
This is the cropping tool in the image editor to crop image aspect ratio.
Image Design Tool
You can also change the shape, aspect ratio and layout of an image using Squarespace’s built-in design options. When hovering over an image, click the pencil/edit icon, then click “Design” at the top of the window that appears. You will see many design options for your image, including the image layout (inline, poster, card, overlap, collage, stack) and shape options, where you can also change the aspect ratio and corner radius and stretch the image in the container.
The image design tool with built-in options.
Image shape change options.
Resizing Image with CSS Code (Cascading Style Sheets)
Don’t let the prospect of using code to resize an image intimidate you. It’s actually very simple.
One thing that will make using code much easier is installing a simple Google Chrome extension/plugin that is used with Squarespace. This plugin allows you to target any image you’d like to resize by identifying a unique identification number connected to the image block.
Download the extension here: Squarespace Collection/Block Identifier Extension
Once you have downloaded the extension, head over to the page/image you would like to resize. Click on the Squarespace Collection/Block Identifier Extension in the toolbar of your browser to activate it. You will now see an ID# attached to each content block on your page. Click on the ID# that is hovering over your image to save it to your clipboard. Now we are going to write some code!
Head to the main menu of your Squarespace site and go to “Design” and then “Custom CSS” at the bottom. Paste the ID# into the CSS window and add the following code:
/* change image size */
#block-yui_3_17_2_1_1654567773113_6175 {
width: 50%;
height: auto;
}Of course, make sure you replace the ID# with your own and adjust the width percentage to your specifications. This code will change the size of the image on all screen sizes. If you would like to just change the size of an image on mobile, for example, you can use a media query.
To change the image size only on mobile, your code will look like this:
/* change image size on mobile only */
@media only screen and (max-width: 600px) {
#block-yui_3_17_2_1_1654567773113_6175 {
width: 50%;
height: auto;
}}If you would like to change the image size on all screen sizes except for mobile, use the following code:
/* change image size on screens larger than mobile */
@media only screen and (min-width: 601px) {
#block-yui_3_17_2_1_1654567773113_6175 {
width: 50%;
height: auto;
}}
This gets into a little bit more complicated code, but if you would like to learn about media queries, this is an excellent resource: W3 Schools- Responsive Web Design - Media Queries
And voila! I hope that one of these methods helps to resize your images to your heart's content!
Angela
