--- title: Image (UB) Block description: "How to add and style images in WordPress with the free Ultimate Blocks Image (UB) block: aspect ratio, crop, circle and framed styles, border, caption and link." url: "https://ultimateblocks.com/docs/image-block/" updated: "2026-11-07" category: Media Blocks --- # Image (UB) Block 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 1. Open the post or page in the WordPress block editor. 2. Click the **+** (Block Inserter) button. 3. Search for **Image (UB)** and click the block to add it. 4. 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](https://ultimateblocks.com/docs/visibility-control/) (Pro): show the block only to certain users or on a schedule. - [Animation](https://ultimateblocks.com/docs/animation/) (Pro): animate the block when it comes into view. - [Responsive Control](https://ultimateblocks.com/docs/responsive-control/): hide the block on desktop, tablet or mobile. - [Custom CSS](https://ultimateblocks.com/docs/custom-css/): add your own CSS to this block only. - [Saved Styles](https://ultimateblocks.com/docs/how-to-save-a-style/) (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. ## Related docs - [Image Hotspots block (Pro)](https://ultimateblocks.com/docs/image-hotspots-block/) - [Image Slider block](https://ultimateblocks.com/docs/image-slider-block/) - [Video block](https://ultimateblocks.com/docs/advanced-video-block/) - [Responsive Control](https://ultimateblocks.com/docs/responsive-control/)