Archived topic

Pop-up (lightbox) featured image with caption (Solved)

9 replies · Started by Ian on October 8, 2018

Viewing posts 1–10 of 10

October 8, 2018 at 1:37 pm #696561

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):

Select Appearances | Elements
Select Add New, an Element type of “Hook”, and enter a relevant title

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]

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

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

Notes

The CCS shortcodes [if field=image-url] .. [/if] ensure that the HTML is displayed, only if there is a featured image
The DIV classes are the same as the usual featured images DIV classes, so that any CSS you use will work (see below)
The [field image-url] shortcode is provided by CCS and merely provides the features image URL.
rel=lightbox is used by the Lightbox plugin to trigger the pop-up.
The image tag uses a parameter to select and display the medium sized featured image (which links to the full-size image)
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#

October 8, 2018 at 7:30 pm #696723

Awesome stuff! Thanks so much for sharing :)

January 18, 2019 at 9:33 am #785737

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

January 18, 2019 at 10:33 am #785768

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.

January 18, 2019 at 1:00 pm #785835

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...

January 18, 2019 at 2:51 pm #785917

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 :)

January 18, 2019 at 3:27 pm #785933

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

January 18, 2019 at 6:28 pm #786000

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

January 19, 2019 at 12:53 am #786085

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?

January 19, 2019 at 10:35 am #786459

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!

This archived topic is closed to new replies.

Start building better websites today.