Pink letters by Jason Leung

The arrival of Gutenberg has made some tasks easier than ever. Among them, there is the possibility of adding captions and alt texts to our images. If you still don’t know how to do this or you don’t even know what I’m talking about, don’t miss this tutorial for beginners!

Addings Captions and Alt Texts from the Editor

The first thing you have to do to add the caption and text to an image from the editor is obviously to add that image. To do this, just click on the button to add a new block and choose Image:

Insert Image Block
Insert image block.

Alternatively, another very quick way to add an image block (or any other type of block, for that matter) is to use Gutenberg shortcuts, which begin with /. Simply start writing /image and you’ll get some recommendations:

Shortcut to add an image block
Shortcut to add an image block.

With this, you will have an image block waiting for you:

Image block without specified image
Image block without specified image.

Suppose you upload the image from your computer or insert it from a URL. Right after you’ve done so, you will see that the image appears in your editor, along with an empty caption:

Image without caption
Image without caption. When you select the image block, the possibility of writing the caption appears below.

Just write the caption and you’re done. It’s that easy! ?

On the other hand, if what you want is to specify the alternative text of the image (that is, a textual description of the image, specially helpful for blind users), you can do it from the editor’s sidebar. Simply select the image block and the Image Settings section will show up. There, you’ll find an option to set its alternative text:

Additional image block options
The image block settings has an option to add the alternative text.

Addings Captions and Alt Texts from the Media Box

When you decide to add an image from the Media Library, what you see is the following dialog:

Dialogue to select an image from the gallery
Dialog to select an image from the gallery.

When selecting an image in this dialog, you’ll see Caption and Alt Text fields. Modify any of those and insert the image in your editor:

Image block with default caption
Image block with default caption.

You’ll see that the image already contains the Caption and the Alt Text you just specified. The difference between this method and the previous one is that this method stores the Caption and the Alt Text fields as information of the image itself. This way, each time we add that same image into a new post from the media library, the two fields will already be defined with these values as its default values.

If we want to change the Caption or the Alt Text of the image in a specific post, but maintain its default values for future additions, don’t tweak the values in the dialog and simply add the image. Once the image is in your post, you’ll be able to edit both fields as we’ve seen in the previous section, which only apply to the inserted image.

Adding Captions and Alt Texts from the Media Screen

As you well know, it is also possible to upload images to our Media Library outside the context of a post using WordPress’ Media menu:

Screen to upload new images to WordPress
Screen to upload new images to WordPress.

If you upload an image from there, or take a look at one you already have, you will see that you have the option to edit it. Editing an image from the Media Library opens a screen like the following:

Screen for editing an image of the media library
Screen for editing an image of the media library.

where, again, the fields to modify the Caption and the Alt Text of an image appear. Just tweak them as you please and you’ll have a new default caption and alternative text for that image.

Galleries

Finally, you can also add custom captions to all the images included in a gallery. Simply add a gallery block:

Insert a gallery block
Insert a gallery block.

select the images it contains:

Selection of images to create a gallery
Selection of images to create a gallery.

and then specify their captions:

Captions for gallery images
Captions for gallery images.

You can also tweak image captions once the gallery block has been inserted:

Editing the gallery in the editor itself
Edition of the gallery in the editor itself.

And that’s how you can add the caption and alt text to your images and galleries in the WordPress block editor. If you have any questions about it, remember that the comments section below is at your disposal 😉

Featured image by Jason Leung on Unsplash.

2 responses to “How to Add Captions and Alternative Texts to Your Images in WordPress”

  1. Varun Sharma Avatar
    Varun Sharma

    Thanks for sharing this amazing article. Your article is really informative and helpful for bloggers.

Leave a Reply

Your email address will not be published. Required fields are marked *

I have read and agree to the Nelio Software Privacy Policy

Your personal data will be located on SiteGround and will be treated by Nelio Software with the sole purpose of publishing this comment here. The legitimation is carried out through your express consent. Contact us to access, rectify, limit, or delete your data.