LogoLogo
HomeWordPress.orgSupport
Photo Block
Photo Block
  • Introduction
    • Introduction and Overview
  • Getting Started
    • Installation
    • Finding the Plugin's Settings
    • Adding the Photo Block
    • Uploading a Photo
    • Cropping a Photo
    • Editing a Photo
    • Adding a Caption
    • Overlay Captions
    • Global Styles
  • How To's
    • How to Create a Circular Image
    • How to Rotate an Image
    • How to Add Photo Block to the Query Loop
    • How to Popup an Image in a Lightbox
    • How to Take Site Screenshots With ScreenshotOne and Photo Block
  • Useful Links
    • Photo Block Home
    • GitHub Repository
    • WordPress.org Repository
    • Support
Powered by GitBook
On this page
  • Hiding the Caption Appender Button
  • Adding a Caption
  • The Caption Toolbar
  • Positioning the Caption
  • Changing the Caption Mode
  • Sizing and Dimension Options for a Caption
  • Removing a Caption
  • Caption Advanced Options

Was this helpful?

Export as PDF
  1. Getting Started

Adding a Caption

PreviousEditing a PhotoNextOverlay Captions

Last updated 7 months ago

Was this helpful?

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.

Switching between modes does not transfer existing captions. The two modes provide separate caption inputs, so they can't be carried across.

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.

Overlay Captions
Global Styles
Hide the Caption Button Appender by Toggling This Option
Photo Block With Caption Appender Hidden
Adding a Caption Button
Clicking the Add Caption Button Allows You to Add a Caption
The Caption Toolbar
Position Options in the Caption Toolbar
Caption Positioning Choices
Demo of Caption Positioning
Switch Caption Modes From Single-Line to Multiple Lines
Caption Settings for Single-line Captions
Modal Asking Permission to Switch to a Multi-line Caption
Multi-Line Captions on the Photo Block
Smart Styles Help Style the Caption
Smart Style Options for Multi-line Captions
Dimensions and Container Sizing Options
Dimension Options for the Photo Block
Caption Container Sizing Options
Remove Button in the Caption Block Toolbar
Demo of Removing a Caption
Advanced Caption Options
Global Style Options in the Caption Advanced Panel