Create a Showcase Gallery like the Demo Front Page

This is a new tutorial for the Showcase Gallery that you see on the front page demo of Longevity Pro. As of today, May 8, 2016, the Longevity Pro plugin has been updated with significant shortcode changes….the Showcase Gallery being one of them. If you already have this created before this update, you will need to redo your shortcode if you update the plugin.

This tutorial now reflects the changes made to the shortcode plugin update and will help you create a showcase gallery like the live demo site shows:

Prepare Your Images

The first thing we need to do is to create our images for our gallery. It’s also important that you make them consistent in size, otherwise you will get a wonky looking gallery that is uneven. In the case of this tutorial and for the demo site displaying 4 images, we will focus on setting up a 4 column showcase.

Image Size = 640 x 350 pixels is the size you want to match the demo, but also having them this size will also help with full width viewing and to maintain a responsive layout.

Once you’ve created your images, upload them to your Media Library and grab the File URL for each one because we need them in the next part of setting up a showcase gallery.

Showcase Gallery Shortcode

As mentioned, this is similar to the Image Boxes, so some of this should seem familar. Remember that we had to first create a wrapper container that we did before? Same thing for this one, except we will be inserting the “Showcase Row” shortcode.

[showcase_row]
[/showcase_row]

This is our shortcode from the first showcase gallery image that I got from the demo site that you can use to modify the attributes, but first lets show the default shortcode without the changed attributes:

columns=”col-lg-12″ This is how many column spaces we need for this showcase image column. Default is col-lg-12 which means this is one column stretching 12 columns. But we want a 4 column layout so we need this to change to col-lg-3 because 3 into 12 = 4 showcase image columns

title=”Your Title” This is the caption title.

rel=”lightbox” This is used if you want your image to open in a lightbox. Depending on what lightbox plugin you use, the attribute might be different.