The Image (UB) block in Ultimate Blocks lets you add an image to any WordPress post or page and control its shape, size, crop, caption, link and border. It works much like the core WordPress Image block, but adds Circle and Framed styles and works with the Ultimate Blocks extensions. The block is free.
| Block name in the editor | Image (UB) |
| Plan | Free |
| Best for | Author photos, team pictures, framed screenshots and images you want to hide on some devices |
| Live demo | Live demo: not available yet |
What you can use it for #
- Show round author or team photos with the Circle style.
- Put screenshots or artwork in a frame with the Framed style.
- Crop images to the same shape, such as square or 16:9, so a row of images lines up.
- Hide a large image on phones and show a smaller one instead, with Responsive Control.
- Animate an image when it scrolls into view, or show it only to logged in users (Pro extensions).
How to add the Image (UB) block #
- Open the post or page in the WordPress block editor.
- Click the + (Block Inserter) button.
- Search for Image (UB) and click the block to add it.
- Click Upload, Media Library or Insert from URL to add your image.
Image (UB) vs the core Image block #
Most image settings are the same in both blocks: aspect ratio, scale, width, height, resolution, alt text, caption, link, crop and duotone. Here is when each one makes sense:
- Use Image (UB) when you want the Circle or Framed style, per side border and corner controls, Copy Style and Paste Style, or the Ultimate Blocks extensions (Responsive Control, Custom CSS, and in Pro, Visibility Control, Animation and Saved Styles).
- Use the core Image block for a plain image, or when you need features that Image (UB) does not have, such as the core block’s enlarge on click (lightbox) option.
Block toolbar #
- Align: set the image alignment, including wide and full width when your theme supports them.
- Add caption / Remove caption: show or remove a caption under the image.
- Link: link the image to the media file, the attachment page or a custom URL, and choose to open it in a new tab.
- Crop: open the image editor to crop the image right in the editor.
- Replace: swap the image for another one without losing your settings.
- Copy Style and Paste Style: copy the size, shape and border of one Image (UB) block to another.
Settings tab #
Select the block and open the Settings tab (gear icon). The Settings panel has these options:
- Alternative Text: describe the image for screen readers and search engines. Leave it empty only for decorative images.
- Aspect ratio: choose Original, Square – 1:1, Standard – 4:3, Portrait – 3:4, Classic – 3:2, Classic Portrait – 2:3, Wide – 16:9 or Tall – 9:16.
- Scale: shown when you pick an aspect ratio. Cover fills the space by clipping what does not fit. Contain fits the whole image in the space without clipping.
- Width and Height: set the size in pixels. Leave them on Auto to use the natural size.
- Resolution: select the size of the source image: Thumbnail, Medium, Large (default) or Full Size. Smaller sizes load faster.
Use the three dot menu on the panel to reset all values. The bottom of the Settings tab also has the Visibility Control (Pro), Animation (Pro), Custom CSS and Responsive Control panels.
Styles tab #
Switch to the Styles tab (half-circle icon) to change the look of the image.
Styles #
- Default: the image as it is.
- Circle: crop the image into a circle. Works best with a square image or the Square – 1:1 aspect ratio.
- Rounded: round the corners.
- Framed: add a frame around the image.
Border #
Set the Border width, style and color, and round the corners with Border Radius. You can set each side and corner separately.
Filters #
Apply a Duotone filter to give the image a two color effect.
Tip: You can turn an existing core Image block into Image (UB). Select it, click the block icon at the left of the toolbar and choose Image (UB). The image, alt text, caption, link and size carry over.
Extensions you can use with this block #
- Visibility Control (Pro): show the block only to certain users or on a schedule.
- Animation (Pro): animate the block when it comes into view.
- Responsive Control: hide the block on desktop, tablet or mobile.
- Custom CSS: add your own CSS to this block only.
- Saved Styles (Pro): save your design and reuse it on other posts.
Frequently asked questions #
Is the Image (UB) block free?
Yes. Image (UB) is part of the free Ultimate Blocks plugin. Only the Visibility Control, Animation and Saved Styles extensions need Ultimate Blocks Pro.
What is the difference between Image (UB) and the core Image block?
Both have similar image settings. Image (UB) adds Circle and Framed styles, per side border controls, Copy Style and Paste Style, and the Ultimate Blocks extensions, while the core block offers its own extras such as enlarge on click.
How do I make a round image in WordPress?
Add the Image (UB) block, set the Aspect ratio to Square – 1:1, then choose the Circle style in the Styles tab.
How do I crop an image in the Image (UB) block?
Click Crop in the block toolbar to crop the image, or pick an aspect ratio in the Settings tab to crop it to a fixed shape.
Can I link an image to another page?
Yes. Click the link button in the block toolbar and enter a URL, or link to the media file or attachment page.
