micro.e33.io

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' ); ?>

Even though the User Agent Stylesheet CSS across modern browsers is fairly consistent, I sometimes like to start from scratch when writing CSS. The CSS Reset below makes for a clean slate to start CSS from, while sprinkling in a few WordPress-specific tags and making media items responsive. Some of it might be a bit overkill or heavy-handed, but it’s a solid start that works for me and it’s only 775 bytes.

This is my current CSS Reset for WordPress.

* {
	vertical-align: baseline;
	font: inherit;
	font-size: 100%;
	border: 0;
	outline: 0;
	padding: 0;
	margin: 0;
}
html {
	box-sizing: border-box;
	line-height: 1;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
}
*,
*:before,
*:after {
	box-sizing: inherit;
}
hr {
	box-sizing: content-box;
	height: 0;
}
pre,
code {
	font-family: monospace, monospace;
}
strong,
b {
	font-weight: 700;
}
blockquote,
q,
em,
i {
	font-style: italic;
}
ins {
	text-decoration: underline;
}
del,
s {
	text-decoration: line-through;
}
ol,
ul {
	list-style: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
input,
textarea {
	border: 1px solid;
	border-radius: 0;
	max-width: 100%;
	-webkit-appearance: none;
	-moz-appearance: none;
}
::-webkit-search-decoration {
	-webkit-appearance: none;
}
img,
video,
audio {
	display: block;
}
img,
video {
	height: auto;
	max-width: 100%;
}
embed,
iframe,
object {
	max-width: 100%;
}

This is a minified version of the code above.

*{vertical-align:baseline;font:inherit;font-size:100%;border:0;outline:0;padding:0;margin:0}html{box-sizing:border-box;line-height:1;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}*,*:before,*:after{box-sizing:inherit}hr{box-sizing:content-box;height:0}pre,code{font-family:monospace,monospace}strong,b{font-weight:700}blockquote,q,em,i{font-style:italic}ins{text-decoration:underline}del,s{text-decoration:line-through}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:0}input,textarea{border:1px solid;border-radius:0;max-width:100%;-webkit-appearance:none;-moz-appearance:none}::-webkit-search-decoration{-webkit-appearance:none}img,video,audio{display:block}img,video{height:auto;max-width:100%}embed,iframe,object{max-width:100%}