Description
As the title suggests, the Image Block is used to insert an image into your page or post.
You might add an Image Block into a page or Container Block, or you could work with one within another block, such as a Query Block.
Screenshots
Settings
Image Configuration
Width and Height
This option sets the dimensions and units of the image in relation to the Container Block or page. Here’s more about Measurement Units.
Image Alt Text
This field is where you can set descriptive text for the image, to support accessibility and SEO requirements. Alt text should be a short description of the image – it is not a place for keyword stuffing, and it’s not a good idea to use tools that populate the alt text field using page titles or keywords. Alt text is read aloud by screen reader technology for those with vision impairments, to help them understand the image and context to your page.
Padding
These top, right, bottom, and left sliders, with a range from 0 to 12, control the amount of interior space there is between the edges of the Image Block and its contents, ie. the image itself. Adding padding can move the image around inside the Image Block, and even shrink how it appears. More about Padding.
Margin
These sliders, with a range from 0 to 12, control the amount of exterior space there is around the Image Block and adjacent objects. Each one controls the margins around the top, bottom, left, and right edges of the Image Block. More about Margins.
Image Layout
Border Radius
This value, using a percentage, rounds the corners of the image’s outer border edge.
Focal Point
This is a drag-and-drop interface to adjust what point within the image is centered, in relation to your Image Fit selection (below). You would use this if not all of your image displays due to the Image Fit – it’s not the same as editing a photo to create a sharp focal point.
Image Fit
This group of settings controls how the image is fit or sized.
- None: The image is displayed at its full size and dimensions.
- Contain: This setting scales the image as large as possible within its container, without cropping or stretching the image.
- Cover: This setting scales the image (while preserving its ratio) to the smallest possible size to fill the container (that is, both its height and width completely cover the container), leaving no empty space. If the proportions of the background differ from the element, the image is cropped either vertically or horizontally.
- Fill: This setting scales the image (WITHOUT preserving its ratio) to the smallest possible size to fill the container, leaving no empty space. If the proportions of the background differ from the element, the image is stretched either vertically or horizontally.
- Scale Down: This setting scales the image so that its proportions are maintained to fit the smallest dimension and leave the entire image visible at all times.
CSS Filters
These options are for customizing the uploaded image with an array of CSS adjustments that give you Photoshop-like filters, right there in WordPress.
- Blur: Adds a Gaussian-style blur effect to the image to make it less focused.
- Brightness: Increases the brightness of the image.
- Contrast: Increases the contrast ratio of the image.
- Grayscale: Make any uploaded image fully grayscale, or increase the grayscale ratio.
- Hue-Rotate: Adjusts the hue of an image along the colour wheel.
- Invert: Inverts the colour samples of the uploaded image to the opposite end of the colour wheel – for example, a red image would become green.
- Opacity: Makes the uploaded image more transparent, to allow underlying colours or images to show through.
- Saturate: Decreases the saturation to make the uploaded image more desaturated, all the way to grayscale.
- Sepia: Converts the uploaded image to sepia by percentages, giving it a warmer, more yellow/brown appearance.
Advanced
Additional CSS Class(es)
This allows you to enter a unique Class identifier, for custom CSS targeting within the theme to faciliate custom development. More about Theme Customizations.
It also enables the use of Foundry utility classes. More about Utility Classes.