Tip: Using Masonry to create a fluid layout for your Blog

Are you a fan of Pinterest, and like the way that they have a fluid layout of boxes down the site, seemingly haphazard, but tucked in nicely like a stone wall? Perhaps you thought to yourself, "I wish my Blogger site could look like that!" After all, there are Tumblr blog templates that have this cool look.

Using some of the tips we've already written about you can make this happen on your own site in under 30 lines of code. (clean version of the code). You can see a recent example of it in action here.

The first thing to know is that we're using JQuery and a JQuery script called Masonry to accomplish this.


<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script language='javascript' src='http://masonry.desandro.com/jquery.masonry.min.js' type='text/javascript'/>
<b:if cond='data:blog.pageType == "index"'>
<script type='text/javascript'>//<![CDATA[
/**
this script was written by Confluent Forms LLC http://www.confluentforms.com
for the BlogXpertise website http://www.blogxpertise.com
any updates to this script will be posted to BlogXpertise
please leave this message and give credit where credit is due!
**/
$(document).ready(function(){
  // the dimension of your content within the columns
  var dimension = 180;
  $('#Blog1').find('img').each(function(n, image){
    var image = $(image);
    var height = image.attr('height');
    var width = image.attr('width');
    var newHeight = height/width * 180;
    image.attr('width',180).attr('height',newHeight);
  });
  // the dimension of your columns
  $('#Blog1').masonry({
    itemSelector : '.post-outer',
    columnWidth : 200
  });
});
//]]></script> 
<style>
.post-outer {
  // the dimension of your content within the columns
  width:  180px;
}
.post-icons, .post-share-buttons {
  display: none;
}
</style>
</b:if>


In the first part of this script we're including the javascript files. You want to do this right before </head> in your template.

The second part of this code we want to have added right before the </head> in your template. In this second part you'll see a line that reads "if blog pagetype = index"; what we're doing here is making the code below that line and before the </b:if> only act on the pages within your site that are considered indexes. Those are pages such as the home page, label pages, and search pages.

Inside that we're going to be making some changes to your site's CSS styling, in particular we're going to be setting the post-outer div to have a width of some number (in this case 180 pixels wide). The post-outer is the wrapper around each blog post in your site.

After that, our first part of our javascript is going to find all of the images that you have in your blog articles and resize them so they fit within the new container size, again in this example 180 pixels wide. We also make the height resize retain the original ratio to the width.

The second part of our javascript then calls the masonry functionality. Using the item selector of post-outer (the outer container for all blog posts on each index page), we're going to set a column width for the masonry elements to fill in (your blog posts). In this example I've made the column 200 pixels wide so that there is a nice margin between the articles.

Enjoy!