YARPP Custom Template for Scroll Checkpoint

functions.php

/*
 * This is the code that is required to create the 100x80 thumbnail on upload.  
 * It only affects newly uploaded images, so you may need to use a tool like 
 * http://wordpress.org/extend/plugins/regenerate-thumbnails/
 */

if ( function_exists( 'add_theme_support' ) ) {
	add_theme_support( 'post-thumbnails' );
	add_image_size( 'relatedsize', 100, 80, true);
}

yarpp-template-thumbnail.css

/*
 * CSS Styling used on http://scrollcheckpoint.sevenspark.com
 */

.relatedlist{
	padding:0;
	margin:0;
}
.relatedlist li{
	list-style:none;
	margin:0;
	auto:0;
	font-weight:bold;
	width:112px;
	float:left;
	margin-right:10px;
	margin-bottom:10px;
}
.relatedlist li a img{
	margin-bottom:10px;
	padding:6px;
	background:transparent url(images/overlay_25.png) repeat;
	display:block;
	
	border-radius:2px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;	
}

yarpp-template-thumbnail.php

<?php 
/* Select this template in the YARPP Widget */

if ($related_query->have_posts()):?>
<ol class="relatedlist">
	<?php while ($related_query->have_posts()) : $related_query->the_post(); ?>
		<?php if (function_exists('has_post_thumbnail')): if (has_post_thumbnail()):?>
		<li><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('relatedsize'); ?><span class="relatedtitle"><?php the_title();?></span></a></li>
		<?php endif; endif; ?>
	<?php endwhile; ?>
</ol>

<?php else: ?>
<p>No related photos.</p>
<?php endif; ?>