A Beginner’s Guide to Squarespace Image Blocks (classic editor)
This article is about image blocks for classic editor sections, like blog posts, event pages, and additional product details use the classic image block. Check out this article for more information on the newer Squarespace image block found in Fluid engine page sections.
You can use a classic Squarespace image block to display an image on a page in your website.
Classic editor image blocks are found on blog posts, individual events, and additional product details. These image blocks have unique display settings that allow you to create a custom design using additional text, backgrounds, and even buttons!
You can upload a JPG, PNG, or a GIF file format to a classic image block. SVG files are not supported.
Below you’ll find an example of the 6 layout options we have for Squarespace classic image blocks.
Inline image with a text based description.
This description has basic text editing features, and can have characters that are bold, italic, active links,
and even bullet pointed lists
This is a stack image layout
This description has basic text editing features, and can have characters that are bold, italic, active links,
and even bullet pointed lists
This is a card image layout
This description has basic text editing features, and can have characters that are bold, italic, active links,
and even bullet pointed lists
This is a collage image layout
This description has basic text editing features, and can have characters that are bold, italic, active links,
and even bullet pointed lists
This is an overlap image layout
This description has basic text editing features, and can have characters that are bold, italic, active links,
and even bullet pointed lists
This is a poster image layout
This description has basic text editing features, and can have characters that are bold, italic, active links,
and even bullet pointed lists
How to add an image block to Squarespace
A friendly reminder, these layout styles are only available in classic editor pages, posts, and sections. Check out this article for more information on the newer Squarespace image block found in Fluid engine page sections.
Select edit on the top left-hand side of your website preview.
Click the plus sign in the center of your classic editor page, post, product, or section.
Select the image option form the list of content blocks.
Double-click on the image block, or select the pencil icon to open the editor for your image block.
Select the plus sign in the input field to select your image. You can upload one from your computer, select an image already in your asset library, or you can choose to search for an image from the Unsplash or Getty image database.
Adjust the focal point for your image as needed; it’s the small white circle in the center of your image.
On the content tab, you can attach a link to the image, update the file name, and provide an alt tag to improve your website accessibility.
On the design tab, you can select the layout, chose to have the image cropped to a shape, and alter the corner radius and anaimation options.
To edit the headline and description text, click on the placeholder text and replace it with your own. A simple text editor bar will pop up for formatting options.
If you click on the design tab and see fit or fill options, that means you are using a new fluid engine image block. Check out this article for more information on the Squarespace fluid engine image block.
What you can customize about the classic image block using your Squarespace design menu
Layout: This lets you choose how your image appears within the block. "Inline" displays the image alongside text, with options for caption placement. "Poster" creates a banner-like effect with text overlaid on the image.
Aspect Ratio (Optional): For some image block layouts, you can set a specific aspect ratio to constrain the image's proportions. This helps ensure your images display consistently within the block's design.
Caption: Add a caption below or on top of your image to provide context or additional information for visitors. You can also choose how the caption text is displayed.
Link to File: This option lets you create a clickable link on the image itself, directing visitors to the original image file or another relevant webpage.
Resize Image (Inline and Poster Layouts): By dragging the cropping handle, you can adjust the height of your image to fit the block's design while maintaining the aspect ratio (if set) and avoiding distortion.
What you can customize about the classic image block design using CSS
CSS stands for Cascading Style Sheet and it’s a special type of code that you can use to customize Squarespace.
Image Filters
You can use the CSS filter property to create unique filters for your image blocks.
Where you can learn more about the classic editor image blocks available in Squarespace
Squarespace Made Simple
This mini course for beginners will teach you how to create your first Squarespace website. Lesson seven includes information about content blocks.
Squarespace Support Article
Learn more from the official Squarespace support blog
You might also enjoy these articles about other Squarespace image types!
Squarespace
made simple
Get all the info you need to confidently
launch your Squarespace website ASAP.