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:
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:
With this, you will have an image block waiting for you:
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:
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:
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:
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:
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:
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:
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.
Nelio Popups
Fantastic plugin! It’s really easy to create popups as you’re already used to the editor, and all the options it has are really well crafted.
Juan Hernando
Galleries
Finally, you can also add custom captions to all the images included in a gallery. Simply add a gallery block:
select the images it contains:
and then specify their captions:
You can also tweak image captions once the gallery block has been inserted:
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.
Leave a Reply