Image
A single image with alt text, caption, link and lightbox.
The Image widget shows one picture from your media library (or from a URL), with alt text, an optional caption and an optional link or lightbox. It serves responsive image files, so phones download smaller versions, and it lazy-loads by default.
Add an image
Insert it
Open Insert in the left panel, find Image under Basic (or type
imagein Search widgets) and click it or drag it onto the canvas.Choose the picture
Click Choose image in Content → Image and pick or upload a file in the media library. Use a URL takes an image address instead.
Describe it
Check the Alt text: it comes from the media library, and you can override it here. Turn on Decorative for images that carry no information.
Add a caption or a link
Set Caption to From media library or Custom, and Link to Image file (lightbox) to open the full image in a lightbox.
With AI set up in Urmi → AI & MCP → AI writing, the image field also offers Write alt text with AI (with AI writing) and Generate with AI (with AI images). See AI writing and AI images.
Settings
Settings marked Per device can differ on desktop, tablet and mobile (see Responsive editing). The image, alt text, caption and URL support dynamic tags, for example the featured image in a template (see Dynamic tags).
Content tab
| Setting | What it does |
|---|---|
| Image | The image. Choose one from the media library, upload a new one, or use a URL. With AI images set up, Generate with AI creates one. Supports dynamic tags. |
| Decorative | For flourishes that add no information, such as dividers or background art. Screen readers skip a decorative image. |
| Alt text | Describes the image for screen readers and search engines. Overrides the alt text from the media library. Write alt text with AI suggests one when AI writing is set up. Shown when Decorative is off. Supports dynamic tags. |
| Resolution | The image size WordPress serves. Smaller files load faster; pick one at least as wide as the image is shown. Default: Large. |
| Caption | Shows no caption, the caption from the media library, or your own text. Options: None, From media library, Custom. |
| Custom caption | Your caption text. Shown when Caption is Custom. Supports dynamic tags. |
| Link | Links the image to nothing, to the full image in a lightbox, or to a URL. Options: None, Image file (lightbox), Custom URL. |
| URL | Where the image links to. Shown when Link is Custom URL. Supports dynamic tags. |
| Loading | Lazy loads the image when it comes near the screen. Choose Eager, high priority for the main image at the top of the page (the hero), so it appears as fast as possible. Options: Lazy (default), Eager, high priority (hero image). |
| Alignment | Aligns an image that is narrower than its container. Options: Left, Center, Right. Per device. |
Design tab
| Setting | What it does |
|---|---|
| Width | Width of the image. Per device. |
| Max width | Largest width the image may take. Per device. |
| Height | Fixed height. Combine with Object fit to crop instead of stretch. Per device. |
| Aspect ratio | Crops the image to a fixed shape, such as 16:9 or 1:1. Per device. |
| Object fit | Cover fills the box and crops, Contain fits the whole image, Fill stretches it. Options: Default, Cover, Contain, Fill. Per device. |
| Object position | Which part of the image stays visible when it is cropped. Shown when Object fit is Cover or Contain. |
| Border radius | Rounds the corners of the image. Per device. |
| Border | Border of the image. |
| Shadow | Shadow of the image. |
| CSS filters | Blur, brightness, contrast, saturation and hue. |
| Hover effect | An effect when the pointer is over the image. Options: None, Zoom, Lift, Grayscale to color, Dim. |
This section shows when Caption is set.
| Setting | What it does |
|---|---|
| Typography | Text style or font, size, weight and spacing of the caption. |
| Color | Color of the caption. |
| Spacing | Space between the image and the caption. |
Every element also has these sections at the end of the Design tab.
| Section | What it does |
|---|---|
| Spacing & position | Margin, padding, width, alignment in its container, order, position (relative, absolute, fixed), offsets, z-index and global classes. See Spacing, size & position. |
| Background & border | Background, border, border radius, box shadow, overflow and opacity of the whole element. See Colors & backgrounds and Borders & shadows. |
| Mask | Crops the element to a shape (circle, arch, blob, star…) or your own SVG or PNG. See Shape dividers & masks. |
Behaviour tab
The Behaviour tab is the same for every element.
| Section | What it does |
|---|---|
| Anchor & classes | An Anchor ID for #links and your own CSS classes. |
| Animations | Entrance, scroll, hover and loop animations from presets or your own timeline. See Motion & effects. |
| Motion & effects | A simple entrance animation, transforms (also on hover), CSS and backdrop filters, and sticky positioning. |
| Scroll & mouse effects | Movement, rotation, scale, fade and blur while the page scrolls, and pointer effects (follow the pointer, 3D tilt). |
| Visibility | Hide the element on desktop, tablet or mobile, or in dark or light mode. See Visibility. |
| Conditions | Show the element only when rules match, such as logged-in visitors, a date range or a URL parameter. See Display conditions. |
| Interactions | Show, hide or change other elements when this one is clicked, hovered or scrolled into view. See Interactions. |
| Attributes | Custom HTML attributes for this element. See Anchor, classes & attributes. |
Tips
- Write useful alt text. Describe what the image shows and why it matters (“Cedar House lounge with stone walls”), not “image of”. Accessibility checks list images without alt text.
- Hero images load first. For the main image at the top of a page, set Loading to Eager, high priority. Keep every other image on Lazy.
- Crop with aspect ratio. Design → Image → Aspect ratio plus Object fit → Cover gives a row of images the same shape without editing the files.
- Right file size. Pick a Resolution close to the displayed size; Full can be several megabytes. See Performance.
- Lightbox look. The lightbox's colors, captions, counter and download button are set once for the site, in Styles → Theme → Lightbox. See Lightbox & site behaviour.