Индекс блога WordPress CSS Masonry Layout

Я пытаюсь использовать многоколонку CSS для создания макета кладки для индексной страницы блога веб-сайта WordPress, который я создаю, и у меня возникли некоторые проблемы с ним. Я использую Кости в качестве стартовой темы.

Я настроил петлю в home.php файл для создания эффекта кладки:

<?php get_header(); ?>
<div id="content">
<div id="inner-content" class="wrap cf">
<main id="main" class="m-all t-2of3 d-5of7 cf" role="main" itemscope itemprop="mainContentOfPage" itemtype="http://schema.org/Blog">
<div class="masonry-container">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="masonry-item">
<article id="post-<?php the_ID(); ?>" <?php post_class( 'cf' ); ?> role="article">
<a href="<?php the_permalink(); ?>">
<section class="entry-content cf">
<h1 class="h2 entry-title"><?php the_title(); ?></h1>
<?php if ( has_post_thumbnail() ) : ?>
<div class="masonry-thumbnail">
<?php the_post_thumbnail('masonry-thumb'); ?>
<span class="caption"><span><?php the_title(); ?></span></span></a>
<?php endif; ?>
</div><!--.masonry-thumbnail-->
</div> <!--.masonry-item-->
<div class="masonry-post-excerpt">
<?php the_excerpt(); ?>
</div><!--.masonry-post-excerpt-->
<div class="blog-index-content"><?php the_content(); ?></div></a>
</section>
</article>
<?php endwhile; ?>
<?php bones_page_navi(); ?>
<?php else : ?>
<article id="post-not-found" class="hentry cf">
<header class="article-header">
<h1><?php _e( 'Oops, Post Not Found!', 'bonestheme' ); ?></h1>
</header>
<section class="entry-content">
<p><?php _e( 'Uh Oh. Something is missing. Try double checking things.', 'bonestheme' ); ?></p>
</section>
<footer class="article-footer">
<p><?php _e( 'This is the error message in the index.php template.', 'bonestheme' ); ?></p>
</footer>
</article>
<?php endif; ?>
</div> <!--.masonry-container-->
</main>
<?php get_sidebar(); ?>
</div>
</div>
<?php get_footer(); ?>

Я пытаюсь получить изображение, чтобы заполнить весь .masonry-item div с миниатюрой поста (избранным изображением), и прямо сейчас .masonry-item div больше, чем миниатюра поста.

Там также пусто <a> тег, который появляется под изображением, и я не могу понять, откуда он.

Я также пытаюсь сделать так, чтобы заголовок сообщения появлялся на миниатюре, и я не понял, как заставить его работать.

Вот ссылка на мой тестовый сайт: http://tippingpointphoto.flywheelsites.com/blog/

Любая помощь приветствуется!