Sridhar Katakam

Genesis and WordPress Tutorials

How to make Featured images in Genesis Content Archives link to Full-size images opening in a Lightbox

by 4 Comments

In the members-only forum, a user asks:

I need to make the featured images in posts on http://www.dunnandgone.com link to a lightbox showing the full-size image. I've attempted to make this work several times, and nothing has worked. Could you please post a tutorial for this?

I would also like to link the photo banner at the top, which is just a text widget that contains a single image, to a lightbox gallery that displays the full-size versions of the images shown in the banner.

genesis_do_post_image() function has the code that displays Featured image linking to Post's permalink per Genesis theme settings. We can unhook this function, modify it so the Featured image links to the full image, add the markup required for lightbox and re-hook it back at genesis_entry_content.

For the lightbox we shall use Featherlight.js jQuery script.

To answer the user's question about gallery part of his tutorial request, I show how Featherlight's gallery extension can be enqueued and used.

Step 1

Upload featherlight.min.js to child theme's js (create if not existing) directory.

Upload featherlight.min.css to child theme's css (create if not existing) directory.

Step 2

Add the following at the end of child theme's functions.php:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Sri, can you explain this – if ( ! is_singular() && genesis_get_option( 'content_archive_thumbnail' ) ) {

    does this mean that the method will only work when the image is set as the thumbnail for the post? Although, if yes, it can be modified to display the same result when the image is part of the_content. Right?

    Reply

    • That translates to: If the current (web) page is not a singular entry page (i.e., not a Post or Page or any other entry of any post type) and if “Include the Featured Image?” checkbox under “Content Archives” section of Genesis > Theme Settings has been ticked.

      Reply

      • Thanks.

        So, this can be modified to point and serve images coming directly from the_content (as image at top of the content) instead of featured image?

        Reply

        • If I am not mistaken, genesis_get_image() and genesis_image() already work that way. If an entry does not have a Featured image, the image in the content would instead be shown. Test it and if it doesn’t work, there seem to be a lot of ways.

          Reply
    • >