Shortcodes – Create Showcase Galleries

The Showcase shortcode does not create a full gallery, but what it does is give you a showcase gallery item….the actual image structure. The reason for this is because you can create varying numbers of columns per gallery item, but it also allows you to use this in non-gallery ways as well. But let’s take this tutorial and guide you through the process of creating a 3-column Showcase Gallery that is similar to this:

showcase demo

Step 1 – Create Your Gallery Thumbnails

Unfortunately, the Showcase Gallery does not automatically create thumbnails for you, so you will need to make them before uploading. You are free to make each thumbnail the size you want, but to help you with some guidelines, here is a list of recommendations:

  1. Make your thumbnails the same size for consistency
  2. If you can, try to optimize your thumbnails by keeping quality but minimizing the file size
  3. If you want to follow what I did for the live demo site, I made my thumbnails 650×435 pixels to accommodate the responsiveness of the gallery which changes to 2 columns as you shrink the viewing area, then it changes to a 1 column layout on smaller devices.

Step 2 – Create 3 Columns

This is going to be very similar to how we made Icon Boxes in a previous tutorial. Using columns will allow us to create a column-based gallery that is also responsive when viewed in different mobile devices.

NOTE The column structure is built using the Bootstrap 4 grid column framework.

We first need to insert columns into our page content using the “Column” shortcode. Once we add our columns, we can then add our Showcase galelry items inside each column.

On your editor, click on the shortcode icon for “Columns” and for this tutorial, we will choose “3 Columns

button columns

When we add our columns, our shortcode will be inserted into our editor like this:

column shortcode

Step 3 – Add a Gallery Item

With the column shortcode, you will select the “Your Content Here” placeholder text in the first column:

showcase1

Once you do this, we can insert our first Showcase item by clicking on the “Showcase” shortcode button:

showcase editor button

After we do this, you will see a window that looks like this:

showcase2

  • Image URL – This is the full path to the image you want to use
  • Title Caption – This is the caption text that will show when you hover over the image
  • Link – This is where you would link the image to another source

IMPORTANT One important note to make here is that we will need to insert the image file URL into each showcase gallery item we make. You can obtain this from your images in the Media Library and clicking on the “Edit” after uploading or by clicking on the image if it already exists in the media library. Look for the “File URL” field and then select and copy the URL.

The file URL for the image will look different depending on whether you upload a new image or open an existing one. WordPress makes this a bit confusing, but when you upload a new image and click on “Edit“, you will see the File URL field in the upper right:

file url

If you are opening an existing image from the Media Library, this will be in a field like this:

file url2

When you’ve entered in the File URL into the first field, you can then write your image caption, and then add a link to where you want to send the person when they click on the gallery item image.

Now you can click on the “Insert” button and then you should see the shortcode added to your first column like this:

showcase3

Your actual shortcode in the above example for one showcase item is:

[incept_showcase_item image="http://demos.shapedpixels.com/incept/wp-content/uploads/sites/20/2016/08/showcase1.jpg" caption="my caption" href="https://www.shapedpixels.com"]

The only difference is that your information in the attributes like the caption, the image path, and the link, would be yours. With this information, you can now can repeat this process to move on to the second column and showcase gallery item. Once done, then make your third one.

Showcase Gallery Without Spacing

You might have noticed that the demo site for Incept has a showcase gallery without spacing between each thumbnail image.

showcase no spaces

This is only possible when using the Incept theme and then publishing your showcase gallery to the “Showcase 1, 2, 3, and 4” sidebar positions. This sidebar is custom styled to achieve that result.  

One other difference with publishing a showcase gallery to sidebars, is that you do not need to first create columns, because sidebars such as the Showcase, Content Top, Content Bottom, Bottom, etc., are already coded to use columns behind the scenes. For each gallery item, you would add the shortcode for one per sidebar position. For example, if you want a 3-column gallery in the Showcase sidebar:

  • Showcase 1
  • Showcase 2
  • Showcase 3

 If you want a 4-column showcase in the Content Top sidebars:

  • Content Top 1
  • Content Top 2
  • Content Top 3
  • Content Top 4