WordPress Block Editor – Block Settings: Image
This tutorial is part of our series on using common block settings in the WordPress Block Editor Settings Section.
In this tutorial, you will learn how to customize a block’s image settings and properties.
For a complete understanding of how to use the WordPress Block Editor, see the other tutorials in this series:
- WordPress Block Editor: Block Settings
- How To Use The WordPress Block Settings Section
- How To Use WordPress Blocks
***
Block Settings – Image
Many types of blocks allow you to customize and edit their image settings and options.
Notes:
- Block types that support image properties must be selected in the content editor area to display image settings in the Block Settings panel.
- A block’s image settings may include additional options depending on which blocks you are using and what plugins and themes are installed on your site.
- If you need help using block settings, see this tutorial: WordPress Block Editor: Block Settings
Image Properties
The following settings and options in blocks that support images are available:
Alt Text (Alternative Text)
“Alternative text” or “alt text” is a brief, descriptive text that you add to an image to provide context and describe the content of the image for users who may be visually impaired and rely on screen readers, as well as search engines that use text-based algorithms to index and rank your web pages.
Alt text is important for users with disabilities because it enables them to understand the content of images on a website, which they might not be able to see otherwise. Screen readers, for instance, will read out the alt text to a visually impaired user to help them understand what the image is showing. Without alt text, these users may miss out on important information or be unable to navigate a site effectively.
In addition to its importance for accessibility, alt text is also important for SEO. Search engines use alt text to understand what an image is about and include it in their search results. This can improve the relevance of a page’s content to users who are searching for specific topics, increasing the likelihood that they will visit the site.
Adding an alternate image description in the Alt Text field, then, is useful for:
- Site visitors – if your image doesn’t load on your web page, people who can’t see the image can still get an idea of what the image is about, and
- SEO – Alt text descriptions help search engines index your images.
Image Size
The Image Size dropdown selector lets you choose the following default image sizes:
- Thumbnail
- Medium
- Large
- Full Size
You can preview the effect of choosing different image options live in the content editor.
Image Dimensions
Adjust the dimensions of your image by entering values into the following fields:
- Width – Enter a value for the width of your image.
- Height – Enter a value for the height of your image.
- Or click on one of the following preset sizes:
- 25%
- 50%
- 75%
- 100%
- Reset Button (Resets image to original size)
Once again, you can preview changes made to image dimensions live in the content editor.
Note: Images are responsive, so if you are working on a small screen or a minimized web browser, you may not see changes when selecting larger image sizes.
Remember to save your work after making changes to update your block’s settings.
Additional Image Settings
In this section, we’ll look at additional settings in blocks that support images.
To view or edit these additional image settings:
- Select the block.
- Select the Block settings panel to view the Settings option.
Selecting blocks like the Media & Text block, for example, brings up the following options:
Stack on mobile (on/off)
If the media and text in your block remain side-by-side, they may be too small to view on the narrow screens of mobile users.
Toggling this setting ‘on’ affects how the block displays your media and text elements to mobile users by stacking the media and text on top of each other for mobile devices.
By enabling the Stack on mobile option, the content on the left will show on top of the content on the right, providing a better experience for your mobile visitors.
Crop image to fill entire column
If your image does not fit the entire width and height of the area of the column it occupies, you can turn on this option to automatically crop the image so that it fills the entire column.
Once this option is toggled on, a colored circle will appear on top of the image in the right sidebar. This is called the Focal Point Picker (see next section). Click and drag the circle to select which section of the image will display centered after cropping.
Remember to save your work after making changes to update your block’s settings.
Media Settings
Selecting blocks like the Cover block brings up the following settings:
- Fixed background – This fixes an image so that it doesn’t scroll.
- Repeated background – The repeated background option lets you repeat the same image to form a pattern.
- Focal Point Picker – Select the main point of interest in your image.
Toggle the settings on or off to enable or disable them.
Let’s take a look at these options in more detail.
Fixed Background
A fixed background means the image scrolls along with your page.
Here’s an example with the option turned “on”…
And here is the same example with the setting turned “off”…
Note: This setting applies to images only and fixes a section of the image in the cover image background.
Repeated Background
The repeated background option lets you repeat the same image to form a pattern.
You can toggle this option “on” if you have a small image and you want it to repeat multiple times.
Notes:
- Use a small image to repeat it multiple times. The smaller the image, the more it will be multiplied.
- You can use the Repeated background toggle in combination with Fixed background, but the Fixed background option doesn’t have to be enabled.
- This setting applies to images only and repeats the image in the cover image background.
Focal Point Picker
The focal point picker lets you select the main point of interest in your image (or video background) and highlight it on your cover.
Note: This tool displays if the fixed background option is turned off and applies to both images and video backgrounds.
To use the Focal Point Picker tool, click and drag a region of the image, or enter coordinate percentages into the ‘Left’ and ‘Top’ fields to set the horizontal and vertical position manually.
Remember to save your work after making changes to update your block’s settings.
WordPress Block Editor Image Media Settings – FAQs
Here are frequently asked questions about WordPress Block Editor Image Media settings:
How do I adjust the default sizes of images in WordPress?
In your dashboard, go to Settings > Media. Here, you can set the dimensions for thumbnails, medium, and large size images to control how they appear by default across your site.
Can I prevent WordPress from cropping thumbnails?
Yes, under the Media Settings, you can uncheck the box for “Crop thumbnail to exact dimensions” to maintain the original aspect ratio of your images.
How do I add an image to a post or page using the Block Editor?
Use the Image block to insert images. You can upload files from your device or select images from the media library.
What settings are available for an Image block?
Within an Image block, you can adjust the image’s alignment, add a hyperlink, set alt text for accessibility, and choose between different styles such as default and rounded corners.
Can I resize images directly in the Block Editor?
Yes, you can manually resize images by dragging the corners of the image in the editor, or you can specify exact dimensions in the block settings.
How do I add a caption to an image?
Directly below the image in the Image block, you can add a caption that will display beneath the image on your site.
Is it possible to control the image’s display settings, like spacing and border?
Some themes and plugins offer advanced settings for image display, such as border, spacing, and shadow, but core WordPress does not include these settings by default.
Can I set a featured image using the Block Editor?
While you cannot set a featured image directly within a block, you can set or change the featured image in the document settings panel on the right-hand side of the editor interface.
***
Congratulations! Now you know how to adjust your block’s image settings.
Additional Block Settings
Click on a tutorial from the list below to learn about using other common block settings in the WordPress block editor.
***
For more tutorials in this series, go here:
- The WordPress Block Editor (Gutenberg)
- How To Use WordPress Blocks
- How To Use The WordPress Block Editing Toolbar
- How To Use The WordPress Block Editor Content Area
- How To Use The WordPress Block Editor Settings Section
- WordPress Block Editor: Block Settings
***
Updated: July 5th, 2024