Captions Above Blog Images: A Squarespace CSS Hack You Need to Know

Want to give your Squarespace blog images a fresh look? One simple CSS trick can make a world of difference: moving captions above the image.

While Squarespace's built-in options are limited, this hack opens up a whole new world of design possibilities. It's a great way to add visual interest and clarity to your blog layouts, especially for call-to-action images like social media sharing prompts.

Ready to see how it's done? Let's dive in!

Squarespace's Default Caption Options

Squarespace offers a few built-in options for caption placement, but they might not always meet your design needs. When you add an image block to your blog page, you'll find the caption settings in the block editor. By default, you can choose to display your caption in the following ways:

• No caption: “Inline”

• Caption on top of the image: “Poster”

• Caption next to the image: “Card”, “Overlap”, and “Collage”. 

• Below the image: “Stack”. This is the most common placement, with the caption aligned centrally beneath the image.

You can edit the overall appearance of these options side-wide via your Site Styles - go to: Site Styles -> Accessories -> Image Blocks -> Show All

Why Place Captions Above Images?

While Squarespace’s caption options are perfectly fine for many situations, they can be limiting if you're looking for a more unique or eye-catching layout. For example, placing the caption above the image can create a stronger visual hierarchy, draw attention to your call to action, or simply enhance the overall aesthetic of your blog page.

And while you could technically use a text block above your image to achieve a similar effect, it's not always the most user-friendly, nor most elegant solution.

Accessibility Concerns

While visually similar, text blocks lack the semantic relationship that a caption provides. For blog images, Squarespace uses the <figure> HTML element. The image’s caption is an HTML element called <figcaption> and it is contained within the <figure> element, together with the related image. This helps assistive technologies such as screen readers to convey the meaning and context of the image to users. If you use a simple text block above the image, it is not as closely related and thus makes it harder for screen readers to make sense of it.

And in case you were wondering: Yes, making your web pages accessible can boost the search engine ranking, because it improves their usability - and this is one of the key factors search engines such as Google use for determining how to rank results. On top of that, since search engines recognize the semantic meaning of the <figcaption> element, using it can potentially boost your images SEO specifically and make your content more discoverable.

Design Concerns

Besides accessibility reasons, there are also some design concerns to keep in mind when it comes to deciding whether you want to move the caption above the image or display a text block in place instead: 

• A text block might not align perfectly with the image: Text blocks might require additional styling and formatting.

• A text block doesn't offer the same level of integration as a caption: Image captions are specifically designed to complement images, offering seamless integration and a more polished look.

Since Squarespace already uses the <figure> element for blog post images, manipulating the CSS to move is <figcaption> element above the image is a more accessible and polished approach. It leverages your webpage’s existing semantic structure while giving you the design flexibility you need.

The CSS Hack: Moving Captions Above Images

Let's get to the fun part – customizing your Squarespace blog images with CSS! We'll cover three different approaches, so you can choose the one that best suits your needs:

1. Site-Wide: Move captions above all images in all your blog posts.

2. Specific Pages: Target specific blog pages for caption customization.

3. Specific Images: Change the caption placement for individual images.

Accessing the Custom CSS Editor

Before we dive into the code, here's how to access Squarespace's custom CSS editor:

1. In the Home Menu, navigate to Website -> Pages.

2. Scroll down to the bottom of the left sidebar and click on Website Tools.

3. In the Website Tools menu, click on Custom CSS.

Option 1: Customize All Blog Image Captions

The Code

Let's start with the simplest approach – moving captions above ALL images in ALL your blog posts. Copy and paste this CSS snippet into your Squarespace Custom CSS editor:

/* Move blog image captions above images */
.blog-item-content-wrapper figure {
  display: flex;
  flex-direction: column;
}

.blog-item-content-wrapper figcaption {
  order: -1;
}

Explanation

Let's break down this code:

• .blog-item-content-wrapper: This is a Squarespace class that targets the content area of your blog posts. By combining it with figure, we specifically select all image blocks within your blog posts.

• display: flex;: This turns each <figure> element (containing your image and caption) into a flex container. Flexbox is a powerful CSS layout tool that gives us more control over the positioning and arrangement of elements.

• flex-direction: column;: This arranges the flex items (image and caption) in a vertical column, one on top of the other.

• order: -1;: The order property controls the visual order of flex items. By default, items have an order value of 0. By setting order: -1; for the figcaption (caption), we tell it to appear before the image, effectively moving it above.

In a nutshell: This code targets all image blocks within your blog posts, arranges them in a vertical stack, and then reorders the elements so the caption appears first.

