Display images of related posts

Question

How do I display related post thumbnails? This is the code that I use:

function related_posts_shortcode( $atts ) {
extract(shortcode_atts(array(
    'limit' => '3',
), $atts));

global $wpdb, $post, $table_prefix;

if ($post->ID) {
    $retval = '<div class="related-posts-inline"><p class="related-title-inline">BACA JUGA</p><ul class="related-list-inline">';
    // Get tags
    $tags = wp_get_post_tags($post->ID);
    $tagsarray = array();
    foreach ($tags as $tag) {
        $tagsarray[] = $tag->term_id;
    }
    $tagslist = implode(',', $tagsarray);

    // Do the query
    $q = "SELECT p.*, count(tr.object_id) as count
        FROM $wpdb->term_taxonomy AS tt, $wpdb->term_relationships AS tr, $wpdb->posts AS p WHERE tt.taxonomy ='post_tag' AND tt.term_taxonomy_id = tr.term_taxonomy_id AND tr.object_id  = p.ID AND tt.term_id IN ($tagslist) AND p.ID != $post->ID
            AND p.post_status = 'publish'
            AND p.post_date_gmt < NOW()
        GROUP BY tr.object_id
        ORDER BY count DESC, p.post_date_gmt DESC
        LIMIT $limit;";

    $related = $wpdb->get_results($q);
    if ( $related ) {
        foreach($related as $r) {
            $retval .= '
<li><a class="link-related" href="'.get_permalink($r->ID).'" title="'.wptexturize($r->post_title).'">'.wptexturize($r->post_title).'</a></li>';
        }
    } else {
        $retval .= '
<li>No related posts found</li>';
    }
    $retval .= '</ul></div>';
    return $retval;
}
return;}
add_shortcode('related_posts', 'related_posts_shortcode');

Answer 1

I'm fetching the attachment ID by get_post_thumbnail_id function which is taking the post ID. After getting the attachment ID of that post, I am passing this attachment ID to wp_get_attachment_image_src function and getting the image details.

So I am rewriting your foreach loop like this way

foreach($related as $r) {
    $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id($r->ID), 'thumbnail', true );
    $img= '';

    if( is_array( $thumbnail ) ) {
        $img = sprintf('<img src="%s" width="%s" height="%s" alt="%s"> ', $thumbnail[0], $thumbnail[1], $thumbnail[2], $r->post_title);
    }

    $retval .= '<li><a class="link-related" href="'.get_permalink($r->ID).'" title="'.wptexturize($r->post_title).'">'. $img . wptexturize($r->post_title).'</a></li>';
}