How to resize and crop images in Squarespace 7.1 Fluid Engine
Squarespace released their latest layout editor, Fluid Engine, for blocks and page sections a few months ago and that brings about new ways to edit and design your content.
Something as simple as resizing or cropping an image block is now slightly different than how you might be used to doing it in Squarespace's Classic Editor, so we're going to walk you through how to move your images around the page, change focal point, and crop your images into different shapes with Fluid Engine.
If you're using Classic Editor, check out our previous post on how to resize and crop images!
Add an Image Block to your Section
In Edit mode, hover over the section you want to add an image to. Click + Add Block in the top left corner.
A popup window will appear with all of the block options. Choose Image.
Then upload your image to the Image Block panel by clicking on the + icon.
This is almost identical to how you add an image to your Squarespace site in the Classic Editor, but Fluid Engine gives us a few new ways to edit image blocks. Let's go through them!
Using the Container to Increase or Decrease your Image Size
When you hover over your image you'll notice a blue frame/container with points around the image.
To resize your image, you'll want to click and drag your image from any one of those points in or out to decrease or increase your image size.
➝
As you do this, you'll see a grid pop up in the background. These are the bounds to which your image will stretch and lock to as you resize your image.
Tip: Hit G on your keyboard to make the grid say on the screen. This can help you as you lay out your content. Tap G again to hide the grid.
Depending on the size you're looking to make your image and its dimensions, you'll probably notice that the image block is larger than the image itself. Let's take a look at the new design options Fluid Engine offers to change this (if you'd like!).
Using Fit and Fill settings to crop and resize your image
Fluid Engine gives us a few new ways to edit image blocks, two of them being: Fit and Fill.
In the Classic Editor, Squarespace would automatically display the image at whatever aspect ratio you uploaded it as, but these new options give us a bit more flexibility to translate different image sizes to different layouts.
If the block is set to Fit, the image will have extra space surrounding it so the image fits within the bounds of its container without cropping (retaining the aspect ratio as you uploaded it).
The Fill setting will remove the padding so the image expands to fill the whole container, which may result in some cropping depending on the dimensions of your container and the image you are working with.
To apply these features to your image block:
Double click on your image or click Edit on the image block toolbar.
In the pop-up window, click on the Design tab. Here you should see the Fit or Fill options. Image blocks are set to fit by default, but you can toggle between them to find the look you want!
If you select Fit, you can also customize the alignment of your image in the block's toolbar.
If you select Fill and notice your image is cropped too much, you can click and drag the image container from left to right, top to bottom, or diagonally to adjust the size of your image.
You can also use the "focal-point" tool to choose where the image focuses on, and what it crops out.
Adjusting the focal point for cropped images
Double click on your image or click Edit on the image block toolbar.
You will see on your image preview there is a dot in the center of the image, which is your focal point. This will be set to the center of your image by default.
Click and drag this dot to tell Squarespace where you want the image to focus.
For example, if there was a face or something else important in the image that you didn’t want to be cropped out, you would put this focal point near that area.
Click out of the pop-up window to see your newly cropped image.
Don't forget to click Done and Save once you've got an image you're happy with!
Using the Shape tool to crop your Image into fun shapes
In addition to Fit and Fill, Fluid Engine gives us the option to crop images with the Shape tool.
Double click on your image or click Edit on the image block toolbar.
In the pop-up window, click on the Design tab. Toggle over to the Shape option and underneath, click the secondary Shape menu to choose the shape you want your image to be framed in.
Squarespace gives so many shape frame options for square (1:1 ratio), vertical (2:3 ratio), and horizontal (3:2 ratio) images. I've chosen the vertical arch for my image.
I love the shape options because it gives a customized look without the need for custom code or having to edit images in a design software!
That covers all of Squarespace 7.1 Fluid Engine's new built-in design features for image blocks! I hope you found these tips helpful to resize and crop images for your Squarespace site.
Want more tips? Check out the posts below 👇
How to manage images and files in Squarespace - Your complete guide to the Asset Library
How to change the colour of your images and graphics in Canva for FREE (works with JPGs and PNGs!)
How to remove the background from your images in Canva
Your complete guide to image focal points in Squarespace
How to create an image outline in Canva (easy!)
If you liked this post, Pin it to Pinterest! 👇🏻
