Landing Page – Portfolio Gallery

Not technically a portfolio, but it’s more of a gallery that can be used to showcase whatever you want.

fp portfolio

Activate and Style Section 3

  1. Go to Appearance >> Customize >> Landing Page Options >> Section 3
  2. Check the box next to “Enable Section 3” to enable our sidebars and section
  3. Check the box next to “Make Section 3 Fluid” so we can have our portfolio full width
  4. Check the box next to “Sidebars without Spacing” so we can remove sidebar spacing
  5. Under “Section 3 Padding“, we need to make this 0 so that we can remove the section 3 container padding space
  6. Make our Text, Link, and Heading Colour as white #ffffff
  7. Click “Save & Publish

Prepare Images

This will depend on how many images you plan to have showing, but remember that if you plan to have caption boxes, you want enough space for each image to fit the content. For our demo site, you can use the image size 650 x 370 pixels (accommodates larger screen resolutions) to create a 4-Column gallery. If you want to create a 3-Column version, use an image width of 855 pixels.

Upload your images to your Media Library and click on the “Edit” link to copy the “File URL” of each one so that we can use it in our next step. We need to paste the File URL when we create our actual gallery.

Make our Portfolio Gallery

Each portfolio gallery item is going to be made up of HTML code using an “unordered list” layout. This is pre-styled from the theme’s stylesheet, so there won’t be a lot for us to do. We need to begin with our unordered list and add the “row and influential” classes to it:

<ul class="row influential-portfolio">
<li>our 1st item here</li>
<li>our 2nd item here</li>
<li>our 3rd item here</li>
<li>our 4th item here</li>
</ul>

You can also use divs instead of an unordered list

<div class="row influential-portfolio">
<div class="col-lg-6 col-xl-3">1st item here</div>
<div class="col-lg-6 col-xl-3">2nd item here</div>
<div class="col-lg-6 col-xl-3">3rd item here</div>
<div class="col-lg-6 col-xl-3">4th item here</div>
</div>

The base HTML code per item is like this:

<div class="influential-portfolio-item"> <img src="http://demos.shapedpixels.com/influential/wp-content/uploads/sites/14/2016/03/fp-gallery1.jpg" alt="short description"> <div class="influential-portfolio-item-overlay"> <div class="influential-portfolio-item-description"> <h3 class="portfolio-title"><a href="#">Energy</a></h3> <p class="portfolio-caption">Nulla sed nisi lacinia, placerat ante nec, tristique elit. Integer vulputate tellus magna, et euismod.</p> </div> </div> </div>

Let’s Examine the Code

  • We have the image tag which loads our image. Remember the File URL we copied for each image we uploaded? This is where that goes.
  • There are two divs, one for the overlay (the part that shows up orange on hover), and then the caption one (our caption content)
  • Inside the caption container is where our caption title is as an H3 heading, then our caption text, followed by a text link that is styled as a button. The # symbol is a placeholder for us to put a link to a page or another source.

The Complete Portfolio Gallery Code

This is what the whole thing looks like when completed like the demo site:

<div class="row influential-portfolio">  <div class="col-lg-6 col-xl-3"> <div class="influential-portfolio-item"> <img src="http://demos.shapedpixels.com/influential/wp-content/uploads/sites/14/2016/03/fp-gallery1.jpg" alt=""> <div class="influential-portfolio-item-overlay"> <div class="influential-portfolio-item-description"> <h3 class="portfolio-title"><a href="#">Energy</a></h3> <p class="portfolio-caption">Nulla sed nisi lacinia, placerat ante nec, tristique elit. Integer vulputate tellus magna, et euismod.</p> </div> </div> </div> </div>  <div class="col-lg-6 col-xl-3"> <div class="influential-portfolio-item"> <img src="http://demos.shapedpixels.com/influential/wp-content/uploads/sites/14/2016/03/fp-gallery2.jpg" alt=""> <div class="influential-portfolio-item-overlay"> <div class="influential-portfolio-item-description"> <h3 class="portfolio-title"><a href="#">Environment</a></h3> <p class="portfolio-caption">Nulla sed nisi lacinia, placerat ante nec, tristique elit. Integer vulputate tellus magna, et euismod.</p> </div> </div> </div> </div>  <div class="col-lg-6 col-xl-3"> <div class="influential-portfolio-item"> <img src="http://demos.shapedpixels.com/influential/wp-content/uploads/sites/14/2016/03/fp-gallery3.jpg" alt=""> <div class="influential-portfolio-item-overlay"> <div class="influential-portfolio-item-description"> <h3 class="portfolio-title"><a href="#">Agriculture</a></h3> <p class="portfolio-caption">Nulla sed nisi lacinia, placerat ante nec, tristique elit. Integer vulputate tellus magna, et euismod.</p> </div> </div> </div> </div>  <div class="col-lg-6 col-xl-3"> <div class="influential-portfolio-item"> <img src="http://demos.shapedpixels.com/influential/wp-content/uploads/sites/14/2016/03/fp-gallery4.jpg" alt=""> <div class="influential-portfolio-item-overlay"> <div class="influential-portfolio-item-description"> <h3 class="portfolio-title"><a href="#">Geophysics</a></h3> <p class="portfolio-caption">Nulla sed nisi lacinia, placerat ante nec, tristique elit. Integer vulputate tellus magna, et euismod.</p> </div> </div> </div> </div> </div>

Change the Overlay Background Colour

This is the orange overlay box that contains the caption content when you mouseover (hover) an image thumbnail. You can change the colour of this from the customizer:

  1. Go to Appearance >> Customize >> Colours
  2. Look for the “Portfolio Caption Hover Background” colour setting (near the lower half of the colours) and make your choice
  3. Click on “Save & Publish