Change out put of the_post_thumbnail in PHP

I am brand new to PHP. I’ve messed with wordpress on it but not really with the code behind it. I am trying to speed up the loading time of our wordpress site but I am having some trouble. PHP uses the_post_thumbnail to load the HTML code for some of the posts’ images. I have this code to delay loading of the images a little so the page can load first and then the images will load:

jQuery(window).load(function() {
jQuery('img[source]').prepend(function(){
    var source = jQuery(this).attr('source');
    jQuery(this).attr('src', source);
});
});

This works very well on another site I work on written in coldfusion and normal html. So what I’m trying to do is change the output of the_post_thumbnail to have a ‘source’ attribute that has the actual source path and the initial src value will have a default loading gif.

Read More

My first thought was to build another function or I guess as PHP calls it, add a filter like this:

add_filter('post_thumbnail_html', 'thumbnail_filter');
function thumbail_filter() {
$default_attr = array(
    'src'   => $src,
    'class' => "attachment-$size",
    'alt'   => trim(strip_tags( $wp_postmeta->_wp_attachment_image_alt )),
);
the_post_thumbnail($default_attr);
// you can alter the resulted HTML here
$html = the_post_thumbnail($default_attr);
return $html;
}

This didn’t actually broke the page and didn’t show any images even when I haven’t called the thumbnail_filter function.

My next guess as to what to do was this. Can someone who is a little more experienced in PHP and wordpress help me out? Maybe the first one is the right way to go but I’m just doing it wrong.

Related posts

Leave a Reply

1 comment

  1. The thumbnail_filter() function will get called automatically when the the_post_thumbnail() function will get called. and to add a source attribute to the img tag you have to replace your filter with this filter

    add_filter( 'post_thumbnail_html', 'my_post_image_html', 10, 3 );
    
    function my_post_image_html( $html, $post_id, $post_image_id ) {
    
      $html = '<img src="" source="'.get_permalink( $post_id ).'"/>';
      return $html;
    
    }
    

    paste this code in your functions.php file. I guess this will work.