Display Thumbnails on Wordpress with get_post_thumbnail

Question

I'm struggling to display a few post thumbnails on a Wordpress page. I'm using advanced custom fields where I select those featured articles. The featured articles have a featured image. I can display the title and link to the articles correctly, but I'm struggling with the featured images.

<?php 
    if (is_page('reviews')) {
    $featured_articles = get_field('featured_articles');

    $id = $featured_articles[0];
    echo "<div class='row blog-first'><div class='small-12 columns'><div class='row blog-teaser'>";
        echo "<div class='small-8 columns'>";
            if ( has_post_thumbnail($id) ) {
                echo "<a href='".get_permalink($id)."' class='thumb'>";
                    echo get_the_post_thumbnail( $id, 'teaser-thumbnail' ); 
                echo "</a>";
            }
        echo "</div>";
        echo "<div class='small-4 columns col-text'>";
            echo "<div class='d'></div>";
            echo "<a href='".get_permalink($id)."'><h3>".get_the_title($id)."</h3></a>";
            echo get_field('text_excerpt',$id);
        echo "</div>";
    echo "</div></div></div>";

    echo "<div class='row'>";
        echo "<div class='small-12 medium-8 columns'>";
            echo "<h2 class='h2 hc f2'> Our best reviews</h2>";
            for ($i=1; $i < 4; $i++) { 

                $id = $featured_articles[$i];
                echo "<div><div class='row blog-teaser'>";
                    echo "<div class='small-6 columns'>";
                        if ( has_post_thumbnail($id) ) {
                            echo "<a href='".get_permalink($id)."' class='image'>";
                                echo get_the_post_thumbnail( $id, 'teaser-thumbnail' );
                                $image_large = wp_get_attachment_image_src( get_post_thumbnail_id($id), 'teaser-thumbnail');
                            echo "</a>";
                        }
                    echo "</div>";
                    echo "<div class='small-6 columns col-text'>";
                        echo "<div class='d'></div>";
                        echo "<a href='".get_permalink($id)."'><h3>".get_the_title($id)."</h3></a>";
                    echo "</div>";
                echo "</div></div>";

            }
        echo "</div>";

Have you added theme support for post-thumbnails using add_theme_support( 'post-thumbnails' ); and is teaser-thumbnail a registered image size? What happens when you try to output the thumbnails? — Cyclonecode
Apprently I didn't do either. So I just add add_theme_support( 'post-thumbnails' ); to my theme-function.php. How do I define the image size? I just want to output a medium sized thumbnail. — mallefitzo
In that case I think you should call the function like this get_the_post_thumbnail( $id, 'thumbnail' );. You can manage the sizes under the MediaPanel located at Settings > Media — Cyclonecode

vrajesh vrajesh · Accepted Answer · 2015-09-19T10:06:38

Try this:

$featured_articles=get_field('featured_articles');
foreach($featured_articles as $single_feature){
    $img_arr=wp_get_attachment_image_src($single_feature,'medium');     //thumbnail,full,medium
    if(!empty($img_arr)){
        echo '<img src="'.$img_arr[0].'" alt="image">';     
    }else{
        echo '<img src="" alt="NO image">';     
    }
}

Display Thumbnails on Wordpress with get_post_thumbnail

1 Answers