I followed the 'Getting started' tutorials on the Packery website, but I still can't get my tumblr photo posts to work at all with the library. I'm not sure what I need to change or add since the Packery tutorials are pretty vague.
<!DOCTYPE html>
<html>
<head>
<script src="http://packery.metafizzy.co/packery.pkgd.min.js"></script>
<script>
var postsContainer = document.querySelector('#posts');
var pckry = new Packery( postsContainer, {
//options
itemSelector: '.container',
gutter:5
});
pckry.bindResize(postsContainer);
</script>
<link href='http://fonts.googleapis.com/css?family=Monofett|Varela|Londrina+Shadow' rel='stylesheet' type='text/css'>
<!-- fonts
font-family: 'Monofett', cursive;
font-family: 'Varela', sans-serif;
font-family: 'Londrina Shadow', cursive;
-->
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<!-- DEFAULT COLORS -->
<meta name="color:Background" content="#eee"/>
<meta name="color:Content Background" content="#fff"/>
<meta name="color:Text" content="#000"/>
<style type="text/css">
*{margin:0px;
padding:0px;}
html{height:100%;}
body{
background-color:{color:Background};
margin:0px;
height:100%;
}
#sideBar{
background-color:{color:Content Background};
width:150px;
height:100%; ;
margin:auto 0;
margin-right:20px;
padding-left:10px;
float:left;
}
h1{font-family: 'Monofett', cursive;;
font-size:43px;
margin-bottom:25px;
color:black;}
h2{ font-family: 'Varela', sans-serif;
font-size:12px;
margin-bottom:10px;}
p{margin-bottom:10px;}
a:link, a:visited{font-family: 'Varela', sans-serif;
font-size:.95em;
text-decoration:none;
color:black;
-webkit-transition:margin-left 1s, margin-right 1s, color .5s;
-webkit-timing-function:ease;}
#arrow{color:black;
font-family: 'Varela', sans-serif;
fonr-size:.95em;
-webkit-transition:color.5s;
-wekit-timing-function:ease;}
a:hover{color:white;
margin-left:10px;
margin-right:40px;}
nav{margin-left:0px}
#posts{
float:left;
list-style:none;
}
.postPhoto{
float:left;
margin:5px;
}
#wrapper{
height:100%;
width:700px;
}
.pagination{display:none;}
</style>
</head>
<body>
<div id="wrapper">
<div id="sideBar">
<h1>{Title}</h1>
<nav>
<p> <a href ="">Music </a> <span id="arrow"> >> </span> </p>
<p> <a href="">Code </a> <span id="arrow"> >> </span> </p>
<p> <a href="">Shop </a> <span id="arrow"> >> </span> </p>
<p> <a href="">About </a> <span id="arrow"> >> </span> </p>
</nav>
</div>
<div id="posts"> <!--content -->
{block:Posts}
<div class="container">
{block:Photo}
<div class="postPhoto">
<img src="{PhotoURL-500}" alt="{PhotoAlt}" width="200px"/>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Photo}
{block:Video}
<li class="post video">
{Video-250}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</li>
{/block:Video}
</div><!--end container -->
{/block:Posts}
</div>
</div>
</body>
</html>
A couple things.
1) Your #posts container is floated and therefore is only as wide as the content within it. Even if Packery was working it would just line them all up in a single column. You'll need to apply it a width. If you're not concerned with IE8, you can do something like this:
#posts {
width: -webkit-calc(100% - 180px);
width: -moz-calc(100% - 180px);
width: calc(100% - 180px);
}
2) The Packery error is odd, I'm not entirely sure what's causing it. But by butting this simple bit of JS through the Console, I was able to get it running:
var container = document.querySelector('#posts');
var pckry = new Packery( container, {
// options
itemSelector: '.container',
gutter: 10
});
Make sure this code comes at the end of your document, right before the closing </body>.
3) Since your posts are images, you'll need to make sure you're providing them a width and height so that Packery knows how big each post is. Unfortunately, since you're not using a standard Tumblr width, you'll need to include the imagesLoaded plugin and place your code inside its callback.
Easy way using jQuery:
var container = document.querySelector('#posts');
container.imagesLoaded( function() {
var pckry = new Packery( container, {
// options
itemSelector: '.container',
gutter: 10
});
});
If you were using a standard Tumblr size (like 250px) you'd be able to simply add a width and height attribute to each image and not need to worry about using imagesLoaded, like this:
<img alt="" src="{PhotoURL-250)" height="{PhotoHeight-250}" width="{PhotoWidth-250}" />