micro.e33.io

In a previous post I covered how to get the first or Featured Image in WordPress for displaying the image, but sometimes just the image URL is needed for Open Graph and Twitter Card header tags, etc. The method below first checks for a Featured Image, then for the first attached image, and finally a default image if needed. This also allows you to designate the size (thumbnail, medium, large or full), and it outputs the image URL without the img tag and associated image attributes.

<?php
function evo_thumbnail_image_url() {
	if ( has_post_thumbnail() ) {
		the_post_thumbnail_url( 'large' );
	} else {
		global $post;
		$args = array(
			'post_type'      => 'attachment',
			'numberposts'    => -1,
			'post_mime_type' => 'image',
			'post_status'    => null,
			'post_parent'    => $post->ID,
			'posts_per_page' => 1
		);
		$attachments = get_posts( $args );
		if ( $attachments ) {
			foreach ( $attachments as $attachment ) {
				$src = wp_get_attachment_image_src( $attachment->ID, 'large' );
				if ( $src ) {
					echo $src[0];
				}
			}
		} else {
			echo get_stylesheet_directory_uri() . '/assets/images/default-post-image.png';
		}
	}
}

Use the function in the loop like this.

<?php evo_thumbnail_image_url(); ?>

If only the Featured Image URL is needed, the method below will work.

<?php the_post_thumbnail_url( 'large' ); ?>

When all post content except the images is needed for a section of a post/page layout, like a post summary or a custom post type, the method below strips all images from the post content. This works well when combined with either code from the previous two posts micro.e33.io/112 and micro.e33.io/123 to make unique layouts as needed.

<?php
function evo_post_without_images() {
	global $post;
	$content = get_the_content();
	$content = preg_replace( '/<img[^>]+\>/i', ' ', $content );
	$content = apply_filters( 'the_content', $content );
	$content = str_replace( ']]>', ']]>', $content );
	echo $content;
}

Use the function in the loop like this.

<?php evo_post_without_images(); ?>

If only the post excerpt is needed instead of the full content, the method below displays the WordPress standard 55 words of the post with HTML tags stripped out.

<?php echo wp_strip_all_tags( get_the_excerpt() ); ?>

Single post pages with multiple images like a photoset, etc. can be very resource heavy when browsers download images that are larger than needed. The method below allows you to designate the initial size (thumbnail, medium, large or full), while using the native WordPress responsive image support by including srcset and sizes attributes to the image. Browsers will download the most appropriate size and ignore the others. This method also ignores the Featured Image of a post.

<?php
function evo_all_post_images() {
	global $post;
	$args = array(
		'post_type'   => 'attachment',
		'numberposts' => -1,
		'post_status' => 'any',
		'post_parent' => $post->ID,
		'exclude'     => get_post_thumbnail_id(),
	);
	$attachments = get_posts( $args );
	if ( $attachments ) {
		foreach ( $attachments as $attachment ) {
			echo wp_get_attachment_image( $attachment->ID, 'large', false, array( 'class'=>'img-responsive-post' ) );
		}
	}
}

Use the function in the loop like this.

<?php evo_all_post_images(); ?>

There are several ways to get the first or Featured Image in WordPress for use on a Home page blog feed, an Archives page feed, etc. The method below first checks for a Featured Image, then for the first attached image, and finally a default image if needed. This also allows you to designate the initial size (thumbnail, medium, large or full), while using the native WordPress responsive image support by including srcset and sizes attributes to the image. Browsers will download the most appropriate size and ignore the others.

<?php
function evo_thumbnail_image() {
	if ( has_post_thumbnail() ) {
		the_post_thumbnail( 'medium' );
	} else {
		global $post;
		$args = array(
			'post_type'   => 'attachment',
			'numberposts' => -1,
			'post_status' => null,
			'post_parent' => $post->ID
		);
		$attachments = get_posts( $args );
		if ( $attachments ) {
			echo wp_get_attachment_image( $attachments[0]->ID, 'medium', false, array( 'class'=>'img-responsive' ) );
		} else {
			echo '<img src="' . get_stylesheet_directory_uri() . '/assets/images/default-post-image.png' . '" />';
		}
	}
}

Use the function in the loop like this.

<?php evo_thumbnail_image() ?>

If only the Featured Image is needed, the method below will work.

<?php the_post_thumbnail( 'medium' ); ?>