Output The Featured Image in a Loop as a Linked Media Image

Instead of linking a featured image to a post permalink in a loop – here is how you can link to its original image of itself.

<?php
// Create the variable for the large image src link
$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large' );
// Out the Post Title Using the post permalink for the post link - then the image which links to its large size
?>
<h3><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
<a class="lightboxclassname" href="<?php echo $large_image_url[0]; ?>" title="<?php the_title_attribute(); ?>" >
<?php the_post_thumbnail('medium'); ?></a>
view raw image.php hosted with ❤ by GitHub

So above, the title and featured image is output of a post – the title has a link to the post whilst the image is linked to itself via the $large_image_url which uses the first value in the array [0] which is the src value.

Further more a lightbox CSS class name can be triggered so a bunch of featured images can be viewed in an archive loop page without going to the single post page

2 Comments

  1. Thomas on September 18, 2018 at 3:06 pm

    Thanks for sharing.
    Could you please elaborate on the last paragraph a little bit ? Thanks,
    “Further more a lightbox CSS class name can be triggered so a bunch of featured images can be viewed in an archive loop page without going to the single post page”

    • Neil Gowran on September 19, 2018 at 12:21 am

      Here’s an example http://dev.tovo2.websitelove.net/lights/ so it’s a loop of lights, the headline links to the light post but the featured image opens in a lightbox which has prev/next and keeps the user on the archive page.

Leave a Comment