Yet Another Related Posts Plugin (YARPP) - Template with post thumbnails and better markup

yarp-template-image-previews.php

<?php
/*
YARPP Template: Image Previews
Description: Four columns of posts, each with a photo.
Author: radgh (RadleyGH@gmail.com)
*/

// Put your placeholder image ID here, from the media tab in the dashboard, or leave it false to disable.
$placeholder_media_id = false;

$placeholder = false;
if ( $placeholder_media_id ) $placeholder = wp_get_attachment_image_src( $placeholder_media_id, 'thumbnail' );

?>
<h3>Related Posts</h3>

<div class="yarpp-post-container yarpp-image-previews">
<?php
if (have_posts()):
	while(have_posts()): the_post();
		$class = array('yarpp-post');
		
		$image_id = get_post_thumbnail_id();
		$image = false;
		$alt = "";

		if ( $image_id ) $image = wp_get_attachment_image_src( $image_id, 'thumbnail' );
		
		if ( $image ) {
			$class[] = 'has-image has-featured-image';

			// Get alt text, prefer the alt tag, fall back to the title, fall back to the content
			$alt = get_post_meta( $image_id, '_wp_attachment_image_alt', true );
			if ( !$alt ) $alt = get_the_title($image_id);
			if ( !$alt ) $alt = wp_strip_all_tags( get_the_content($image_id) );
		}else{
			if ( !$image ) {
				$class[] = 'has-image has-placeholder';
				$image = $placeholder;
			}else{
				$class[] = 'no-image';
			}
		}

		$excerpt = wp_trim_words( strip_shortcodes(wp_strip_all_tags(get_the_content())), 15 );

		?>
		<div class="<?php echo esc_attr(implode(' ', $class)); ?> ">
			<?php if ( $image ) { ?>
			<div class="yarpp-post-image">
				<a href="<?php the_permalink(); ?>" title="Continue reading <?php echo esc_attr(get_the_title()); ?>">
					<img src="<?php echo esc_attr($image[0]); ?>" alt="<?php echo esc_attr($alt); ?>" />
				</a>
			</div>
			<?php } ?>
			<div class="yarpp-post-content">
				<div class="yarpp-post-title">
					<a href="<?php the_permalink(); ?>" title="Continue reading <?php echo esc_attr(get_the_title()); ?>"><?php the_title(); ?></a>
				</div>
				<div class="yarpp-post-text">
					<?php echo esc_html($excerpt); ?>
				</div>
			</div>
		</div>
		<?php
	endwhile;
else:
	?>
	<p>No related posts.</p>
	<?php
endif;
?>
</div>

CSS:

.yarpp-image-previews {
    margin: 20px 0;
}

.yarpp-image-previews:after {
    content: '';
    display: block;
    clear: both;
}

.yarpp-image-previews .yarpp-post {
    width: 25%;
    float: left;
    box-sizing: border-box;
    padding: 0 2px;
}

.yarpp-image-previews .yarpp-post-image {
    overflow: hidden;
    max-height: 150px;
}

.yarpp-image-previews .yarpp-post-image img {
    width: auto;
    height: auto;
    max-width: 100%;
    margin: 0 auto;
    display: block;
}

.yarpp-image-previews .yarpp-post-title {
    font-size: 1em;
    line-height: 1.35em;
    margin: 5px 0 5px;
}
.yarpp-image-previews .yarpp-post-text {
    font-size: 0.9em;
    line-height: 1.35em;
}

@media ( max-width: 600px ) {
    .yarpp-image-previews .yarpp-post {
        width: 50%;
        margin: 0 0 20px;
    }
    .yarpp-image-previews .yarpp-post:nth-child(odd) {
        clear: both;
    }
}
@media ( max-width: 450px ) {
    .yarpp-image-previews .yarpp-post {
        width: 100%;
        max-width: 300px;
        margin: 0 auto 20px;
        float: none;
    }
}