Featured Image
The featured image of the current post, with an aspect ratio, a link, a caption and a fallback.
On this page
The Featured Image widget shows the featured image of the post being viewed. Use it in your blog post template, where each post gets its own picture, and in Loop item cards, where each card shows its post's image.
Where the image comes from
The image is the Featured image you set when you edit a post in WordPress (in the post sidebar). Its alternative text and caption come from the media library. For posts without a featured image, the widget shows the Fallback image, or nothing.
In the editor, the widget shows the image of the post chosen in Preview with on the Template tab of the left panel (the latest post when it is empty).
Add a Featured Image
Open your blog post template, or a Loop item, in the Theme Builder. Then open Insert in the left panel, find Featured Image in the Site & theme group (or type "featured" in the search box) and drag it where the image should go. See Add elements.
To give every image the same shape, whatever its original size, set an Aspect ratio in the Design tab, such as 16:9, and keep Object fit on Cover. Use Focus point to choose which part stays visible when the image is cropped.
Content tab settings
| Setting | What it does |
|---|---|
| Resolution | Which image size WordPress sends: Thumbnail, Medium, Medium Large, Large, 1536x1536, 2048x2048 or Full. Default: Large. |
| Fallback image | Shown when the post has no featured image. |
| Link | None, The post (useful in cards), Image file (lightbox) (opens the full image in the lightbox) or Custom URL. |
| URL | The link address. Shown for Custom URL. Supports dynamic data. |
| Show caption | Shows the image caption from the media library under the image. |
| Loading | Automatic (WordPress decides), Lazy or Eager, high priority (hero image). Use Eager for a large image at the top of the page, so it appears as fast as possible. |
| Alignment | Left, Center or Right. Can differ per device. |
Design tab settings
| Section | Settings |
|---|---|
| Image | Width, Max width, Height, Aspect ratio (Original, 1:1, 4:3, 3:2, 16:9, 21:9, 3:4, 4:5 or 2:3), Object fit (Cover, Contain or Fill), Focus point, Border radius, Border, Shadow, CSS filters, Hover effect (None, Zoom, Lift, Grayscale to color or Dim). |
| Caption | Typography, Color, Alignment, Spacing. Shown when Show caption is on. |
The Design tab also has the sections every element shares: Spacing & position, Background & border and Mask. See Spacing, size & position.
Behaviour tab
The Behaviour tab has the settings every element shares: anchor and classes, entrance animations, motion effects, visibility per device, display conditions and interactions. A display condition on Featured image can hide a whole section for posts without one. See Display conditions.
Tips
- Upload featured images at least as wide as the widget is on a large screen, so they stay sharp.
- The lightbox's look is set once for the whole site in the Design System. See Site behaviour.