Image Grid

4 min read Updated

The Image Grid widget shows a set of images in a responsive grid. You can set the image size, spacing and alignment, and show a title with each image.

Requirements

To use this widget, go to PluginsSiteOrigin Widgets and activate Image Grid.

You can use the Image Grid widget in three places:

Page Builder: Add the SiteOrigin Image Grid widget to a Page Builder layout in the Classic Editor or in the SiteOrigin Layout block.
Block Editor: Add the SiteOrigin Image Grid block. It is in the SiteOrigin category of the block inserter.
Widget areas: Add the widget to any theme or plugin widget area.

The widget form has two sections: Images and Settings.

The Image Grid widget form with the Images repeater

Images

Click Add to add an image. Click an image to open it. Use the icons on the right of an image to duplicate or delete it.

Image
Choose an image from the Media Library, or enter an external image URL.

Image title
The title that shows with the image when Display Image Title is on. If you leave it empty, no title shows. The image’s title attribute, which the Premium Image Overlay and Tooltip use, then falls back to the Media Library caption, or to the image title unless that title is the file name.

Alt text
A text alternative for screen readers.

URL
Makes the image a link.

Open in new window
Opens the URL in a new tab. Default: off.

Settings

Image size
The image size to load. The list shows Full and the sizes your site registers. Choose Custom Size to enter a Width and Height. Default: Full.

At the moment, Custom Size limits the displayed images correctly only when Width and Height are equal. For other proportions, use a standard size with the maximum settings below.

Maximum image height
The largest height, in pixels, of each image. Hidden when Image size is Custom Size.

Maximum image width
The largest width, in pixels, of each image. Hidden when Image size is Custom Size.

Image padding
The space around each image: top, right, bottom and left. Default: 5px on each side.

Image vertical alignment
Top, Center or Bottom. Applies when image heights differ. A new widget shows Top.

Grid horizontal alignment
The alignment of the grid: Left, Center or Right. Default: Center.

Display Image Title
Show each image’s title. The title settings below appear when this is on. Default: off.

Title Position
Above Image or Below Image. Default: Below Image.

Title Alignment
Left, Center or Right. Default: Center.

Title Font
Default: Use theme font.

Title Font Size
Default: 0.9rem.

Title Color
The title text color.

Title Padding
The space around the title: top, right, bottom and left. Default: 5px 0px 10px 0px.

Image Grid settings with Display Image Title enabled

An image grid with titles on the front end

SiteOrigin Premium

SiteOrigin Premium adds these features to the Image Grid widget:

  • Multiple Media: select several images at once to add them all to the grid.
  • Lightbox: adds a Lightbox section. Enable Lightbox opens images in a lightbox and overrides the image URLs. Album name groups images from several widgets into one lightbox. Disable caption for this lightbox hides the captions.
  • Image Overlay: shows each image title over the image. The addon turns the overlay on for this widget by default. Use Enable Image Overlay (Use global setting, Enabled or Disabled) and Overlay Theme in the Image Overlay section to change it.
  • Tooltip: shows each image title in a tooltip. It is off for this widget by default. Set Enable Tooltip to Enabled in the Tooltip section, and choose a Tooltip Theme.

Premium Lightbox settings in the Image Grid widget

Lazy Loading

The Image Grid hides its images until they load, then shows them. Some lazy loading plugins stop this from working. If images don’t appear, exclude this CSS class in your lazy loading plugin:

sow-image-grid-image_html

Advanced Customizations

Add PHP snippets with a plugin such as Code Snippets, or in a child theme’s functions.php file.

Change how many images load without lazy loading

The Image Grid uses the WordPress loading optimization. WordPress doesn’t lazy load the first images in the page content. This WordPress filter sets how many. The default is 3.

add_filter( 'wp_omit_loading_attr_threshold', function( $omit_threshold ) {
	return 2;
} );