Option 2: Customize The Code for Specific Blog Pages

Finding the Page ID

To target specific blog pages, we'll need their unique IDs. The ID we’re looking for starts either with “collection-” or with “item-”. 

Here are two easy ways to find it:

1. Squarespace ID Finder (Free Chrome Extension): This handy tool automatically displays the all IDs of a Squarespace page. The page ID is usually located towards the upper-left corner of your browser window.

2. Browser Developer Tools:

• Right-click anywhere on the page and select "Inspect" or "Inspect Element". This will open the browser’s developer tools. 

• Press CTRL + F on Windows or CMD + F on MacOS to open the correct search bar. This will usually appear towards the bottom of the HTML code that’s being displayed.

• Type "body" in the search bar and press enter. This will highlight the <body> tag in the HTML code. 

• The first attribute of the <body> tag should be the page ID, which typically starts with collection- or item-. If this is not the case, press enter to move to the next search result.

• Copy the ID value without the surrounding parenthesis. 

Customizing One Page - The Code

Once you have the page ID, copy and paste the following CSS code into your Squarespace Custom CSS editor, replacing your-page-id with the actual ID:

/* Move captions above images on specific page */
#your-page-id figure {
  display: flex;
  flex-direction: column;
}

#your-page-id figcaption {
  order: -1;
}

Important Note: If you're using the developer tools method, make sure to include the # symbol before the page ID in your CSS code. This symbol signifies that you're targeting an ID.

To apply this code to multiple pages, simply duplicate the code block for each page and replace your-page-id with the corresponding ID.

Customizing Several Pages - The Code

Once you have the page ID(s), copy and paste the following CSS code into your Squarespace Custom CSS editor, replacing page-id-1, page-id-2, etc., with the actual IDs of the pages where you want to change the caption placement.

/* Move captions above images on specific pages */
#page-id-1 figure,
#page-id-2 figure,
#page-id-3 figure {
  display: flex;
  flex-direction: column;
}

#page-id-1 figcaption,
#page-id-2 figcaption,
#page-id-3 figcaption {
  order: -1;
}

In this example, the code targets the figure and figcaption elements within the pages you've specified. You can add as many page IDs as you need, simply by adding a comma and then entering the next ID.

This approach is ideal if you want to apply the change to several pages, but not necessarily to all of your blog posts. It keeps your code clean and easy to manage.

Option 3: Customize The Code for Specific Blog Images Only    

Finding the Block ID

Sometimes, you might want to move the caption above the image for only a few specific images within a blog post. In this case, you'll need the unique block ID for each image. Here's how to find it:

1. Browser Developer Tools:

• Right-click on the specific image you want to target and select "Inspect" or "Inspect Element."

• In the developer tools panel, the HTML code for the image block will be highlighted. Look for a div element with a class that starts with sqs-block-image. This div should have an id attribute that starts with block-yui_3_17_2_1_ followed by a unique string of characters. This is the block ID.

The Code

Once you have the block ID(s), copy and paste the following CSS code into your Squarespace Custom CSS editor, replacing your-block-id with the actual ID of the image block you want to target:

/* Move caption above specific image */
#your-block-id figure {
  display: flex;
  flex-direction: column;
}

#your-block-id figcaption {
  order: -1;
}

Similar to targeting specific pages, you can target multiple specific images by adding their block IDs separated by commas to the CSS selector:

#block-id-1 figure,
#block-id-2 figure {
  display: flex;
  flex-direction: column;
}

#block-id-1 figcaption,
#block-id-2 figcaption {
  order: -1;
}

This allows you to have fine-grained control over which images have their captions moved above, giving you even more design flexibility within your blog posts.

Style the Caption

Now that we've mastered the placement of your captions, let's add some style! We can use CSS to customize the appearance of our captions to match our website's aesthetic. Here are a few ideas:

Font Styles

• Font Family: Choose a font that complements your overall design.

• Font Size: Adjust the size to ensure readability and visual balance.

• Font Weight: Use bold or regular weight to create contrast or emphasis.

• Text Alignment: Center, left-align, or right-align the caption text.

Spacing and Margins

• Padding: Add padding around the caption text to create visual breathing room.

• Margins: Adjust the spacing between the caption and the image or surrounding elements.

Colors

• Text Color: Choose a color that contrasts well with the image background.

• Background Color: Consider adding a subtle background color to the caption for better readability.

Example Code

Here's a sample CSS code snippet you can add to your Custom CSS editor to style your captions:

