In this article, you can learn:
This article describes how to change the size of an image on a page/post using WordPress. It also provides the steps to take to add an image to a page/post using an image block. You can also learn more about additional image block settings that are available.
Are you ready to unleash the full power of WordPress? Be sure to check out the many features WordPress Hosting by InMotion Hosting includes and host your customized website in an environment developed for optimal performance.
How to Add an Image Block
Images are a great way to visually draw users into your content and maintain their engagement. WordPress makes managing the content of your website, including images simple. The steps below will guide you through adding an image to your page or post using an image block.
- Log into your WordPress dashboard.
- Navigate to the page or post that you would like to add an image to.
- Click on the + icon in the top left of the editor.
- Type image in the block search field. Then, click on Image to insert an image block.
- Click on Media Library to insert the image from your media library.
- Click on the image you want to add then click the Select button.
Now, your image displays on your page/post. Read on to learn how to change the dimension of your image.
How to Change the Image Size
An image block allows you to easily modify the appearance of images on your website. Follow the steps below to learn how to change the size of an image on a page/post using WordPress.
- Log into your WordPress dashboard.
- Navigate to the page or post containing the image you would like to change the size of.
- Click on the image.
- Select the options that you want from the Image Settings. You can refer to the table below for a brief description of what settings affect the image size.
NOTE: If you do not see these settings, click on the cog button in the upper-right to open the Block settings pane.
- Click the Update button to save your changes.
| Image Setting | Description |
|---|---|
| Alt Text | This text field allows you to enter a description of the image. A screen reader, for example, will read aloud the alt text to users that enable accessibility features. |
| Image Size | This drop-down menu allows you to select which size the image should be displayed. Options include (from smallest to largest): Thumbnail, Medium, and Full Size. |
| Image Dimensions | This setting allows you to select the value of the height and width and maintains the image’s aspect ratio. You can also select from the percent (%) options. NOTE: The percentage applies to the image size option selected. |
Now that you know how to change the size of an image in a WordPress page/post, you can create more dynamic content. Read on to learn the additional image block settings that you can modify.
Additional Image Block Settings
WordPress is great at simplifying the management of your content, including images. In the previous section, we described the Image Settings available for image blocks. In this section, you can learn more about the advanced ways you can customize your images.
Link Settings
By default, the drop-down menu labeled Link to is set to None. In this case, the image is not clickable.
Alternatively, the Link Settings allow you to control what clicking on the image does. For instance, you can select the Media File option. This redirects the user to a page that displays the image as it appears on the server when they click on it.
The Attachment Page option redirects the user to the page that displays the image as an attachment. This is a more secure option because the URL will not display the path to the file on your server. This also allows users to comment on the image, as long as comments are enabled.
The last option: Custom URL allows you to enter any URL you want to redirect the user to when they click on the image. If you select this option, you will need to enter the entire URL into the Link URL field.
Regardless of which option you select, the following table lists the additional options and a brief description of each one.
| Link Setting | Description |
|---|---|
| Open in New Tab | By default, this setting is disabled. Click the toggle to enable it if you want the link to force a new tab open. Otherwise, the link will open according to the user’s browser settings. |
| Link CSS Class | If you are using a custom CSS class to design your links, you can define the class in this text field. |
| Link Rel | This text field allows you to enter the value for the rel attribute of an address (a) tag. The most common use for this attribute is for SEO purposes. |
Advanced
If you are using a custom CSS class to design your images, you can define the class in the Additional CSS Class field.
Now, you should be familiar with customizing image blocks to manage your user’s experience with images. If you want to learn more about customizing WordPress, be sure to check out our WordPress Education Channel.
