Page-specific Galleries in Oxygen with Toolset and GLightbox

This members-only tutorial provides the steps to display a WordPress Gallery in Oxygen from the images uploaded to Pages using Toolset Types and GLightbox.

For doing the same with Meta Box instead of Toolset, follow this tutorial instead.

Step 1

Install and activate Toolset Types.

Go to Toolset Dashboard and click "Add custom fields" for Pages post type and add a new field group of the type "Image" called say, "Page Gallery".

Since we want to be able to select/upload multiple images, select "Allow multiple instances of this field" for "Single or repeating field?".

Save the field group.

Step 2

Edit your Page(s) and populate the field by adding/selecting the images.

Step 3

Register a custom size for the images in the gallery.

Install and activate Code Snippets plugin.

Go to Snippets > Add New.

Title: Custom image sizes

Code:

add_image_size( 'gallery_image', 600, 338, true ); // 16 x 9

Set the snippet to run everywhere. Save changes and activate.

If you are going to use images that are already present in the Media Gallery, regenerate thumbnails.

Step 4

Let us specify that the HTML output of WordPress galleries and other elements be in HTML5.

Add another code snippet.

Title: Add support for HTML5 markup

Code:

add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );

Step 5

Create a custom shortcode that returns comma-separated IDs of the images.

Add another Code Snippet.

Title: [Toolset] Multiple instance image field

Code: