How do I add a lightbox to a blog post featured image?

Overview

This article describes how to enable a lightbox on the Blog Post Featured Image where a larger image will then be displayed upon clicking. Works for Karma 3.0.4 and bellow.

General Instructions:

  • Access your Karma Theme via FTP
  • Locate the theme-functions.php file in /wp-content/themes/Karma/framework/global/
  • Open this file in your favorite code editor and scroll to approx. line 503 in the code
  • Follow the instructions below, save the file, and you’re all good to go 🙂

Locate this code (approx line 196)

 //image $html .= "<img src='$image_src' width='$image_width' height='$image_height' alt='$title' />"; 

…and replace the above code with the following:

 //get feature image id $feature_image_id = get_post_thumbnail_id();  //get "full" size featured image data $full_image_data = wp_get_attachment_image_src($feature_image_id, 'full' );  //use only the image url $full_image_src = $full_image_data[0];  //if empty internal featured image, use external featured image! if(empty($full_image_data)){ $full_image_src = get_post_meta($post->ID,'truethemes_external_image_url',true); }  //return image $html .= "<a href='$full_image_src' data-gal='prettyPhoto' title=''><img src='$image_src' width='$image_width' height='$image_height' alt='$title' /></a>"; 

…and save the file 🙂