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:

tutorial fp showcase

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.

file url showcase

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.



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:

[longevity_showcase columns="col-lg-12" title="Your Title" rel="lightbox" image="#" alt="short description" caption="Maecenas posuere erat quis nisi ullamcorper pharetra nulla ut euismod leo." button="See More" link="#"] [/longevity_showcase]


  • 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.
  • image=”#” This is the full URL to the image; change the # for the URL
  • alt=”short description” This is a short description for your image.
  • caption=”Maecenas posuere erat quis nisi ullamcorper pharetra nulla ut euismod leo.” This is your caption on hover.
  • button=”See More” This is a button that gets added to the overlay (hover) effect which links the image to any location you set the link up to.
  • link=”#” This is your link to where you want that image to link to. Change the # to the link.

After you have modified the attributes, here is what it will look like after; this is the first one off the live demo site:

[longevity_showcase columns="col-sm-6 col-md-3 col-lg-3" title="Mobile Responsive" rel="" image="" alt="Showcase Image 1" caption="Maecenas posuere erat quis nisi ullamcorper pharetra nulla ut euismod leo esta lorem delore in." buttontext="Details" link="#"] [/longevity_showcase]

Setup Your Widget

  1. Go to Appearance >> Widgets, and drag a text widget into the “Inactive Widgets” area so that you have more room to work.
  2. With each showcase gallery image you create with the shortcode, add it to your text widget. Repeat for each one by pasting it right after the last one.
  3. When done, Save it, and then drag it into the Bottom Showcase sidebar box.
  4. Set this widget to show on the Front Page
  5. Save