Adding a Caption

With Photo Block, captions are a fully developed feature with many customization options. Let's review what you can do with captions.

Hiding the Caption Appender Button

If you do not want a caption on your photo but want to hide the "Add Caption" button, you can click the "Hide Caption" icon from the block toolbar.

This will allow a better preview if the image doesn't warrant a caption.

Adding a Caption

To add a caption to the photo, click "Add Caption" at the bottom of the block. This will create a caption appended to the bottom of the image.

From there, you will see the caption toolbar and block sidebar options.

The Caption Toolbar

Let's go over the available options in the caption toolbar.

1. Alignment Options - Align the caption, left, center, or right.

2. Caption Positioning - Position the caption at the top, overlay, or bottom.

3. Caption Mode - Choose between single-line and multi-line captions.

4. Remove Caption - This will remove the caption from the photo.

5. Formatting Options - Add basic formatting to the caption.

Positioning the Caption

You can position the caption at the top or bottom of the photo or over the photo, which we dub an overlay caption.

You can position the caption by interacting with the caption toolbar under Position.

Once you click on Position, you're presented with three options.

1. Top - Position the caption at the top of the photo.

2. Bottom - Position the caption at the bottom of the photo.

3. Overlay - Position the caption over the photo.

Positioning a caption at the top will move the caption above the photo.

Please visit the link below for overlay captions and how to create them.

Changing the Caption Mode

You can switch between single-line captions and multi-line captions by adjusting the caption's mode.

Single-line Captions

You can use single-line captions if you have a basic caption and only need a line of text to describe the image.

You'll find formatting options for Single-line captions in the block sidebar.

You can adjust the font, background color, text color, link color, and link color on hover.

Multi-line Captions

Switching to Multi-line captions allows you to add multiple lines to the caption. In fact, you can place any block from the block editor into your caption, which opens up the possibilities of advanced customization.

Multi-line Captions and Smart Styles

You'll see an option for multi-line captions in the block sidebar for Smart Styles.

Smart Styles provides formatting and styles for the multi-line innerblocks, so you don't have to worry about styling the innerblocks yourself.

You can set the font families, base font size, and colors for common elements.

If you plan to style the innerblocks yourself, you can disable Smart Styles.

Sizing and Dimension Options for a Caption

In the block sidebar, you'll see an area to adjust the sizing and dimensions of the caption.

Padding, Margin, and Border

You can adjust per mobile breakpoint:

1. Padding

2. Margin

3. Border

4. Border Radius

These will be applied directly to the caption.

Caption Sizing Options

You're able to adjust the caption container. You can modify per breakpoint:

1. Width

2. Height

3. Min-Width

4. Min-Height

5. Max-Width

6. Max-Height

Removing a Caption

Click "Remove" in the caption block toolbar to remove a caption.

You'll be asked to confirm via a modal, and when approved, the caption will be removed.

Caption Advanced Options

In the Advanced panel in the block sidebar, you can:

1. Add CSS classes to the caption container

2. Add any custom data attributes you need for the caption

3. Hide on desktop, tablet, and mobile

You can also set global styles in the Advanced panel.