An icon says “delivery” in the abstract. A photograph of the thing itself, or an illustration drawn for your brand, says it specifically.
An image box is an ordinary Infobox with its icon replaced by an image of your choosing.
For every Infobox setting in one place, see the Infobox feature guide.
Before You Start
- Edition: Free — the Infobox block works in Nexter Blocks (free) and with Nexter Blocks Pro.
- Block to enable: Infobox, switched on under Nexter > Blocks in your WordPress dashboard.
Steps
- Add the Infobox block.
- Set Icon Type to Image.
- Choose your image and set the size it should render at.
- Fill in the title and description as usual.
How It Behaves
- The image renders in place of the icon — measured on a published page, one real
<img>element inside the box. - Everything else about the box is unchanged: title, description, styles and the full box link all behave the same as with an icon.
- Set real alt text on the image in the media library. The box does not write alt text for you, and a decorative-looking image with no alt is invisible to screen readers.
- Image size is chosen from the registered sizes, so pick one close to the display size rather than scaling a large file down in the browser.
Limitations
- One image per box, in the icon’s position — it is not a gallery or a banner.
- A tall or wide image will change the box’s proportions; square-ish images sit best where an icon would.
- Image boxes weigh more than icon boxes; a row of six photographs is a real page-weight decision.
- There is no built-in cropping — crop before uploading.
Troubleshooting
My image is huge
Choose a smaller registered image size, and crop the source file to roughly square before uploading. The box renders the size you select rather than fitting it for you.
The image is not showing
Check Icon Type is set to Image and that an image is actually selected — with the type set to Icon, the image field is ignored.
The layout shifts when the page loads
Use images of a consistent aspect ratio across boxes so each one reserves the same space.
