Image blocks

Display images on your site and add animations, captions, and links.

Use image blocks to add images to pages or blog posts. Each Image block displays one image.

Watch a video

Add an image

To add an image block:

1. Edit a page or post, click Add Block or an insert point, then click Image. For help, visit Adding content with blocks.
2. Click the + icon on the image block.
3. Upload a file from your computer or mobile device, reuse an image from your library, or browse stock images. For best results, use an image under 500 KB.
4. Use the image block editor to replace, delete, or edit the image.
5. If you're using Fluid Engine, ensure you set the mobile layout as well.

Tip: The image block won't display on your live site without an uploaded image.

Upload images from a mobile device

You can add images from your phone or other mobile device using the Squarespace app. To upload an image:

1. In the image block editor, click +, then choose Upload from mobile. This sends a push notification to your device.
   • If this is your first time uploading on this site, a QR code will appear on your computer. If you don't already have the Squarespace app, scan the code to download it, then click Continue and Send push.
2. Tap the notification on your device to open the Squarespace app import tool. The app automatically pulls images from your device's photo library.
   • If the notification doesn't appear, check your device’s settings to ensure push notifications from Squarespace app are enabled.
3. Tap the image you want to use, then tap Upload.
4. The image will appear in the image block on your computer. In the Squarespace app, tap Replace to choose a different image, or tap Done to close the uploader.

Tip: When uploading images from mobile, click Troubleshoot in the pop-up window that appears on your computer to rescan the QR code that downloads the Squarespace app or find the option to resend the push notification.

Open the image block editor

In the image block editor, you can:

• Replace, delete, or edit the image
• Set the focal point
• Set the design options
• Add alt text
• Edit the filename
• Enable or disable a lightbox

To open the image block editor:

1. Edit the page or post.
2. Click the image block.
3. Click the pencil icon in the block's toolbar.

Add an image link

To turn the image into a link in the inline layout, add the URL to the Link field, or click for additional options.

Keep in mind:

• Enabling a lightbox disables clickthrough URLs
• Most classic editor layouts include a button option.

Classic editor layouts

Image blocks added to Fluid Engine sections don't have built-in layout options. Create similar layouts by overlapping image blocks with other blocks, like text blocks and button blocks.

When you add an image block in the classic editor, it uses the inline layout by default. To change the layout, click the Design tab, then choose the layout you want from the following:

• Inline - The basic image block, with optional captions below or overlaying the image. Set how the caption displays in the Content tab.
• Poster - Display text over images, creating the look of a banner or poster.
• Card - Display images with text to the left or right. The text usually moves below the images in smaller browsers and mobile devices, or when image blocks are used in columns.
• Overlap - Display images on one side with text on the other, partially overlapping the image. Add a background color to the title for a highlighting effect. The text usually moves toward the bottom of the images in smaller browsers and mobile devices, or when image blocks are used in columns.
• Collage - Display images on one side and text over background "cards" on the other, offsetting and overlapping the image. The text usually moves toward the bottom corner of the images in smaller browsers and mobile devices, or when image blocks are used in columns.
• Stack - Display images with text below.

As you select a layout, you'll see a preview of it on the page. To check how your image block displays on mobile devices, use device view.

Quickly change layout and text alignment

In the classic editor, you can change an image block's layout and text alignment without opening the editor by using quick action buttons. Click the image block while editing the page and then click the layout or alignment buttons that appear between the pencil and trash can icons.

Set the image shape

Beyond cropping and resizing, you can shape image blocks to add variety and a unique visual effect to your images. Set the shape of the image in the Design tab of the image block editor:

• Corner radius - For a subtle effect, round the corners of an image.
• Shape - For a more dramatic change, set a shape, such as circle or triangle. The shape appears over your image, like a mask.

Tip: If your site supports Fluid Engine, you can use shape blocks to add solid color shapes to your pages without images.

Corner radius

In the Design tab, use the Corner radius options to set the radius for the entire image or for individual corners.

Keep in mind:

• To remove your corner radius, undo your changes while making edits, or enter 0 in the corner radius fields.
• If corner radius options don't appear in the Design tab, ensure Shape isn't selected.

Shape

