Content module

Image block

A responsive image with aspect-ratio cropping, hover effects, rounded corners, a caption and an optional link.

Overview

The Image block shows one picture. It can crop the image to a fixed aspect ratio (square, 4:3, 16:9 …) so several images line up, add a gentle hover effect (zoom or lift), round the corners, show a caption and link to any page. It always uses WordPress’s responsive image sizes, so phones download smaller files.

At a glance

Block name: wpbb/image
Module: Content
Find it by searching: Image
Loads JavaScript on the site: No

When and why to use it

Photos and illustrations in content.
Rows of images that should share the same shape.
Clickable images that lead to a page or a case study.

Example scenarios

Team page: portraits cropped to 1:1 with rounded corners.
Portfolio: 4:3 project images with the zoom hover effect linking to each project.

See it in action

These are live examples: real Image blocks rendered by WordPress with the plugin’s own styles and scripts. Use the buttons to see how they adapt to tablet and phone screens.

Aspect ratios and hover effects — Point at the images to see Zoom and Lift.

Open in a new tab

How to add the Image block

Open the editor. In your WordPress dashboard go to Pages (or Posts) and click the page you want to edit, or click Add New. For headers, footers and templates, use Appearance → Editor (block themes).
Add a new block. Click the blue + (Block Inserter) button in the top-left corner, or the small + that appears where you want the block. You can also type / on an empty line.
Search for the block. Type Image in the search field. Brigade Blocks appear in the Brigade Blocks category and show the coral block icon.
Insert it. Click Image in the results. The block appears with an upload area.
Configure the content. Click Upload to add a new image, or Media Library to choose one you already uploaded. Then add a caption on the block and use the Settings tab for the options below.
Customise the design. Switch to the Styles tab (half-filled circle icon) to change colours, spacing, borders and more — see Design & styling.
Save or publish. Click Save draft to keep working later, Preview to check it, or Publish / Update to make it live.

Content settings

You set up this block in two places: on the block itself in the editor, and in the Settings tab (gear icon) of the sidebar on the right. Every option is listed below, with its default value.

On the block (in the editor canvas)

Image

What it does: The picture to show.
What to enter or choose: Any image in your Media Library, or a new upload.
Default: Empty
How to use it: Click the button to open the Media Library, then upload a new file or pick an existing one and click “Select”.
When to use it: Always — the block shows nothing without an image.
Example: A product photo.
Result: The image appears, using the chosen Resolution.
Good to know: To change it later, click Replace in the block toolbar.

Caption

What it does: An optional line of text below the image.
What to enter or choose: A short description or credit.
Default: Empty
How to use it: Click the text in the block on the page and type. Use the block toolbar for bold, italic and links.
When to use it: For credits, dates or explanations.
Example: “Our studio in Lisbon, 2025.”
Result: A small caption appears below the image. Empty captions are not shown.

Settings panel: Image

Alternative text

What it does: A text description of the image for people who cannot see it (and for search engines).
What to enter or choose: A short sentence describing what matters in the image.
Default: Empty
How to use it: Type into the text field. Changes appear in the preview right away.
When to use it: Always, unless the image is purely decorative.
Example: “Two designers sketching a website layout on paper.”
Result: Screen readers read this text; it also shows if the image fails to load.
Good to know: Leave it empty only for decorative images. It is filled from the Media Library when you choose the image.

Resolution

What it does: Which of the image sizes WordPress created on upload is used (for example Thumbnail, Medium, Large or Full Size).
What to enter or choose: One of the sizes available for the chosen image.
Default: large
How to use it: Open the dropdown and pick an option.
When to use it: Pick the smallest size that still looks sharp at the width the image is shown. Large suits most content; Full Size is only needed for very wide images.
Example: “Medium” for an image shown in a narrow column.
Result: Smaller sizes make the page load faster; too small looks blurry.
Good to know: Only shown once an image is chosen.

Aspect ratio

What it does: Crops the image to a fixed shape.
What to enter or choose: One of: Original, 1:1, 4:3, 3:2, 16:9, 3:4.
Default: Original
How to use it: Open the dropdown and pick an option.
When to use it: When several images should line up, or to fit a tall photo into a wide space.
Example: 1:1 for profile pictures.
Result: The image is cropped from the centre to the chosen shape. Original keeps the real shape.

Max width (px, 0 = fill)

What it does: Limits how wide the image can get.
What to enter or choose: A number from 0 to 1600 (px), in steps of 10.
Default: 0 px
How to use it: Drag the slider, or type a number in the box next to it.
When to use it: For logos, icons or small images that should not stretch across the column.
Example: 240 for a partner logo.
Result: The image is never wider than this; 0 means it fills the column.

Hover effect

What it does: A small animation when the pointer is over the image.
What to enter or choose: One of: None, Zoom, Lift.
Default: None
How to use it: Open the dropdown and pick an option.
When to use it: For clickable images, to show they can be clicked.
Example: Zoom on portfolio images.
Result: Zoom enlarges the picture slightly inside its frame; Lift raises the whole image with a shadow.
Good to know: Animations are reduced for visitors who prefer less motion.

Rounded corners

What it does: Rounds the corners to the design’s standard radius (6px).
What to enter or choose: On or off.
Default: On
How to use it: Click the switch to turn it on (blue) or off.
When to use it: Keep it on for the Donix look; turn off for full-bleed or technical images.
Example: Off for a screenshot that should keep its edges.
Result: Corners become square or rounded.

Settings panel: Link

Link

