Tweaking your images to make them look awesome
You’ve uploaded your image, but what now? It’s too big, too small, or cropped oddly.
In this lesson, we will show you how to add inline images to your WordPress page or post using the block editor, and how to adjust their alignment, sizing, fit, captions, and alt text. We will also show you how to add galleries and feature images to your WordPress content.
- Feature images
- Inline images
- Adding galleries
- Alignment, sizing, and fit
- Adding captions
- A note on image Alt Text
1. Feature images
Feature images are images that represent the main topic or theme of your page or post, and are usually displayed at the top of your content, or in the archive pages, RSS feeds, and social media shares. Feature images can help you create a more appealing and memorable impression of your content, and attract more attention and clicks. To add a feature image to your WordPress page or post, you need to use the Featured Image option in the sidebar of the block editor. Here are the steps to follow:
- Open the page or post where you want to add a feature image, or create a new one.
- Click on the Settings icon in the top right corner of the screen, or press Ctrl + Shift + , (comma) on your keyboard, to open the sidebar.
- Under the Document tab, scroll down to the Featured Image section, and click on the Set featured image button. If you already have a feature image, you will see a thumbnail of the image, and you can click on the Replace button to change it.
- You will see the Select or Upload Media prompt on the screen. You can either upload an image from your computer, or select an image from your media library. You can also drag and drop an image file into the prompt.
- Once you have added the image, you will see a preview of the feature image in the sidebar, and you can click on the Remove button to delete it.
2. Inline images
Inline images are images that are inserted into the content of your page or post, and are usually related to the text or topic of your content.
To add an inline image to your WordPress page or post, you need to use the Image block in the block editor. Here are the steps to follow:
- Open the page or post where you want to add an image, or create a new one.
- Click on the + icon in the top left corner of the screen, or in the content area where you want to insert the image, to open the block menu.
- Under the Media category, select the Image block. Alternatively, you can type /image in the content area and press Enter to add the Image block.
- You will see a placeholder for the image, with two buttons: Upload and Media Library. You can either upload an image from your computer, or select an image from your media library. You can also drag and drop an image file into the placeholder.
- Once you have added the image, you can adjust its settings and options in the block toolbar and the sidebar.
3. Adding galleries
Galleries are collections of images that are displayed in a grid or a carousel, and are usually used to showcase multiple images related to the same topic or theme. Galleries can help you save space and create a more attractive and interactive presentation of your images. To add a gallery to your WordPress page or post, you need to use the Gallery block or the Tiled Gallery block in the block editor. Here are the steps to follow:
- Open the page or post where you want to add a gallery, or create a new one.
- Click on the + icon in the top left corner of the screen, or in the content area where you want to insert the gallery, to open the block menu.
- Under the Media category, select the Gallery block or the Tiled Gallery block. Alternatively, you can type /gallery or /tiled gallery in the content area and press Enter to add the block.
- You will see a placeholder for the gallery, with two buttons: Upload and Media Library. You can either upload images from your computer, or select images from your media library. You can also drag and drop image files into the placeholder.
- Once you have added the images, you can adjust their settings and options in the block toolbar and the sidebar.
4. Alignment, sizing, and fit
Alignment, sizing, and fit are important aspects of image presentation, as they affect how the image looks and interacts with the rest of your content. You can adjust these settings using the block toolbar and the sidebar of the Image block. Here are some of the options you have:
- Alignment: You can align the image to the left, center, or right of the content area, or make it wide or full width. You can also align the image with the text using the inline option.
- Sizing: You can resize the image by dragging the blue handles at the corners of the image, or by entering a custom width and height in the sidebar. You can also choose a predefined size from the dropdown menu in the sidebar, such as thumbnail, medium, large, or full size.
- Fit: You can change how the image fits into the given space by cropping or scaling it. You can crop the image by clicking on the crop icon in the block toolbar, and then dragging the blue handles to adjust the visible area of the image. You can scale the image by selecting the scale option in the sidebar, and then choosing a percentage from the slider or the input box.
5. Adding captions
Captions are short texts that describe or explain the image, and are usually displayed below the image. Captions can help the users and the search engines understand the context and meaning of the image. To add a caption to your image, you need to use the caption field in the Image block. Here are the steps to follow:
- Click on the image that you want to add a caption to, or select the Image block in the block list.
- You will see a caption field below the image, with a placeholder text that says “Write caption…”. Click on the caption field and type your caption text. You can also format your caption text using the formatting toolbar that appears above the caption field.
- You can also add a caption to your image from the sidebar, by clicking on the Advanced tab, and then entering your caption text in the Caption field.
6. A note on image Alt Text
Alt text, or alternative text, is a text description of an image that is displayed when the image cannot be loaded or viewed, or when the user is using a screen reader or a browser that does not support images.
Alt text can help the users and the search engines understand the content and purpose of the image, and improve the accessibility and SEO of your website.
To add alt text to your image, you need to use the Alt Text field in the sidebar of the Image block. Here are the steps to follow:
- Click on the image that you want to add alt text to, or select the Image block in the block list.
- Click on the Settings icon in the top right corner of the screen, or press Ctrl + Shift + , (comma) on your keyboard, to open the sidebar.
- Under the Block tab, scroll down to the Alt Text field, and enter your alt text. You can also add alt text to your image from the media library, by clicking on the Edit button in the block toolbar, and then entering your alt text in the Alt Text field in the media library.
- The alt text should be concise, descriptive, and relevant to the image and the content. It should not include unnecessary words, such as “image of” or “picture of”, or repeat the information that is already provided in the caption or the text.
And you’re done!
And that wraps up your WordPress Editor course. Feel free to come back and dip in any time you need a refresher.
Ready to learn? Let’s do this! Mark this lesson as complete using the checkbox below ⬇️, then move onto adding news to your website.
