WordPress Blog Index CSS Masonry Layout - php

Question

I'm trying to use CSS multicolumn to create a masonry layout for the blog index page of a WordPress website I'm building, and I'm having some issues with it. I'm using Bones as the starter theme.
I adjusted the loop in the home.php file to create the masonry effect:
<?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(); ?>
I'm trying to get the image to fill the entire .masonry-item div with the post thumbnail (featured image), and right now, the .masonry-item div is larger that the post thumbnail.
There's also an empty <a> tag that appears under the image and I can't figure out where it's coming from.
I'm also trying to get the post title to appear over the thumbnail image once it, and I haven't figured out how to get it to work.
Here's a link to my test site: http://tippingpointphoto.flywheelsites.com/blog/
Any help would be much appreciated!

Answer 1

Inside your .masonry-thumbnail div there is a <a> link, this is the empty tag. Give it a class name and assign it these style properties:
.link { // for example if you called it link
display:block; // this will wrap it around the image
position:relative; // to position the caption
}
Now update your .caption class and add:
position:absolute;
top:auto;
bottom:0; // to text will start from the bottom of the image
z-index:1; // to position the text above the image
And when i looked at your site the image width appeared to match the div width so I'm assuming you managed to fix that problem? If not change it's css so that width is set to 100%.