How do I change/modify the_post_thumbnail(); html output?

by

I’m working on building out a custom theme and have been struggling with this one for a bit. I am trying to modify the HTML output of the_post_thumbnail(); function. I need to do this because I am trying to support retina images on my site and would rather bake the functionality into my theme than load a plugin on the backend.

By default, the_post_thumbnail(); merely calls get_the_post_thumbnail(); which I found here. My first thought was to plug into the ‘post_thumbnail_html‘ filter, but I can’t seem to get it working. So…

This is how I’m calling my post thumbnails in the loop:

<?php the_post_thumbnail('custom-thumbnail-size', array('class' => 'unique-class-here', 'title' => 'unique-title-here')); ?>

This is the code I need output when I call the_post_thumbnail();…

<img src="" alt="" data-src="image.png" data-alt="Alt text" class="retina unique-class-here" />

And the below code is what I currently have in my functions.php file:

<?php
function modify_post_thumbnail_html($html, $post_id, $post_thumbnail_id, $size, $attr) {
    $src = wp_get_attachment_image_src(get_post_thumbnail_id(), $size);
    $html="<img src="" alt="" data-src="" . $src['0'] . '" data-alt="" class="retina" />';
    return $html;
}
add_filter('post_thumbnail_html', 'modify_post_thumbnail_html', 99, 5);
?>

A couple things to note. I am not sure how to pass in the appropriate metadata text in the ‘data-alt’ attribute. Also, I need to be able to pass the specific post_thumbnail size I need since I use custom post_thumbnail sizes throughout my theme. Lastly, you can see the attribute array needs to pass in classes in addition to the default ‘retina’ class as well as any other attributes in that array.

Thanks in advance for any help. There’s really not much online about this topic and I figured my question was different enough to warrant an additional post to this community. Please let me know if you have any thoughts, solutions and/or need any clarifications.

3 s
3

Ok, so I think I may have come to a solution. It doesn’t seem as nice and easy as I’d like it to be, but then again major modifications to default WordPress functionality sometimes requires drastic measures. 🙂

This is my working solution to rewriting the HTML output for post thumbnails throughout my site to work with the Retinise.js plugin. Of course this code may be adapted for other post thumbnail HTML manipulations.

In my functions.php file, I created this function:

<?php
function modify_post_thumbnail_html($html, $post_id, $post_thumbnail_id, $size, $attr) {
    $id = get_post_thumbnail_id(); // gets the id of the current post_thumbnail (in the loop)
    $src = wp_get_attachment_image_src($id, $size); // gets the image url specific to the passed in size (aka. custom image size)
    $alt = get_the_title($id); // gets the post thumbnail title
    $class = $attr['class']; // gets classes passed to the post thumbnail, defined here for easier function access

    // Check to see if a 'retina' class exists in the array when calling "the_post_thumbnail()", if so output different <img/> html
    if (strpos($class, 'retina') !== false) {
        $html="<img src="" alt="" data-src="" . $src[0] . '" data-alt="' . $alt . '" class="' . $class . '" />';
    } else {
        $html="<img src="" . $src[0] . '" alt="' . $alt . '" class="' . $class . '" />';
    }

    return $html;
}
add_filter('post_thumbnail_html', 'modify_post_thumbnail_html', 99, 5);
?>

Then, whenever I call the_post_thumbnail(); in a WP loop, I use this code:

<?php the_post_thumbnail('custom-thumbnail-size', array('class' => 'retina additional-class')); ?>

This code should work (obviously with minor modifications) if you’re operating outside of a WP loop. Hope this will save someone else some time and frustration! Maybe when I get around to it, I’ll post a complete start to finish Q & A on how I baked in retina support to my theme. No plugins used!

Here’s a few links to point someone in the right direction if interested!

  • Adding additional image sizes to WP
  • Retinise.js
  • Create additional retina-sized images

Leave a Comment