Categories
Wordpress

How to get the Featured Image or the First Image in the post?

Supposing you want to have an image aside of each post in your post list page. The WordPress function get_the_post_thumbnail() is what you need. Make sure to set a  featured image inside the edit post (or custom post) page.

If you forget to set the featured image inside a post, WordPress will consider as featured image the first uploaded image from your computer. Obviously if you do not have any image in the content of a post, the featured image for it will not exist.

What happens if you write a post and add images from the “WordPress media library” (without uploading images from your computer)?
Well, get_the_post_thumbnail() will not return any image at all.

If it is your blog/website it will not be a big problem, you will notice the error and you will fix it straight away.
But if you set up a WordPress website for some of your clients that are not really web oriented, the following solution will save you a lot of time (avoiding “not easy” support phone calls).

Copy the following code in your theme functions.php

// POST IMAGE
function get_default_post_image($size = 'thumbnail', $post_id = false){
	global $post, $id;
	$post_id = (int)$post_id;
	if (!$post_id) $post_id = $post->ID;
	$image = '';
	if(has_post_thumbnail($post_id)) {
		$image = get_the_post_thumbnail($post_id, $size);
	} else {
		$args = array(
			'post_parent' => $post_id
			, 'post_type' => 'attachment'
			, 'post_mime_type' => 'image'
			, 'post_status' => 'any'
			, 'numberposts' => 1
			, 'order' => 'ASC'

		);
		$attachments = get_children($args);
		foreach($attachments as $attachment) {
			//$attachment = array_shift($attachments);
			$image = wp_get_attachment_image($attachment->ID, $size);
		}
	}
	return $image;
}
function the_default_post_image($size = 'thumbnail', $post_id = false){
	$img = get_default_post_image($size, $post_id);
	if( empty($img) ){
		$img = '<img src="'.get_bloginfo('stylesheet_directory').'/images/default_post_image.png" alt="no image" />';
	}
	echo $img;
}

Make sure you add a “not available” image (/images/default_post_image.png) in your theme folder.

Then you will able to use the_default_post_image()

<?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
    ...
    <?php the_default_post_image(); ?>
    ...
    <?php endwhile; ?>
<?php endif; ?>

inside your theme (inside your post loop).

An alternative could be get_default_post_image()

<?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
    ...
    <?php echo get_default_post_image(); ?>
    ...
    <?php endwhile; ?>
<?php endif; ?>

Usage

<?php the_default_post_image( $size, $post_id ); ?>

the_default_post_image will return an HTML image (/images/default_post_image.png when not image is set in the post)

<?php echo get_default_post_image( $size, $post_id ); ?>

get_default_post_image() will return an HTML image as string and  an empty string when not image is set in the post.

Parameters

size
(string/array) (Optional) Either a string keyword (thumbnail, medium, large or full) or a 2-item array representing width and height in pixels, e.g. array(32,32).
Default: ‘thumbnail’

post_id
(integer) (Optional) Post ID.
Default: Post ID