Create a Showcase Gallery in your page content

This is tutorial will help you create an embedded Showcase Gallery in your page content. With a previous tutorial, we created a showcase gallery in the Showcase sidebars using widgets, but this one is going directly into your page content with the help of an unordered list. This also means that we will be more hands on with HTML code doing it this method because we need to work in the “Text (HTML)” tab of your editor.

This is what we’re going to make:

showcase content

NOTE Making this kind of gallery is best suited for the full width page template, but if you are using a left or right column template, you could get away with 3 image columns, but would not recommend 4, unless you are using a full width template.

Prepare Your Images

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 a 3-column gallery = 360×210 pixels
  • For a 2-column gallery = 575×375 pixels

IMPORTANT Although the above are guidelines, you can make adjustments to the sizes as you need them to be for your own website.

We will use this code snippet as our template…which is used on the live demo site for Emotions:

<ul class="scgallery row"> <li class="col-md-4"> <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">This is my Title</span><span class="sccaption">This is a caption line of text</span></div> </div></div></a></div> </li> <li class="col-md-4"> <div class="scbox"><img src="http://demos.shapedpixels.com/emotions/wp-content/uploads/sites/17/2016/05/showcase2.jpg" /><a href="#"> <div class="scoverlay"><div class="sccaptionouter"><div class="sccaptioninner"><span class="sctitle">This is my Title</span><span class="sccaption">This is a caption line of text</span></div></div></div></a></div> </li> <li class="col-md-4"> <div class="scbox"><img src="http://demos.shapedpixels.com/emotions/wp-content/uploads/sites/17/2016/05/showcase3.jpg" /><a href="#"> <div class="scoverlay"><div class="sccaptionouter"><div class="sccaptioninner"><span class="sctitle">This is my Title</span><span class="sccaption">This is a caption line of text</span></div></div></div></a></div> </li> </ul>

Understanding the Code Snippet

When you look at the above code, it might be overwhelming, but all you need to do is copy it and paste it into your page from the “Text(HTML)” tab of your editor. Then you can begin changing the existing content and links to be your own.

  • The class=”col-md-4″ gives us a 3-column gallery. Read more about this further below…
  • The img src is the full path (File URL) of your image thumbnail that you need to get from the media library after uploading your images.
  • The “#” is a blank link that you would change into an actual link to something. If you are using a lightbox plugin, you would add the relation to this as well.
  • This is my Title” is the title for the gallery item
  • This is a caption line of text” is the caption you would add to your gallery item

Column Counts and Size

Because we are not using sidebars for each gallery item, we need to add a class to each item like: col-md-4

The col-md-4 is part of the Bootstrap grid layout that this theme is built on. So this class gives us a 3-column gallery for 1 row of image thumbnails. This is because the Bootstrap grid layout is based on a 12-column grid in width. So if we want our gallery to have 3 columns, we do some quick math and we use the corresponding CSS class col-md- with the suffix being the 12 grid columns divided by the number of gallery columns we want:

  • 3 Column Gallery 12÷3 gallery columns = 4 (col-md-4)
  • 4 Column Gallery 12÷4 gallery columns = 3 (col-md-3)
  • 2 Column Gallery 12÷2 gallery columns = 6 (col-md-6)

The above might seem confusing at first, but using the code snippet further up this page will give you a starting point.

CAREFUL Be very careful if you decide to edit each gallery item when in the “Visual” tab of your editor. You could accidentally delete part of the code because the WordPress editor is notorious for doing that. When working with HTML code, it’s best to do it in the “Text” tab.

Early Easter 2017 Offer - Get 50% Discount on Lifetime Membership $299Buy Now - $149
+ +