Trouble Retrieving Thumbnail URL on Front-Page

Question

I'm running multiple queries on a front-page.php file. They all seem to be working fine, except that I am having a hard time getting a thumbnail image.

The code in question, on my front-page, currently looks like this:

<?php 

    $thumb_args = array(
    'posts_per_page' => 1,
    'cat'            => 87
    );

    $thumb_query = new WP_Query( $thumb_args );

    while ($thumb_query->have_posts()) : $thumb_query->the_post(); ?>

    <div id="post-<?php the_ID(); ?>" <?php post_class('cat-excerpt right') ?> itemprop="blogPost">

         <h2 class="headline" itemprop="title">Posted Without Comment</h2>

         <?php include (TEMPLATEPATH . '/inc/meta.php' ); ?>

         <a href="<?php the_permalink(); ?>" itemprop="url">
              <img src="<?php get_the_post_thumbnail('custom-medium'); ?>" itemprop="image">
         </a>
    </div><!-- End .post .cat-excerpt -->
    <?php endwhile; 

        wp_reset_postdata(); 
    ?>

I have tried using both the_post_thumbnail() on its own and get_the_post_thumbnail() in an <img> tag. When I use the_post_thumbnail() (with or without passing an argument) it just returns an empty anchor tag, which links to the correct post. When I use get_the_post_thumbnail() in an <img> tag (with or without passing an argument, as seen above), I doesn't return the url for the image. The url for the actual post is always correct.

This is the code in my functions.php file:

if (function_exists( 'add_theme_support' ) ) {
    add_theme_support( 'automatic-feed-links' );
    add_theme_support( 'post-formats', array('audio','gallery', 'image', 'video'));
    add_theme_support( 'post-thumbnails' );
    if (function_exists( 'set_post_thumbnail_size' ) ) {
        set_post_thumbnail_size( 620, 349, false );
    }
}

if (function_exists( 'add_image_size' ) ) {
    add_image_size( 'profile', 100, 100, false );
    add_image_size( 'custom-small', 300, 169, false );
    add_image_size( 'custom-medium', 400, 225, false );
    add_image_size( 'custom-full', 520, 293, false );
}

The thumbnail image works fine in my single.php file, which uses the default post thumbnail size that I defined above. So, if anything, I figure the issue is with the image sizes that I've added, and/or with my front-page.php file.

Answer 1

Not sure how you do it in your single.php, but I'm fairly certain not the same way. The main problem is that both the_post_thumbnail() and get_the_post_thumbnail() are generating the img tag output for you - so putting it into the src attribute of an img tag like in your code can't work.

Additionally: The latter does return, the former does echo the output. You are using the latter, but don't echo it so there is actually nothing happening. There are some other differences, e.g. the_post_thumbnail() can only be used for the current post as it has no $post_id parameter; get_the_post_thumbnail() can be used for any post thumbnail, given you input the $post_id. More on the codex pages.

So the usage in your case would look like this:

// either:
the_post_thumbnail( 'custom-medium' );
// or:
echo get_the_post_thumbnail( get_the_ID(), 'custom-medium' );

Or if you actually want to fill the src attribute of an img tag you can do:

<?php
$img_url = wp_get_attachment_image_src(
    get_post_thumbnail_id( get_the_ID() ),
    'custom-medium'
);
?>
<img src="<?php echo $img_url[0]; ?>">

Making use of wp_get_attachment_image_src(), get_post_thumbnail_id() and get_the_ID() - the latter was already in use in above exemplary code.

---

Update:

Just to clarify, above mentioned methods do all work - tested and used many times. I assume there must be another problem, but actually can't tell from the information available.

As proof of concept here a front-page.php with custom query:

<?php
get_header();

$paged = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;
$thumb_args = array(
'posts_per_page' => 1,
'cat'            => 87,
'paged'          => $paged
);

$thumb_query = new WP_Query( $thumb_args );

$temp_query = $wp_query;
$wp_query   = NULL;
$wp_query   = $thumb_query;

if (
    $thumb_query->have_posts()
) {
    while (
        $thumb_query->have_posts()
    ) {
        $thumb_query->the_post();
            the_title();
            echo '<br>';
            the_post_thumbnail();
            echo '<br>';
            echo get_the_post_thumbnail();
            echo '<br>';
            $img_url = wp_get_attachment_image_src(
                get_post_thumbnail_id()
            );
            echo '<img src="'. $img_url[0]. '">';
    }
} else {
    // no posts
}

echo '<br>';
previous_posts_link( '← ' );
next_posts_link( ' →', $thumb_query->max_num_pages );

wp_reset_postdata();

$wp_query = NULL;
$wp_query = $temp_query;

get_footer();

I additionally had to throw this into the functions.php to make the pagination work:

add_action(
    'pre_get_posts',
    'wpse162764_frontpage_custom_query_additional_pagination_fix'
);
function wpse162764_frontpage_custom_query_additional_pagination_fix( $query ) {
    if ( 
        is_admin()
    ) {
        return;
    }
    if (
        is_front_page()
    ) {
        $query->set(
            'posts_per_page',
            1
        );
    }
}

If this doesn't work for you, make sure you set the right parameter, than there must be another problem.

Besides, custom queries are barely needed so lets use the main query.

A front-page.php with main query:

<?php
get_header();

if (
    have_posts()
) {
    while (
        have_posts()
    ) {
        the_post();
            the_title();
            echo '<br>';
            the_post_thumbnail();
            echo '<br>';
            echo get_the_post_thumbnail();
            echo '<br>';
            $img_url = wp_get_attachment_image_src(
                get_post_thumbnail_id()
            );
            echo '<img src="'. $img_url[0]. '">';
    }
} else {
    // no posts
}

echo '<br>';
previous_posts_link( '← ' );
next_posts_link( ' →' );

get_footer();

Additionally you need this in your functions.php to make it work with the main query:

add_action(
    'pre_get_posts',
    'wpse162764_pre_get_posts_for_frontpage_main_query'
);
function wpse162764_pre_get_posts_for_frontpage_main_query( $query ) {
    if ( 
        is_admin()
        || ! $query->is_main_query()
    ) {
        return;
    }
    if (
        is_front_page()
    ) {
        $query->set(
            'posts_per_page',
            1
        );
        $query->set(
            'cat',
            87
        ); 
    }
}

---

Note:

BTW just to clarify I've ran this with multiple queries/loops too, does work and - if done right - can't be the issue.

Answer 2

Your code seems to take it for granted that a thumbnail actually exists for any post that your query retrieves. I would personally recommend checking for the existence of a featured image before attempting to retrieve it.

<a href="<?php the_permalink(); ?>" itemprop="url">
     <img src="<?php get_the_post_thumbnail('custom-medium'); ?>" itemprop="image">
</a>

The method has_post_thumbnail(), if executed within a loop, will tell you whether or not the current post has a thumbnail. I would adjust your code with this in mind, and envision something along the lines of:

<a href="<?php the_permalink(); ?>" itemprop="url">
    <?php if( has_post_thumbnail() ) : ?>
    <img src="<?php get_the_post_thumbnail('custom-medium'); ?>" itemprop="image">
    <?php else: ?>
    <!-- No Image Available; maybe put something else in its place? -->
    <?php endif; ?>
</a>

Doing this, you can not only be sure that images are rendered only when appropriate, but also be able to identify the fact that no featured image is present for the given post (by viewing source and locating the HTML comment in my provided example).