.blog-item-content-wrapper figcaption div {
  font-family: Georgia, serif; /* Choose your font family */
  font-size: 14px; /* Adjust the font size */
  text-align: center; /* Align the text */
  padding: 10px; /* Add padding */
  background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white background */
}

Explanation

Squarespace wraps the caption, called "image title", and the sub-caption, called "subtitle", elements within a <div> tag inside the figcaption. This means you need to specifically target that div and its content to apply certain styles, like text alignment or background color.

Applying Different Styles to Image Title and Sub-Title

If you want to style all image captions (“image titles”) the same but differently from all sub-captions (“subtitles”) and vice versa, you can target the specific heading or paragraph element that you selected. For example, if you’ve set your image titles as H3 headings, you would use:

.blog-item-content-wrapper figcaption h3 {
  /* Your styles here */
}

Similarly, if your sub-titles are set as paragraphs, you'd use:

.blog-item-content-wrapper figcaption p {
  /* Your styles here */
}

Styling Specific Captions and Sub-Captions

To target both, the “image title” and the “subtitle”, you can use a Squarespace ID Finder browser extension or your browsers developer tools if you prefer to find the ID of the specific image block you want to style.

To style a particular “image” or “subtitle”, and not both of them, you'll need to identify their unique IDs - and for this, you’ll need your browser’s developer tools:

1. Use Your Browser's Developer Tools: Right-click on the specific caption text you want to target and select "Inspect" or "Inspect Element."

2. Locate the ID: Click the Finder tool (usually located in the upper left corner of your dev tools) In the developer tools, find the HTML element corresponding to your caption text. It should be either an <h3> or a <p> tag, nested within a div. Look for the id attribute of this element.

3. Target with CSS: Copy the ID and use it in your CSS selector like this:

#your-specific-caption-id {
  /* Your styles here */
}

Replace your-specific-caption-id with the actual ID you found in the developer tools. You can apply this technique to target multiple captions by using a comma-separated list of IDs.

By mastering these techniques, you can create beautiful and unique caption styles that perfectly complement your images and enhance your overall blog design.

Wrapping Up: Caption Control in Your Hands

Congratulations! You've just unlocked a powerful design tool for your Squarespace blog. By mastering the CSS techniques we've covered, you can now:

• Move captions above images site-wide: Create a consistent look and feel across all your blog posts.

• Customize specific pages: Target individual posts for unique caption layouts.

• Style individual images: Fine-tune the placement for maximum impact on specific images.

• Elevate your caption style: Use CSS to personalize the look of your captions.

Remember, these techniques are just a starting point. Feel free to experiment and push the boundaries of your blog design. With a bit of CSS magic, you can create a visually stunning and engaging blog that truly reflects your style and brand.

A Word of Caution: Squarespace regularly updates its platform, which can sometimes affect custom code. While the techniques shared here work at the time of writing, it's always a good practice to check your customizations after any Squarespace update to ensure they're still functioning as expected.

Now go forth and captivate your readers with beautifully placed and styled image captions!

FAQ

• How to overlay text on an image in Squarespace?

  There are several options. you can achieve this by using the Poster image block layout to move the image's caption (called "image title" and "sub-title") on top of the image - or use the Overlap image block layout to move part of the caption over the image.

  Of course, you can also add a simple text block and move it via drag-and-drop over the image in Squarespace 7.1's Fluid Engine editor.

• How do I put a button over an image in Squarespace?

  Add the image and a button to the section you're working on and then simply move the button over the image in Squarespace 7.1's Fluid Engine editor.

• How do you add a title to an image in Squarespace?

  In Squarespace, you can easily add titles and sub-titles (captions) to your images through the image block editor. Click on the image to edit it, and then enter you title where it says "Add your title". Same goes for the sub-title which is located directly underneath the image title. For both titles, you can choose from all styling options that a regular text block offers.

• What is a text overlay?

  A text overlay is text that is placed on top of an image, usually for decorative or informational purposes. In Squarespace, you can create text overlays using image block layouts, drag-and-drop text over images, or custom CSS.

• What is alt text and why is it important?

  Alt text (alternative text) is a description of your image that is read by screen readers for visually impaired users. It's also important for SEO, as it helps search engines understand the content of your images.

• How do I add alt text to an image in Squarespace?

  Simply click on the image and then click on the 'Edit' icon. In the image settings panel, scroll down until the "IMAGE ALT TEXT" section appears - enter your image's alt text directly here.

Liked this post? Pin it to Pinterest! 👇