How can I add thumbnails to front page code for the Recent Posts area?
-
I have a site that is not administered by WordPress but has a front page section that is managed by it. It is the Recent Posts area of the front page. I have got the post links to appear using the following code plugged into the relevant part of the page:
<div class="extras-blog"> <h4>RECENT POSTS</h4> <?php include('cp-blog/wp-load.php'); // Blog path // Get the last 'numberposts' posts $recent_posts = wp_get_recent_posts(array( 'numberposts' => 15, 'post_thumbnail' => thumbnail, 'post_type' => 'post', 'post_status' => 'publish' )); // Display them as list echo '<ul>'; foreach($recent_posts as $post) { echo '<li>? <a href="', get_permalink($post['ID']), '">', $post['post_title'], '</a></li>'; } echo '</ul>'; ?> </div>How do I add code to also show the post thumbnail to the left of the link (the first image in the post)? If one clicks on one of the posts, one will get taken to the page where the post appears. One will be able to see the post list on the right (on laptops/computers) or below the post (on mobile devices). You’ll see the thumbnails there. But that’s because I have used a widget called ‘Recent Posts with Thumbnail’. When emailing the developer of that widget he said I could use the the_post_thumbnail() and get_the_post_thumbnail() code that is inherent in WP, but I don’t know how to implement it. Any help would be appreciated.
The page I need help with: [log in to see the link]
-
Here is a starting point … using get_the_post_thumbnail
Please compare with your code above. Let’s remove one line from the wp_get_recent_posts array and we use $post[‘ID’] to get that post’s thumbnail or featured image.
<div class="extras-blog"> <h4>RECENT POSTS</h4> <?php include('cp-blog/wp-load.php'); // Blog path // Get the last 'numberposts' posts $recent_posts = wp_get_recent_posts(array( 'numberposts' => 15, // 'post_thumbnail' => thumbnail, // remove this line 'post_type' => 'post', 'post_status' => 'publish' )); // Display them as list echo '<ul>'; foreach($recent_posts as $post) { // Get the post thumbnail and echo to the left of the link $my_img = get_the_post_thumbnail( $post['ID'] ); echo '<li>? ', $my_img, '<a href="', get_permalink($post['ID']), '">', $post['post_title'], '</a></li>'; } echo '</ul>'; ?> </div>The thumbnail, if available, would normally be displayed above the link at the front end (but it depends on your active stylesheets). If you want to display the thumbnail and the link side by side, then some CSS adjustments might be necessary. Hope these help.
Hi Gerry,
Thanks for the time and effort you put into your reply. Much appreciated. I adjusted my code (actually swapped out what was there for your code because I had changed it to something else) but the thumbnails still do not appear. I had to adjust the code as well as there was a diamond with a question mark being thrown up to the left of each post. The adjustment was:
echo '<li>', '»', $my_img, '<a href="', get_permalink($post['ID']), '">', $post['post_title'], '</a></li>'; }I did look at the page you provided the link to but it was not easy to understand how to implement the function I require, which you have shown nicely. Is there something that is lacking somewhere in any of the files or the script? The theme I am using is Twentyseventeen. The theme works brilliantly when one clicks on the one of the posts in the Recent Posts area or on the ‘My Blog’ menu link at the top. Its just this one little thing on the front page I am trying to get working (thumbnail beside the post title).
Hi bcworkz,
I checked the functions.php file in the Twentyseventeeen folder and it does have the
add_theme_support( 'post-thumbnails' );line in it.When activating the Featured Image in the editor box it looked awful on the post page, making the top of the post go out of whack with the rest of the page so I didn’t implement it. When using the ‘Recent Posts with Image’ plugin it does take the first image in the post and posts it as a thumbnail in the extras section of the standalone post page (to the right of the main content on a laptop or desktop or underneath the post on a mobile device). I posted about this on the support page for the plugin and he mentioned the that functions get-the-post-thumbnail() and the_post_thumbnail() should help.
So I am a bit stumped as to why the code given by Gerry doesn’t work. Can I designate an image in the editor box but have it not appear? I could probably do this via CSS using the
display:none;parameter but would have to probably add a class so that it would not display only on the post page itself.I have looked at the code in the Recent Posts with Image plugin and found this section of code:
/** * Returns the thumbnail of first post's image or empty string on failure * * @access private * @since 2.0 * * @return bool success on finding an image */ private function the_first_post_image ( $attr ) { // look for first image $thumb_id = $this->get_first_content_image_id(); // if there is first image then show first image if ( $thumb_id ) : return wp_get_attachment_image( $thumb_id, $this->customs[ 'thumb_dimensions' ], $attr ); else : return ''; endif; // thumb_id }I wondering if I can somehow use the above code to create the thumbnail where I want it by plugging it into the functions.php file for the Twentyseventeen theme and calling it somehow in the page where I need it.
Note: When I do set a featured image it does appear on the front page in the Recent Posts area against the post where the Featured Image was enabled, but it was HUGE (the original size of the image). So Gerry’s code does work when the Featured Image is set, but since I have not set any featured images the thumbnail doesn’t appear.
Gerry, everything you gave in your recent post worked apart from having to correct the class. The code that worked was:
/* hide Twenty Seventeen single post thumbnail */ .single-post .single-featured-image-header { display: none; }The link text doesn’t flow that nicely around the thumbnail so that’s the next item to deal with but according to my initial query this thread is solved.
bcworkz, I understand what you are saying but the implementation is a bit beyond me at the moment (I know HTML and CSS very well but know only the basics of PHP). What I find frustrating is that the documentation for all the functions state what they are and gives the syntax for them (how they are written as stand alone functions) but do not give a working example of how they should be used. Unfortunately, that’s the way these ‘technical’ docs seem to be always written.
Gerry was able to show how to implement a function by creating the variable that made things work the way I wanted them to, but it wouldn’t be good for everyone if code was being written for me all the time.
Thank you to both of you for taking the time to help on this issue.
- The topic ‘How can I add thumbnails to front page code for the Recent Posts area?’ is closed to new replies.