How to implement Packery library with Tumblr

StackOverflow https://stackoverflow.com/questions/18384052

Pergunta

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>
Foi útil?

Solução

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}" />
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top