[Support request] Pop-up (lightbox) featured image with caption (Solved)

[Ian]

Featured images are basic, one size, no caption, and no pop-up lightbox option. I was able to improve the features using:

• GeneratePress Elements:
  Lets you build your own custom Featured Image template.
• Custom Content Shortcode (CCS) plugin:
  Lets you add Custom Fields (such as the featured image) to the template
• Featured Image Caption plugin:
  Lets you add a caption to the feature image
• Responsive Lightbox & Gallery plugin:
  Lets you turn an image into a popup

Instructions (ensure all plugins are installed and enabled):

1. Select Appearances | Elements
2. Select Add New, an Element type of “Hook”, and enter a relevant title
3. In main editing area, enter the following HTML and CCS shortcodes, eg:

   [if field=image-url]<div class="featured-image page-header-image">
     <a href="[field image-url]" rel="lightbox">
   	<img src="[field image-url size=medium]" alt="Featured image">
     </a>
     [cc-featured-image-caption]
   </div>[/if]

4. Make sure the “Execute Shortcodes” checkbox is checked
5. Select a Hook location, eg. “before_content”
6. Then in display rules, select a location, eg. Pages
7. Click Save, or Update

Add an image and caption, and make sure the Lightbox plugin has a lightbox effect selected (eg. prettyPhoto).

Notes

1. The CCS shortcodes [if field=image-url] .. [/if] ensure that the HTML is displayed, only if there is a featured image
2. The DIV classes are the same as the usual featured images DIV classes, so that any CSS you use will work (see below)
3. The [field image-url] shortcode is provided by CCS and merely provides the features image URL.
4. rel=lightbox is used by the Lightbox plugin to trigger the pop-up.
5. The image tag uses a parameter to select and display the medium sized featured image (which links to the full-size image)
6. The [cc-featured-image-caption] shortcode is provided by the Featured Image caption plguin to display the caption text.

CSS used
I used the following CSS (entered in Appearance | Customise, then select Additional CSS):

/* Featured image */
.featured-image {width:256px}
.featured-image img {border:1px solid black;}
.ccfic {margin:0px 0 0 0;font-size:80%;;line-height:16px}

.ccfic is a class used by the Featured Image Caption plugin.

#ends#

[Tom]

Awesome stuff! Thanks so much for sharing 🙂

[Alain Aubry]

Hi Tom

How can this be done without plugins? maybe using hooks and some code, btw, I don’t need the caption just to popup the image…

Thanks
Alain

[Leo]

Perhaps WP featherlight is what you are looking for?
https://wordpress.org/plugins/wp-featherlight/

If not then the plugins solution is still the way to go if you aren’t comfortable with a lot of custom coding.

[Alain Aubry]

Hi Leo

Now I am using “Simple Lightbox” https://wordpress.org/plugins/simple-lightbox/

It works with images inside a post but not with the featured image displayed by the theme, this one lacks the “a” tag wrap. Looking for this issue is the reason why I came to this post…

I guess that “WP Featherlight” will have the same behavior, I will give it a try.

I don’t mind using custom code, if it not way too complex…

[Leo]

WP Show Posts pro has this feature as well that you can consider:
https://docs.wpshowposts.com/article/images-overview/#image-lightbox

Do let us know if you find a good solution 🙂

[Alain Aubry]

Leo

Look at any single page from here: https://www.casa-indigo.com/artigos/
Once the single page is displayed, you cannot click on the featured image. So none of “Simple Lightbox”, “WP featherlight”, “WP Show Posts pro” will do it. Because the “a” tag is missing.

Ian, author of the post manage to do it, but using “Custom Content Shortcode” plugin.

My question was about doing the same, but without an extra plugin.

Thanks
Alain

[Leo]

Would something like this help?
https://generatepress.com/forums/topic/post-image-in-lightbox/

[Alain Aubry]

This is the kind of code I am looking for… Great!
But still I cannot make work, I copied the following into my functions.php

add_filter( 'generate_single_featured_image_output', function( $output, $image_html ) {
    printf(
        '<div class="featured-image">
            <a href="%1$s">
                %2$s
            </a>
        </div>',
        get_the_post_thumbnail_url(),
        $image_html
    );
}, 10, 2 );

but it is not adding the “a” tag… maybe I need to hook it in a different way?

[Leo]

Tested the code and it’s working nicely.
https://www.screencast.com/t/ZKb6kv4i3

Can you open a new topic if you still can’t figure out?

I would like to keep author’s working solution clean.

Thanks!

[Author]

Posts