What it does: The page the image goes to when clicked.
What to enter or choose: A web address (https://…) or a page, post or file on your site. Start typing a page title to search your site.
Default: Empty
How to use it: Click the link button, then paste an address or search for a page on your site and press Enter.
When to use it: Almost always — a call to action should lead somewhere.
Example: Type “Contact” and pick your Contact page, or paste https://example.com/pricing.
Result: The image becomes a real link.
Good to know: Two extra switches appear once a link is set.

Open in new tabShown when a link is set

What it does: Opens the link in a new browser tab.
What to enter or choose: On or off.
Default: Off
How to use it: Click the switch to turn it on (blue) or off.
When to use it: For links to other websites or documents (PDFs) you do not want visitors to lose your page for.
Example: A link to your booking platform.
Result: The link gets target="_blank" and rel="noopener" for security, and screen readers hear “(opens in a new tab)”.
Good to know: Avoid it for normal links inside your own site — visitors can choose to open a new tab themselves.

Add rel="nofollow"Shown when a link is set

What it does: Tells search engines not to pass ranking credit to the linked page.
What to enter or choose: On or off.
Default: Off
How to use it: Click the switch to turn it on (blue) or off.
When to use it: For paid, sponsored or untrusted links.
Example: An affiliate link to a product.
Result: The link gets rel="nofollow". Visitors see no difference.

Design & styling

Select the block, open the Styles tab in the settings sidebar (the half-filled circle icon next to the gear) and use the three pickers at the top of the Style panel:

Element — which part of the block to style.
State — Normal, or a state such as Hover (only the states the part supports are offered).
Device — Desktop, Tablet or Mobile, for values that can differ per screen size.

Only panels that make sense for the chosen part and state are shown. The full meaning of every control is in the Styling Controls guide; below is exactly what Image offers.

Element: Image selected first

The image and its frame — border, corners, shadow, size and transparency.

Styles-tab controls for “Image”
Panel	Control	Per device	Available in states
Border	Border type	—	Normal, Hover
	Border	—	Normal, Hover
	Radius	Yes	Normal
Box Shadow	Remove shadow	—	Normal, Hover
Box Shadow	Shadow layers	—	Normal, Hover
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
Effects	Opacity (%)	Yes	Normal, Hover

States for this part:

Hover — When the mouse pointer is over it. (Touch screens have no hover; they show the normal style.)

Element: Block

The outer wrapper (spacing, position, visibility).

Styles-tab controls for “Block”
Panel	Control	Per device	Available in states
Spacing	Margin	Yes	Normal
Sizing	Width	Yes	Normal
	Max width	Yes	Normal
	Height	Yes	Normal
	Min width / Min height / Max height	Yes	Normal
	Block alignment	Yes	Normal
Position	Position	Yes	Normal
	Top / Right / Bottom / Left	Yes	Normal
	Z-index	Yes	Normal
	Overflow	Yes	Normal
Effects	State transition (ms)	—	Normal
Effects	Timing	—	Normal
Visibility	Show on Desktop / Tablet / Mobile	—	Normal

States: Normal only.

Element: Caption

The caption text.

Styles-tab controls for “Caption”
Panel	Control	Per device	Available in states
Typography	Font family	—	Normal
	Font size	Yes	Normal
	Weight	—	Normal
	Style	—	Normal
	Line height	Yes	Normal
	Letter spacing	Yes	Normal
	Letter case	—	Normal
	Alignment	Yes	Normal
	Decoration	—	Normal
Colors	Text	—	Normal
Spacing	Margin	Yes	Normal

States: Normal only.

Responsive settings

Brigade Blocks uses three screen sizes: Desktop (wider than 1023px), Tablet (600–1023px) and Mobile (599px and narrower). Tablet and Mobile values are optional: when empty, the value of the next larger screen is used.

In the Styles tab, pick the Device first; these controls can then have a different value for that screen size: Radius, Width, Max width, Height, Min width / Min height / Max height, Opacity (%), Margin, Block alignment, Position, Top / Right / Bottom / Left, Z-index, Overflow, Font size, Line height, Letter spacing, Alignment.

The Visibility panel (Styles tab, Normal state) can hide the block entirely on Desktop, Tablet or Mobile.

Advanced options

HTML anchor (Advanced section of the Settings tab) — a unique name such as pricing, so you can link straight to this block with #pricing at the end of the page address (for example from a menu).
Additional CSS class(es) (Advanced section) — for custom CSS from your theme or the Site Editor. Separate several classes with spaces.
Custom attributes (Advanced section) — add data-*, title, aria-label, aria-describedby, lang or dir attributes. See Custom attributes.
State transition (Styles tab → Effects, Normal state) — how smoothly hover and focus styles animate.
Width alignment (block toolbar) — Wide width, Full width, when your theme supports them.

How it works on your site

A standard <figure> with a responsive <img> (with srcset, so browsers pick the right size) and an optional <figcaption>. Images below the first screen are loaded lazily by WordPress. No JavaScript.

Accessibility

Always fill in Alternative text for meaningful images.
A linked image with empty alternative text gives screen-reader users no clue where the link goes — describe the destination.

Tips and best practices

Upload images at about twice the width they are shown for sharp results on high-resolution screens, but no bigger than needed.
Use the same Aspect ratio for images in a row.

Limitations and notes

Cropping is visual (CSS); the full image file is still downloaded at the chosen Resolution.

Troubleshooting

The image looks blurry.

Choose a bigger Resolution (for example Large or Full Size), or upload a larger original image.