How to create responsive image galleries in WordPress

Upload appropriately sized images to the Media Library before building the gallery. WordPress creates several image sizes and can add srcset and sizes attributes so browsers can select a suitable file for the available screen size.

Give each image useful alternative text in the Media Library or gallery editor. Avoid uploading enormous originals when a smaller source will do, because a gallery with many full-size images can make mobile pages slow.

Edit the page or post, select the block inserter, search for Gallery, and choose the Gallery block. Select images from the Media Library or upload new ones, then drag them into the order you want. WordPress automatically arranges the selected images into a gallery layout.

If the gallery should update whenever new images are attached to the post, use the attached-images option where your editor provides it. For a fixed portfolio or project gallery, select the images manually.

Select the gallery itself, rather than one image inside it, and adjust the column count in the block settings. Start with three columns on desktop and reduce the number if the thumbnails become too narrow. The Gallery block supports up to eight columns, subject to the number of images.

Choose a suitable image resolution. Thumbnail can look blurry when displayed at a larger width, while Large is usually a safer choice for a responsive gallery. WordPress’s responsive image markup can then offer a more suitable generated size to the browser.

Decide whether to enable Crop images to fit. Cropping makes rows line up neatly when photos have different shapes, but it can cut off faces, products or other important details. Turn it off for documentary, product or portrait galleries where showing the complete image matters.

For a larger view, set the gallery’s link option to Enlarge on click. This opens the image in a lightbox without sending visitors to another page. Check the result after publishing, because a cropped thumbnail can make the lightbox appear to crop the photo as well in some setups.

Preview the published page at desktop, tablet and phone widths. Look for horizontal scrolling, thumbnails that are too small to tap, clipped subjects, blurry images and captions that overflow their tiles. Some block themes and editors provide separate desktop, tablet and mobile column controls; use them when they are available.

If the gallery still stays at an unsuitable width, inspect the theme’s spacing and container settings before adding custom CSS. A theme rule that forces a fixed width or aspect ratio is a common reason a gallery looks different on the front end from the editor. Clear any page cache after changing gallery settings.

The built-in Gallery block is fine for a straightforward grid with responsive image loading and a basic lightbox. Use a dedicated gallery plugin when you need more control over responsive layouts, galleries managed separately from page content, advanced lightboxes or drag-and-drop placement.

Envira Gallery is a practical option for visual sites built with Beaver Builder. It provides drag-and-drop galleries inside Beaver Builder, responsive layouts and lightboxes, so you can create and insert the gallery without writing custom layout code. Create the gallery in the plugin, configure its responsive settings, then place it in the page with the available Beaver Builder module.