Description
The Featured Image Block displays the main image representing a page or post, when displayed in a Query Block. It’s part of the Post Template Block child items that also include Post Title, Post Excerpt, Post Date, and Post Terms.
The featured image referenced here is the image that appears in thumbnail form in a Query Block, such as on a blog or services landing page. You have to set the image itself on each post, but can control aspects of how it looks in the Query Block using the Featured Image Block.
Screenshots
Settings
Link Settings
The ‘Link to Post’ toggle allows you to choose if a person can click the image to open the post or not. By default this is toggled off.
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 in the corresponding direction, 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.