Simple Masonry

The SiteOrigin Simple Masonry widget allows you to build a custom masonry layout.

Requirements

To make use of this widget, go to PluginsSiteOrigin Widgets to activate the SiteOrigin Simple Masonry Widget.

The Simple Masonry 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.

Settings

Please note: The default values for the Column span and Row span settings are 1. If all images are left at the defaults, your layout won’t display as masonry. An example layout might apply the Column span and Row Span settings as follows:

Image 1: Column Span = 1 Row Span = 2
Image 2: Column Span = 1 Row Span = 1
Image 3: Column Span = 1 Row Span = 1
Image 4: Column Span = 1 Row Span = 2

In this example, we’ve only adjusted the Row span setting for each image. The result is as follows:

Once editing the Masonry Widget, you’ll find the following fields available:

Images

Here you’ll add your masonry images. Use the Add button to add as many items as you need in your masonry layout. On the right of each item you’ll find three icons. The down arrow opens the item, the page icon duplicates the item and the cross icon deletes the item.

Image Item Settings

Image
Use the Choose Media or Image Search button to add your image.

Column span
Drag the slider to select the number of columns this image should span. This setting is limited to the number of columns selected in the Layout section.

Row span
Drag the slider to select the number of rows this image should span. This setting is limited to the number of columns selected in the Layout section.

Title
Optionally, enter an image title.

Destination URL
To link the image, enter a destination URL.

Open in a new window
Enable to open the above URL in a new window.

Desktop Layout

Use these settings to define the masonry layout settings for desktop resolutions.

Number of columns
Drag the slider to select the number of masonry columns on desktop resolutions.

Row height
Optionally set a row height. Leave blank to match calculated column width.

Gutter
Optionally set the space between masonry items.

Tablet Layout

Use these settings to define the masonry layout settings for tablet resolutions.

Resolution
Set the pixel resolution at which you’d like the tablet layout to begin. The default is 768.

Number of columns
Drag the slider to select the number of masonry columns on tablet resolutions.

Row height
Optionally set a row height. Leave blank to match calculated column width.

Gutter
Optionally set the space between masonry items.

Mobile Layout

Use these settings to define the masonry layout settings for mobile resolutions.

Resolution
Set the pixel resolution at which you’d like the mobile layout to begin. The default is 480.

Number of columns
Drag the slider to select the number of masonry columns on mobile resolutions.

Row height
Optionally set a row height. Leave blank to match calculated column width.

Gutter
Optionally set the space between masonry items.


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 Simple Masonry images. To exclude the Simple Masonry images from being lazy-loaded you can add the following to your lazy loading plugin’s CSS class name exclusion field.

sow-masonry-grid-image

Advanced Customizations

Remove the Simple Masonry images title tag. The below function assumes that an image title has not been set within each Simple Masonry Widget image item.

add_filter( 'siteorigin_widgets_auto_title', function( $status, $widget ) {
	if ( $widget == 'sow-simple-masonry' ) {
		$status = false;
	}
	return $status;
}, 10, 2 );