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

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

Home Forums Support Pop-up (lightbox) featured image with caption (Solved)

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #696561
    Ian

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

    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#

    GeneratePress 2.1.4
    GP Premium 1.7.2
    #696723
    Tom
    Lead Developer
    Lead Developer

    Awesome stuff! Thanks so much for sharing 🙂

    #785737
    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

    #785768
    Leo
    Staff
    Customer Support

    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.

    #785835
    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…

    #785917
    Leo
    Staff
    Customer Support

    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 🙂

    #785933
    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

    #786000
    Leo
    Staff
    Customer Support
    #786085
    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?

    #786459
    Leo
    Staff
    Customer Support

    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!

Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Pop-up (lightbox) featured image with caption (Solved)’ is closed to new replies.