[Support request] Use featured image as link for a fancy lightbox :)

[Erwin]

Hellos!

I’d like to use the featured images of both the blog index and the single posts to link to the full image so a fancy lightbox gets triggered when clicked on it. If possible also the post title…

I’ve read a bunch of posts, but I can’t get it to work….halp? 🙂

Happy Sunday!

[Ying]

Hi Erwin,

Any chance you can link us to an example?

Let me know 🙂

[Erwin]

Well, no. Because I can’t get it to work. 😉

What I’d like is for featured images to link to the original full-size instead of to the single posts. A lightbox plugin will then do the lightbox stuff.

Same for featured images in single posts: link to the original full-size image.

[Leo]

Is the actual lightbox feature required or the core Link to Media option will work?

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Erwin]

I suppose the core link would be enough as the lightbox plugin should take over from there. 🙂

[Leo]

Can you link me to the page in question so I can see the current layout and provide the easiest and best solution?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Erwin]

Link
(it’s kinda empty :P)

[Leo]

Can you try the second example here?
https://docs.generatepress.com/article/generate_featured_image_output/#example

Adding PHP: https://docs.generatepress.com/article/adding-php/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Erwin]

I pasted the code into my functions.php, but it didn’t change anything. 🙁

Any other suggestions? 🙂

[Fernando]

Can you try this Snippet?:

add_filter( 'generate_featured_image_output', function( $output ) {
    if ( ! is_category() || ! is_home() || ! is_single() ) {
        return $output;
    }

    return sprintf(
        '<div class="post-image">
            %3$s
            <a href="%1$s">
                %2$s
            </a>
        </div>',
        esc_url( get_the_post_thumbnail_url() ),
        get_the_post_thumbnail(
            get_the_ID(),
            apply_filters( 'generate_page_header_default_size', 'full' )
        ),
        apply_filters( 'generate_inside_featured_image_output', '' )
    );
} );

[Erwin]

Just as a test I edited the theme file “featured-images.php” and changed “get_permalink” on line 42 in “get_the_post_thumbnail_url” which then actually works. Not on single posts, by the way.

However, I’d like a cleaner solution instead of hacking into theme files… 🙂

I’ll leave it as it is know, so you can see how I want it to work.

[Leo]

What if you just use this?

add_filter( 'generate_featured_image_output', function( $output ) {

    return sprintf(
        '<div class="post-image">
            %3$s
            <a href="%1$s">
                %2$s
            </a>
        </div>',
        esc_url( get_the_post_thumbnail_url() ),
        get_the_post_thumbnail(
            get_the_ID(),
            apply_filters( 'generate_page_header_default_size', 'full' )
        ),
        apply_filters( 'generate_inside_featured_image_output', '' )
    );
} );

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Erwin]

BINGO! 🥳

[Leo]

Awesome.

Looks like the conditional tags were the culprit 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts