Create a Showcase Gallery

After the Introduction to the Showcase Gallery, we can move on to making an actual showcase gallery with this tutorial! We’re going to make this:

showcase top

Prepare Photos

The first thing you need to do is to prepare your photos so we can upload them into the Media Library. I also STRONGLY recommend you make your thumbnails the same size for maintaining consistency. Here is a guideline for you when creating your galleries:

  • For very large screens = 800×450 pixels
  • For medium screens = 650×365 pixels
  • For smaller screens = 450×245 pixels

IMPORTANT Although the above are guidelines, you can make adjustments to the sizes as you need them to be for your own website. The important factor is that when viewed, your thumbnails touch each other without gaps (spaces) between them when your browser window is maximized.

Create Your First Gallery Item

We will use the live demo site as a reference to get you started by giving you the code I used. Before we begin though, I recommend you upload the gallery photos (thumbnails) to your media library. When you upload them, click on the “edit” link to get the “File URL” for that image and paste it somewhere to be used in a moment. You need to get the File URL for each image.

  1. Go to Appearance >> Widgets
  2. Drag a “Text Widget” into the “Showcase Top 1” sidebar position
  3. Title the widget with an exclamation mark ! in front of the title…more on this at the bottom of this tutorial.
  4. Copy the code you see below and paste it into the text widget
  5. Change the content you see in the code to be your own, including the full path of your first image you uploaded (remember the file URL?)
  6. Save your widget
  7. Repeat the process until you get 3 gallery items, each in the Showcase Top 1, 2, and 3 positions.

Gallery Code

Copy, paste, and then update the content parts of this code in your text widget. The “#” symbol you see in the link part is just a blank link, so you will want to add your own link to whatever you are linking to, such as a page, or even the full size version of the thumbnail. If you are using a lighbox plugin, you can also apply that to your image link as well.

<div class="scbox">
<img src="http://demos.shapedpixels.com/emotions/wp-content/uploads/sites/17/2016/05/showcase1.jpg"> <a href="#"> <div class="scoverlay"> <div class="sccaptionouter"> <div class="sccaptioninner"><span class="sctitle">Your Showcase Title</span> <span class="scspacer"></span> <span class="sccaption">This is a caption line for this showcase image</span> </div></div></div> </a> </div>

Gallery Widget Titles

Earlier in the tutorial, I mentioned about adding an exclamation mark in front of your widget title. The importance of this is to hide the title from the front-end view by using a plugin called “Remove Widget Titles” by Stephen Cronin. This is an amazing plugin for what it does and can be used for any widget if you need to hide your title from the front but maintain a title for the admin side.