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:

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $399 one-time).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

You need to be logged in to view and post comments.
Not a member yet? Join here.
magnifiercross
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: