Showcase images in a responsive grid layout with custom size, spacing, alignment, and captions.
Requirements
To make use of this widget, go to PluginsSiteOrigin Widgets to activate the SiteOrigin Image Grid Widget.
The Image Grid Widget is ready to be used anywhere:
Page Builder: Insert widgets in Page Builder by SiteOrigin in either the Classic Editor or Page Builder Layout Block in the Block Editor.
Block Editor: 100% Block Editor compatible. Insert widgets using the SiteOrigin Widgets Block featuring a live widget search form.
Theme and Plugin Widget Areas: Insert widgets into any theme or plugin widget area.
Images
Click the Add link to begin adding your first image. Click the down arrow icon to edit an image, the page icon to edit a slide and finally, the cross icon to delete an image. When click the down arrow icon to edit, you’ll find the following settings:
Image
Use the Choose Media, Image Search or External URL fields to add a background image.
Image Title
Optionally enter an image title.
Alt Text
The alt attribute provides alternative information for an image if a user, for some reason, can’t view it (because of a slow connection, an error in the src attribute, or if the user uses a screen reader).
URL
To link the image, enter a URL into the field provided.
Open in new window
Enable to open the above link in a new window.
Settings
Image Size
Choose the image size to be used. This field will display all available image sizes created by WordPress, plugins and your theme.
Maximum Image Height
Optionally enter a maximum image height.
Maximum Image Width
Optionally enter a maximum image width.
Image Padding
Enter the Top, Right, Bottom, and Left image padding values. Defaults to 5px.
Image Vertical Alignment
Select the image vertical alignment. Choose between Top, Center, and Bottom. Applied if image heights differ.
Grid Horizontal Alignment
Select the alignment of the overall image grid. Choose between Left, Center, and Right.
Display Image Title
Enable to display the title of each image. If Image title is enabled, the following settings will be available:
Title Position
Choose between Above image and Below image.
Title Alignment
Choose between Left, Center, and Right.
Title Font
Select the title font family.
Title Font Size
Enter the title font size.
Title Color
Select the title font color.
Title Padding
Enter the Top, Right, Bottom, and Left title padding values. Defaults to 5px.
Lightbox
Enable Lightbox
This will override the destination URL. The image will open in a lightbox when clicked on. The Lightbox Addon is available as part of SiteOrigin Premium.
Album Name
If the Enable Lightbox setting is enabled, this setting will appear. Images with the same album name will be displayed together.
Disable Caption for This Lightbox
If the Enable Lightbox setting is enabled, this setting will appear. Enable to disable the lightbox image captions.
Image Overlay
The Image Overlay addon is available as part of SiteOrigin Premium.
Enable Image Overlay
The following options are available: Use global setting, Enabled or Disabled.
Overlay Theme
The following options are available: Use global setting, Light or Dark.
Tooltip
The Tooltip addon is available as part of SiteOrigin Premium.
Enable Tooltip
The following options are available: Use global setting, Enabled or Disabled.
Tooltip Theme
The following options are available: Use global setting, Light or Dark.
Excluding Image Grid Images From Lazy Loading
Lazy loading plugins can interfere with the correct loading of the Image Grid. To exclude the Image Grid images from being lazy-loaded you can add the following to your lazy loading plugin’s CSS class name exclusion field.
sow-image-grid-image_html
Advanced Customizations
siteorigin_widgets_image_grid_lazy_load
Exclude an Image Grid Widget image from lazy loading using the siteorigin_widgets_image_lazy_load filter. Replace 6119 with the ID of the widget you’d like to exclude.
add_filter( 'siteorigin_widgets_image_grid_lazy_load', function( $lazy, $instance, $widget ) {
return $instance['image'] !== 6119 ? $lazy : '';
}, 10, 3 );
wp_omit_loading_attr_threshold
The SiteOrigin Image and Image Grid Widgets use wp_get_loading_attr_default to prevent lazy loading above the fold. wp_omit_loading_attr_threshold can be used to adjust how many images are excluded from lazy loading. The below example will exclude the first two images on the page from lazy loading.
add_filter( 'wp_omit_loading_attr_threshold', function( $omit_threshold ) {
return 2;
} );