Masonry Gallery

Activate Masonry Gallery Plugin

After installing the plugin it will need to be activated. To activate the plugin go to Plugins, locate the plugin, and select Activate.

Enabling Masonry Gallery

When activated a new tab will appear called Masonry Gallery.

The Masonry Gallery will need to be enabled. To enable the Masonry Gallery Settings plugin go to the General Settings tab, scroll to the bottom and find Default Gallery. Select Masonry Gallery and be sure to Save. This will enable the Masonry Gallery.

• When Masonry Gallery is selected it allows all galleries on the site to be converted to Masonry Gallery (as controlled by theme) automatically. If other gallery plugins exist such as Justified Gallery, those will be automatically converted into Masonry.

The way to keep galleries from being converted automatically is to use a shortcode. Any gallery with a shortcode will not be converted.

Shortcodes

A shortcode must be used on each gallery to specify which gallery “type” they should be.

For example, if the default gallery is Justified, galleries could be made Masonry by setting a shortcode parameter to Masonry: [ gallery=type “masonry” ids=”973, 968, 972, 971, 970, 969, 957″ ]

Masonry Gallery Settings

This is the settings page. Be sure to select Save at the bottom after making any changes. Selecting Reset to Defaults reverts all options to the default settings.

Columns – This option specifies the number of columns in a gallery. The default is three.

Gutter – This option specifies the horizontal space between gallery items.
The default is 2%.

Margin – This option specifies the vertical space between gallery items.
The default is 2%.

This is an example of what the settings look like with six images with two columns, and 0% for the Gutter and Margin. Note that the images may appear misaligned this is done intentionally to create a “pinterest” board-like photo-set.

This is an example of what the settings look like with six images with three columns, and 2% for the Gutter and Margin.

Origin Left – This option specifies the start location of where images begin to appear. When turned on images start on the left and continue appearing to the right. The default is on.

Origin Top – This option specifies the start location of where images begin to appear. When turned on images start at the top and continue appearing to the bottom. The default is on.

Animation – This option specifies the animation style that appears when the page first loads. The default is fadeinUp.

Animation Duration – This option specifies the amount of time between each image? The default is .5 sec.

Animation Delay – This option specifies the time delay before the animation starts. The default is .1 sec.

Animation Offset – This option specifies where on the screen the animation begins. The default is 0 px.

Caption – This option allows for either the title or caption or both to be displayed. The default is off (for both the title and caption).

With captions and titles it appears like this:

Without captions and titles it appears like this:

In the Media Library the titles and captions can be configured after selecting an image. In the example below, the image with the checkmark has been selected to add into the gallery.

WooCommerce Settings Gallery Settings

When WooCommerce is activated a new gallery option appears, at the bottom, in the General Settings tab. If default is selected the default WooCommerce gallery option is activated. If Masonry, Justified or another gallery option is selected then all the WooCommerce galleries automatically get converted. Shortcodes are unable to be used to specify gallery types. When the desired option is selected be sure to click on “Save”.

The WooCommerce Gallery settings control the native WooCommerce Gallery images. Add images to the Product Gallery in the backend by going to the Product Gallery section at the sidebar and inserting them.

The images are then controlled in appearance and display on the front end. To configure the images for the Masonry Gallery go to the Masonry Gallery tab. Any settings changed here are applied globally to all Masonry Galleries regardless if they are Product Galleries or regular ones.