In the Design tab, click Shape, choose an aspect ratio (1:1, 2:3, or 3:2), then choose the shape. To remove the shape, select another option in the Design tab (either Fit / Fill or Original).

Keep in mind:

• Use the focal point to customize how your image appears in the shape
• If you set images to open in a lightbox, your image’s original shape appears after visitors click the image
• If you choose the circle shape but your image appears as an oval, use our built-in image editor to crop your image to a 1:1 aspect ratio

Resize the image

You can resize or crop image blocks in a variety of ways. The primary way to resize an image is:

• Fluid Engine - Click and drag from the corners or sides, and use the Fill option in the design tab to crop and shape
• Classic editor - Resize with blocks

For all image blocks, you can also use the image editor to crop the original image. Keep in mind, this change is permanent.

Resize in the classic editor

In the classic editor, you can decrease the size of the image block by adding blocks on either side. The most common way to do this is with spacer blocks, which create blank space.

To resize using blocks:

1. Click an insert point to add a spacer block.
2. Drag the spacer block to the left or right of the image block.
3. Click and drag the resize handle.

Keep in mind:

• To center the image, add spacer blocks of equal size to both sides.
• For Inline and Poster layouts in the classic editor, click and drag the cropping handle to crop the image vertically. This leaves the image the same width but changes the height.
• The Card, Overlap, and Collage layouts have a resizing option in classic editor style settings:

Keep in mind, making these changes affects all image blocks with that layout.

Tip: You can remove the padding automatically applied to image blocks by adding custom code. For more information, visit this post in the Squarespace Forum. Keep in mind, custom code modifications fall outside the scope of our support. This means that we’re unable to help you set up or troubleshoot code-based solutions.

Fill the block

You can set images to fill the full area of the block in Fluid Engine and the classic editor Inline layout. The other classic layouts fill the block area automatically.

• Fluid Engine - Use the Fill option in the Design tab to make the image fill the container. If you choose Fit, the image will have padding surrounding it.
• Classic editor - Switch the Stretch toggle on in the Design tab.
• If the image is wider than the image block area, it will shrink to fit (not crop).

Keep in mind:

• Stretching an image may affect image quality.
• To reduce the need for stretching, we recommend uploading an image that has a width between 1500 and 2500 pixels.

Add animations

You can add subtle animations to your images to create visual interest on your site:

• Fluid Engine - Enable site-wide animations in site styles to animate Fluid Engine image blocks
• Classic editor - Enable block animations in the Design tab of each image block you want to animate.

Add text

Image blocks in the classic editor have built-in caption options, while Fluid Engine offers more versatility.

Tip: We also recommend adding alt text to every image to improve accessibility and SEO.

Fluid Engine

In Fluid Engine sections, use a text block to add text adjacent to or overlaying an image block.

Classic editor

In classic editor sections, click into text fields to add text to the image. You might see placeholder text like Add an image description or Make it stand out.

Keep in mind:

• Limit titles to a few words. For subtitles and captions, use one or two sentences. This balances the words and the image. It also keeps your text visible on mobile devices.
• To add line breaks in title text, press Shift + Enter.
• Highlight the text and use the toolbar to make formatting changes, like bolding, italicizing, or adding a link.
• With the exception of inline and stack layouts, text maintains its set relative width to the image on mobile devices and narrow browsers.
• When switching between inline and any other layout for the first time, you'll need to re-enter any image text.

The inline layout supports one basic caption, while the other layouts support title and subtitle fields.

Fonts and colors

Fluid Engine

In Fluid Engine sections, you can add an overlay color to an image block by switching the Overlay toggle on in the Design tab. Overlays apply a colored filter on top of images, giving them a slight tint. 

Use the color picker to select a color and transparency for the overlay. Click Blend mode to add an additional visual effect to the overlay. These visual effects will render with slight visual differences depending on the viewer's browser.

Classic editor

How you style image block fonts and colors in the classic editor depends on your site's version.

The inline image block doesn't have its own design tweaks in site styles. To learn about caption font styles, colors, and sizing, visit Styling image captions.

Next steps

After setting up the image block, you can:

• Drag and drop the block to move it or create columns and rows.
• Use the image editor to crop, rotate, or add image filters.
• Delete the block.

To troubleshoot any image issues, visit Formatting your images for display on the web