How to apply the Lightbox effect to the single post featured image in the Customizr(-Pro) theme

⚠️ Code snippets might not be compatible with the latest version of your theme. Always use a child theme to customize your theme, and test your code on a staging website before migrating to production.

As you surely know you can display the featured image in single post contexts, with the option located at
Appearance -> Customize -> Content: home, posts, ... -> Single posts
Once enabled Customizr(-Pro) will show either the featured image (also called ‘post thumbnail’) or the first post attachment, if the post thumbnail is not set.
If you enabled the ‘Lightbox effect on images’ option ( Appearance -> Customize -> Global settings -> Image settings ) you might have noticed that it doesn’t apply
to the aforementioned featured image, for the following reasons (both conditions must be satisfied):

  1. that option applies to the images inside the content
  2. that option applies to the images which are linked to the media file

None of them is satisfied because:

  1. the featured image is shown before the content
  2. the featured image is linked to the post itself and not to the media file

With the following snippet you will be able to apply the lightbox effect on the featured image shown in single post contexts.

Note
It will be applied only to those images which are actually the post thumbnail, as there is no sense to apply it also to the the ones which are the first post attachment, otherwise you’ll see the image twice in the fancybox (lightbox) gallery.

add_filter( 'tc_post_thumb_wrapper', 'tc_allow_lightbox_for_post_featured_image', 20 );
function tc_allow_lightbox_for_post_featured_image( $thumb_wrapper ) {
  //make sure that the light box option is enabled and we're in the post context 
  if ( ! ( method_exists( 'TC_utils', 'tc_opt') && TC_utils::$inst -> tc_opt('tc_fancybox')
        && method_exists( 'TC_post', 'tc_single_post_display_controller' )
            &&  TC_post::$instance -> tc_single_post_display_controller() ) )
    return $thumb_wrapper;

  //makes sense only if the displayed image is actually the featured image otherwise
  //when showing an attachment you'll have it twice in the fancybox gallery
  if ( ! has_post_thumbnail() )
    return $thumb_wrapper;

  //retrieve the featured image (original size) url 
  $src = wp_get_attachment_url( get_post_thumbnail_id() );

  if ( method_exists( 'TC_utils', 'tc_fancybox_content_filter' ) && $src )
    $thumb_wrapper = TC_utils::$instance -> tc_fancybox_content_filter( 
        str_replace( 
            array( 'href="'.get_permalink( get_the_ID() ) .'"', 'class="tc-rectangular-thumb"' ),
            array( 'href="'.$src.'"', 'class="tc-rectangular-thumb grouped_elements"' ), 
            $thumb_wrapper 
        ), 
        $thumb_wrapper 
    );
  
  return $thumb_wrapper;
}

That’s all folks!!

Where to copy/paste this code?
Add it to your child-theme functions.php.
Everything you need to know about creating a child theme with Customizr here.

Leave a comment

Your email address will not be published. Required fields are marked *

2 thoughts on “How to apply the Lightbox effect to the single post featured image in the Customizr(-Pro) theme”