0

Its simple and answered quite often: I want to get the post thumbnail variable. Even if there is a lot of input, I could not make it work for me.

Here is my current code I use somewhere inside my front_page.php template:

<?php
 $args = array( 'numberposts' => '2' );
 $recent_posts = wp_get_recent_posts( $args );
 foreach( $recent_posts as $recent ){
      echo '<div class="post">';
      echo '<div class="post_thumb" style="background-image:url('.get_the_post_thumbnail( $recent['ID'], 'thumbnail').')"></div>';
      echo '<div class="content"';
      echo '<h2 class="post_title">';
      echo '<a href="'.get_permalink($recent["ID"]).'" title="'.$recent["post_title"].'" >'.$recent["post_title"].'</a>';
      echo '</h2>';
      echo '<p class="post_excerpt">'.$recent["post_excerpt"].'</p>';
      echo '</div>'; //content
      echo '</div>'; //.post
}
?>

This works quite good, except for the get_the_post_thumbnail() part.

I know, that I can get the thumbnail url using

$post_thumbnail_id = get_post_thumbnail_id($post->ID);
$post_thumbnail_url = wp_get_attachment_url( $post_thumbnail_id );

But I am not able to implement this code inside of my own. I tried to add it inside foreach and although before, but both does not seem to work. I do not receive any errors I could look for, it only outputs "nothing", meaning there is no style="background-image: url()";.

I would love if there is someone that could not only show, but explain, why my code is not working. I guess, that if I have solved this problem, my next question would be *where do I have to add 'thumbnail' in order to output the correct image size?

Broken code

<?php
    $args = array( 'numberposts' => '2' );
    $recent_posts = wp_get_recent_posts( $args );
    foreach( $recent_posts as $recent ){
        $post_thumbnail_id = get_post_thumbnail_id($post->ID);
        $post_thumbnail_url = wp_get_attachment_url( $post_thumbnail_id );
        echo '<div class="post">';
        echo '<div class="post_thumb" style="background-image:url('.$post_thumbnail_url.')"></div>';
        echo '<div class="content"';
        echo '<h2 class="post_title">';
        echo '<a href="'.get_permalink($recent["ID"]).'" title="'.$recent["post_title"].'" >'.$recent["post_title"].'</a>';
        echo '</h2>';
        echo '<p class="post_excerpt">'.$recent["post_excerpt"].'</p>';
        echo '</div>'; //content
        echo '</div>'; //.post
    }
?>
  • What is in <div class="post_thumb" style="background-image:url('.$post_thumbnail_url.')"></div> if you check through inspect element ? – Rohil_PHPBeginner Jun 24 '15 at 11:10
  • You could have checked it, but double check that you have uploaded a featured image to posts. :) – WisdmLabs Jun 24 '15 at 12:27
  • And in $post_thumbnail_id = get_post_thumbnail_id($post->ID); this line, you have used $post->ID. I believe that is not used in actual code, because you are using foreach loop. – WisdmLabs Jun 24 '15 at 12:28
1

Initially, I saw the double and single quotes all jumbled up. This did fix some of what I saw, but I finally had time to test the code you put up.

First step, I used var_dump on $recent_posts to make sure I was getting the usable values.

Next, I echoed each variable as it was called, to make sure I knew what was being generated. I discovered that this line, as @james-barrett said, was not calling correct information:

$post_thumbnail_id = get_post_thumbnail_id($post->ID);

So, I used @james-barrett's suggestion and changed it to:

$post_thumbnail_id = get_post_thumbnail_id($recent["ID"]);

Which then worked to get the correct ID.

After I was calling the correct information, the url() portion was filling correctly, but the next problem was getting the correct size called.

I did some research and discovered how the files were saved in the 'uploads' folder and then continued on to search for a way to access a function that would allow me to reach the one labled "thumbnail". The solution I found might not work with other sizes, or perhaps you could do more research after this, but I changed the $post_thumbnail_url variable to this:

$post_thumbnail_url = wp_get_attachment_thumb_url( $post_thumbnail_id );

Which resulted in the 150x150 image being called.

After all was said and done, I converted your broken code above to this working code:

<?php 
$args = array( 'numberposts' => '2' );
$recent_posts = wp_get_recent_posts( $args );
foreach( $recent_posts as $recent ){
        $post_thumbnail_id = get_post_thumbnail_id($recent["ID"]);
        $post_thumbnail_url = wp_get_attachment_thumb_url( $post_thumbnail_id );
        echo '<div class="post">';
        echo '<div class="post_thumb" style="background-image:url(\''.$post_thumbnail_url.'\')"></div>';
        echo '<div class="content"';
        echo '<h2 class="post_title">';
        echo '<a href="'.get_permalink($recent["ID"]).'" title="'.$recent["post_title"].'" >'.$recent["post_title"].'</a>';
        echo '</h2>';
        echo '<p class="post_excerpt">'.$recent["post_excerpt"].'</p>';
        echo '</div>'; //content
        echo '</div>'; //.post
        }
?>

Note: I adjusted the url() to be url('') because some of my older browsers require the single quotes, but I suspect you can remove them.

0

I think the issue is with the following line of code:

$post_thumbnail_id = get_post_thumbnail_id($post->ID);

It should be the ID of your $recent variable not $post.

$post_thumbnail_id = get_post_thumbnail_id($recent->ID);

or

$post_thumbnail_id = get_post_thumbnail_id($recent['ID']);

and to get a specific size of thumbnail you could do something like this:

<?php
  foreach( $recent_posts as $recent ){
    $post_thumbnail_id = get_post_thumbnail_id($recent['ID']);
    $post_thumbnail_url = wp_get_attachment_image_src($post_thumbnail_id, 'thumbnail' );

    echo '<div class="post">';
    echo '<div class="post_thumb" style="background-image:url('.$post_thumbnail_url.')"></div>';
    echo '<div class="content"';
    echo '<h2 class="post_title">';
    echo '<a href="'.get_permalink($recent["ID"]).'" title="'.$recent["post_title"].'" >'.$recent["post_title"].'</a>';
    echo '</h2>';
    echo '<p class="post_excerpt">'.$recent["post_excerpt"].'</p>';
    echo '</div>'; //content
    echo '</div>'; //.post

  }
?>
  • I have tried your code, but instead of receiving an error its like the whole block deletes itself instantly. – Marian Rick Jun 24 '15 at 19:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.