How to display Content in Lightbox upon clicking Featured images in Portfolio CPT Archive in Genesis

In my Facebook group a user posted a tutorial request:

A cpt with a popup image with details to the right of the image. Just like if you visit instagram.com/account and it will popup with a right and left arrow.

In this tutorial I share the code for setting up Portfolio CPT (using Portfolio Post Type plugin) archive page into columns with just the featured image appearing for each entry. Clicking on an image will open a lightbox (using Featherlight jQuery script) and shows the image at left and title and excerpt on the right.

Users can click left/right arrows on their keyboard to navigate to previous and next entries within the lightbox or press the left and right arrow buttons. Lightbox can be dismissed by pressing the Close button or pressing Escape on the keyboard.

Screenshots:

Screencast:

We are going to

• register two custom image sizes for featured images on Portfolio archive - regular and large (appears inside the lightbox)
• load Font Awesome for the previous and next icons inside the lightbox
• create Featherlight initialization file
• create a template for Portfolio CPT archive in which we shall
  1. enqueue CSS for Featherlight and its gallery extension in the head
  2. add "portfolio-archive" custom class to body element to make it easier the elements on the archive page
     force full width content
  3. reposition breadcrumbs from inside main.content to above
  4. remove the standard Genesis elements from entry header, entry content and entry footer
  5. show featured image. The key here is to assign a unique id to the container of each entry's content so it can be loaded inside lightbox when that entry's image is clicked. This is done using the built-in loop counter.
  6. modify the Excerpt read more link
  7. create a function to display Lightbox Content having featured image at left, title, excerpt and read more button at right
  8. enqueue JS for Featherlight and its gallery extension in the footer
• add the necessary styling

While the tutorial has been written for Genesis Sample child theme it should work with minor adjustments in any Genesis child theme. Also the steps work for any CPT with a few corresponding changes.

Step 0

Install and activate Portfolio Post Type plugin. Add your Portfolio items while making sure that featured images are uploaded for each.

Step 1

Create a directory named css inside child theme directory and upload these files:

featherlight.min.css

featherlight.gallery.min.css

Step 2

a) Create a directory named js (if not existing already) inside child theme directory and upload these files:

featherlight.min.js

featherlight.gallery.min.js

b) Create a file named featherlight-init.js in the same location having this code: