[Resolved] Any way at all of making the featured image a link to its media file in posts?

[Michael]

So I’d like to show the featured image in a certain category of posts (elsewhere it is in the header). But ideally, due to the nature of the posts, I’d like users to be able to click the featured image so my lightbox will show it larger.

Possible at all?

[David]

Hi there,

try this PHP snippet:

add_filter( 'post_thumbnail_html', 'db_post_thumb_media_link', 10, 3 );
 
function db_post_thumb_media_link( $html, $post_id, $post_image_id ) {

    if ( !is_single() ) {
        // Return default if NOT single
        return $html;      
    } else {
        // Get URL of large image attachment
        $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large');
        // Wrap HTML in link
        $html = '<a href="' . $large_image_url[0] . '">' . $html . '</a>';
        return $html;
    }
}

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

[Michael]

Thanks very much David, I didn’t think it was going to be possible.

You guys rule!

[David]

Happy to be of help.

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

[Rafał]

It was very helpful for me, Thank You!
I needed a caption as well.
I used Block – Page Hero from Elements, and just put this shortcode block:
[display_featured_image_with_caption] WITHOUT THE FILTER

add_shortcode( 'display_featured_image_with_caption', function() {
    ob_start();
    $caption = get_post(get_post_thumbnail_id())->post_excerpt;
	
    if ( has_post_thumbnail() ) {
        echo '<div class="post-hero grid-container"><figure>',
            '<a href="' . get_the_post_thumbnail_url(null, 'full') . '">',
            the_post_thumbnail('large'),
            '</a>';
        if ($caption) {
            echo '<figcaption>',
                $caption,
                '</figcaption>';
        }
        echo '</figure></div>';
    }
    return ob_get_clean();
} );

[David]

Awesome – glad to hear that was of use, and thanks for sharing your version!!

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

[Michael]

I know it’s a bit cheeky, but I was after a way of doing this for images within a post, but without having to edit the post and make each image link to itself. I have dozens of posts where it’s just a straight image with no link, and a plugin that looks for images that are linked to themselves to display a lightbox. In all honesty, I can’t be bothered to edit all the posts, would a bit of code similar to the above be possible?

[David]

Hi Michael,

Just to be clear – you would want any Image inside the post content to be ‘updated’ to include a link to its attachment file ?

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

[Michael]

That would be the aim, but the ability to use in an element so I could control where (categories etc) it was executed, would that be possible?

[David]

Hmmm… i don’t have a solution for that. Maybe some bright spark on stackexchange may have a solution.
You would need to filter the_content of the post and replace any <img> elements with new html that includes an anchor link to the image attachment. Theres plenty of offerings to remove the attachment link just couldn’t find anything to add them in.

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

[Michael]

Hi David,

No problems, it was a big ask. I’ll scour around see if I can find anything, or push comes to shove, just stop being lazy and edit all the posts manually.

Appreciated.

[David]

I thought i had come across this before, so it may just take a little ( lot ) of googling.
Let us know how you get on!

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

[Author]

Posts