Earlier in this chapter, we learned how to add a simple image to a blog post. Let's now expand on that a bit more.
There are two main methods of adding an image to a blog post (of which we already know the first one):
- Either click on the + button in the top bar of the block-based editor,
- Or click on the image icon that's on the right-hand side of the last empty content block on the canvas, as seen in the following screenshot:
At this point, all you need to do in order to add an image to a post is either select it from the Media Library, Upload from your computer, or insert from URL. There are corresponding buttons for each of these methods. Additionally, you can drag and drop an image straight from your desktop.
Once your image finishes uploading, you'll see it added onto the post's canvas. At this stage, you can customize it some more by taking advantage of the options available in the image's pop-up menu, as seen in the following screenshot:
Starting from the left, we have the following:
- Change block type. This button lets you transform your image block to a gallery block, cover block, file block, or media and text block. Essentially, this feature is meant to show you other similar block types that might be more suited for the type of content you want to add. I encourage you to experiment with those to see what's possible.
- The next section of five icons is for tuning the image's alignment. The options available are align left, center, right, wide, and full width. While left, right, and center are pretty self-explanatory, the appearance of wide and full width depends on the theme you're currently using. Go ahead and experiment with those options to see what the effect is.
- The pencil icon allows for more in-depth editing of your image. Upon clicking it, you'll see the following screen:
The more important fields available here are Title, Alt Text, and Caption. Alt Text is a phrase that's going to appear instead of the image in case the file goes missing, or any other problems present themselves. Caption is a short description that you want to have displayed beneath the image itself.
- The last icon—the three vertical dots—is an icon that appears with all other content blocks as well, and it's not unique to the image block. It gives you additional options for what you can do with the block:
Additionally, if you want to, you can also write the caption for your image beneath the image itself, via a standard input box:
Remember that in order to save all the changes, you must save the post itself, either by clicking on the main Publish... button (but this will mean the changes get saved and go live too) or the Save Draft link that's next to it.