--- title: "How to Add a WordPress Image Box?" url: https://nexterwp.com/docs/add-a-wordpress-image-box/ date: 2024-12-11 modified: 2026-09-28 lang: en author: "Aditya Sharma" description: "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..." image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-a-WordPress-Image-Box_-1024x519.jpg word_count: 374 --- # How to Add a WordPress Image Box? ## Key Takeaways - Nexter Blocks Infobox block creates a WordPress image box by adding the block to a page and filling the Title and Description fields. - Infobox block lets the user choose Grid or Carousel from Select Layout, then select an appropriate style. - Infobox block uses Select Icon set to Image and an image added from the Image section to produce the image box. 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](https://nexterwp.com/docs/add-infobox-in-wordpress/).* [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-infobox/) ## 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. ![An infobox using an image](https://nexterwp.com/wp-content/uploads/2024/12/infobox-carousel-select-image-demo.webp) ![An infobox using a real photo instead of an icon](https://nexterwp.com/wp-content/uploads/2026/09/infobox-image-box-fe.webp) ## How It Behaves - The image renders in place of the icon — measured on a published page, one real `` 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. ## Related Docs - [Infobox feature guide](https://nexterwp.com/docs/add-infobox-in-wordpress/)- [Full box link](https://nexterwp.com/docs/add-a-full-box-link-to-the-infobox-in-wordpress/)- [Infobox carousel](https://nexterwp.com/docs/add-an-infobox-carousel-in-wordpress/)- [Advanced tab](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/) ## Frequently Asked Questions **Q: How do I add a WordPress image box without code?** A: An image box in Nexter Blocks is just an Infobox with the icon replaced by an image, so the setup stays simple. Add the Infobox block, switch Icon Type to Image, pick your image, set the render size, then fill in the title and description. That keeps the text and styling behavior of a normal Infobox while swapping the visual marker for a real image. **Q: What do I need before adding an image box in WordPress?** A: The Infobox block has to be available in Nexter Blocks, which works in the free edition and with Nexter Blocks Pro. The block also needs to be enabled under Nexter > Blocks in your WordPress dashboard. If it is not switched on there, you will not be able to build the image box at all. **Q: Why is my WordPress image box showing a huge image?** A: Image boxes render the size you select instead of shrinking a large file down in the browser, so oversized source images can look wrong fast. The fix is to choose a smaller registered image size and crop the source file to roughly square before uploading. That matters because square-ish images sit best where an icon would normally go. **Q: How do I stop layout shifts when image boxes load?** A: Layout shifts usually come from inconsistent image proportions across boxes. Using images with the same aspect ratio helps each box reserve similar space before everything finishes loading. That is especially important when you place several image boxes in a row, because uneven dimensions make the whole line jump around. **Q: Does an image box work like a normal Infobox link and style-wise?** A: The image only replaces the icon. Everything else stays like a normal Infobox, including the title, description, styles, and the full box link. That means you can treat it as a visual variation of the same block rather than a separate component with different behavior. **Q: What are the limits of using an image instead of an icon in an Infobox?** A: An image box is one image per box in the icon position, not a gallery or banner. There is no built-in cropping, so crop before uploading if you want clean proportions. It also weighs more than an icon box, so using six photographs in a row is a real page-weight decision.