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.

Activate Plugin

Activate Plugin

Enabling Masonry Gallery

When activated a new tab will appear called Masonry Gallery.

New Masonry Gallery Tab

New Masonry Gallery Tab

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.

General_Settings_Page_to_Select_Masonry_Plugin

  • 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.
Justified and Masonry Gallery

Justified and Masonry Gallery

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

Default Gallery

Default Gallery

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 Shortcode Example

Masonry Gallery Shortcode Example

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.

Masonry Settings Page

Masonry Settings Page

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.

Masonry Gallery Example Image

Masonry Gallery Example Image

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

Masonry Gallery Example 2

Masonry Gallery Example 2

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.

Image Title and Caption

A front-end picture showing the title and caption of each image.

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:

Captions and Titles

Captions and Titles

Without captions and titles it appears like this:

No Captions

No Captions

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.

Title and Caption Configuration

Back-end picture highlighting the location of Title and Caption areas.

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”.

WooCommerce Gallery Options

WooCommerce Gallery Options

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.

Screen Shot 2016-09-05 at 3.13.51 PM

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.

WooCommerce Product

Leave a Reply

Your email address will not be published. Required fields are marked *

No comments yet.

Be the first to start the conversation.