search

desandro / masonry

:love_hotel: Cascading grid layout plugin
https://masonry.desandro.com
16.39k stars 2.11k forks source link

Help with setting up masonry.js on a tumblelog #15

Closed sstherrien closed 14 years ago

sstherrien commented 14 years ago

This was the only place I could think of to ask for help, but, I'm trying to make my Tumblr theme work with masonry.js, and all that's happening is a small column to the left of the page is being made.

Here is my code, in the order of JavaScript, HTML, and CSS:

< script type = 'text/javascript' src = 'http://static.tumblr.com/c427a2a/gGNl6h94x/jquery-1.4.2.min.js'> </ script > < script type = 'text/javascript' src = 'http://static.tumblr.com/c427a2a/HxNl6fwva/jquery.masonry.js'> < / script > < script type = "text/javascript" > $ (function(){ $ ('#section'). masonry({ single Mode: true, item Selector: '. post' }); }); < / script> (Spaces were put so the code would show up)

<div id='section'>
{block:Posts}

{block:Text}
<div class='post text'>
  {block:Title}
    <h3><a class='post-title' href='{Permalink}'>{Title}</a></h3>
  {/block:Title}
    {Body}
{block:Date}
<div class="post-footer">
  <div class="date">
  <a class='post-title' href='{Permalink}'><h4>
  {block:Reblog}Reblogged{/block:Reblog}
  {block:NotReblog}Posted{/block:NotReblog}                     
  {Month} {DayOfMonth}{DayOfMonthSuffix} at {12Hour}:{Minutes} {CapitalAmPm}</a>
  {block:Reblog}
  from <a class='post-title reblog' href='{ReblogParentURL}'>{ReblogParentName}</a>
  {block:RebloggedFromReblog} (originally from <a class='post-title' href='{ReblogRootURL}' class='reblogurl'> {ReblogRootName}</a>){/block:RebloggedFromReblog}{/block:Reblog}
  {block:FromBookmarklet}from bookmarklet{/block:FromBookmarklet}
  {block:FromMobile}from mobile{/block:FromMobile}</a> {block:IfDisqusShortname}| <a class='post-title' href='{Permalink}#disqus_thread'>Comments</a>{/block:IfDisqusShortname} {block:IfShowNotes}{block:NoteCount}| <a class='post-title' href='{Permalink}#notes'>{NoteCountWithLabel}</a>{/block:NoteCount}{/block:IfShowNotes}{block:IfShowTags}{block:HasTags}<br/><br/> <h4>{block:Tags}<a class='tag post-title' href='{TagURL}'>{Tag}</a> {/block:Tags}</h4>{/block:HasTags}{/block:IfShowTags}
  </div>
</div>
{/block:Date}
{block:IfShowNotes}
{block:PostNotes}
<div id='notes'>
{PostNotes}
</div>
{/block:PostNotes}
{/block:IfShowNotes}
</div> 
{/block:Text}

{block:Photo}
<div class='post photo'>
  {LinkOpenTag}<img src='{PhotoURL-500}' alt='{PhotoAlt}'>{LinkCloseTag}
    {block:Caption}
      {Caption}
    {/block:Caption}
{block:Date}
<div class="post-footer">
  <div class="date">
  <a class='post-title' href='{Permalink}'><h4>
  {block:Reblog}Reblogged{/block:Reblog}
  {block:NotReblog}Posted{/block:NotReblog}                     
  {Month} {DayOfMonth}{DayOfMonthSuffix} at {12Hour}:{Minutes} {CapitalAmPm}</a>
  {block:Reblog}
  from <a class='post-title reblog' href='{ReblogParentURL}'>{ReblogParentName}</a>
  {block:RebloggedFromReblog} (originally from <a class='post-title' href='{ReblogRootURL}' class='reblogurl'> {ReblogRootName}</a>){/block:RebloggedFromReblog}{/block:Reblog}
  {block:FromBookmarklet}from bookmarklet{/block:FromBookmarklet}
  {block:FromMobile}from mobile{/block:FromMobile}</a> {block:IfDisqusShortname}| <a class='post-title' href='{Permalink}#disqus_thread'>Comments</a>{/block:IfDisqusShortname} {block:IfShowNotes}{block:NoteCount}| <a class='post-title' href='{Permalink}#notes'>{NoteCountWithLabel}</a>{/block:NoteCount}{/block:IfShowNotes}{block:IfShowTags}{block:HasTags}<br/><br/> <h4>{block:Tags}<a class='tag post-title' href='{TagURL}'>{Tag}</a> {/block:Tags}</h4>{/block:HasTags}{/block:IfShowTags}
  </div>
</div>
{/block:Date}
{block:IfShowNotes}
{block:PostNotes}
<div id='notes'>
{PostNotes}
</div>
{/block:PostNotes}
{/block:IfShowNotes}
</div>
{/block:Photo}

{block:Photoset}
<div class='post photoset'>
  <img src='{Photoset-500}' alt='{PhotoAlt}'>
    {block:Caption}
      {Caption}
    {/block:Caption}
{block:Date}
<div class="post-footer">
  <div class="date">
  <a class='post-title' href='{Permalink}'><h4>
  {block:Reblog}Reblogged{/block:Reblog}
  {block:NotReblog}Posted{/block:NotReblog}                     
  {Month} {DayOfMonth}{DayOfMonthSuffix} at {12Hour}:{Minutes} {CapitalAmPm}</a>
  {block:Reblog}
  from <a class='post-title reblog' href='{ReblogParentURL}'>{ReblogParentName}</a>
  {block:RebloggedFromReblog} (originally from <a class='post-title' href='{ReblogRootURL}' class='reblogurl'> {ReblogRootName}</a>){/block:RebloggedFromReblog}{/block:Reblog}
  {block:FromBookmarklet}from bookmarklet{/block:FromBookmarklet}
  {block:FromMobile}from mobile{/block:FromMobile}</a> {block:IfDisqusShortname}| <a class='post-title' href='{Permalink}#disqus_thread'>Comments</a>{/block:IfDisqusShortname} {block:IfShowNotes}{block:NoteCount}| <a class='post-title' href='{Permalink}#notes'>{NoteCountWithLabel}</a>{/block:NoteCount}{/block:IfShowNotes}{block:IfShowTags}{block:HasTags}<br/><br/> <h4>{block:Tags}<a class='tag post-title' href='{TagURL}'>{Tag}</a> {/block:Tags}</h4>{/block:HasTags}{/block:IfShowTags}
  </div>
</div>
{/block:Date}
{block:IfShowNotes}
{block:PostNotes}
<div id='notes'>
{PostNotes}
</div>
{/block:PostNotes}
{/block:IfShowNotes}
</div>
{/block:Photoset}

{block:Quote}
<div class='post quote'>
  <h3 style='display: block'><a style='display: block' class='post-title' href='{Permalink}'>“{Quote}”</a></h3>
  {block:Source}
    <p>- {Source}</p>
  {/block:Source}
{block:Date}
<div class="post-footer">
  <div class="date">
  <a class='post-title' href='{Permalink}'><h4>
  {block:Reblog}Reblogged{/block:Reblog}
  {block:NotReblog}Posted{/block:NotReblog}                     
  {Month} {DayOfMonth}{DayOfMonthSuffix} at {12Hour}:{Minutes} {CapitalAmPm}</a>
  {block:Reblog}
  from <a class='post-title reblog' href='{ReblogParentURL}'>{ReblogParentName}</a>
  {block:RebloggedFromReblog} (originally from <a class='post-title' href='{ReblogRootURL}' class='reblogurl'> {ReblogRootName}</a>){/block:RebloggedFromReblog}{/block:Reblog}
  {block:FromBookmarklet}from bookmarklet{/block:FromBookmarklet}
  {block:FromMobile}from mobile{/block:FromMobile}</a> {block:IfDisqusShortname}| <a class='post-title' href='{Permalink}#disqus_thread'>Comments</a>{/block:IfDisqusShortname} {block:IfShowNotes}{block:NoteCount}| <a class='post-title' href='{Permalink}#notes'>{NoteCountWithLabel}</a>{/block:NoteCount}{/block:IfShowNotes}{block:IfShowTags}{block:HasTags}<br/><br/> <h4>{block:Tags}<a class='tag post-title' href='{TagURL}'>{Tag}</a> {/block:Tags}</h4>{/block:HasTags}{/block:IfShowTags}
  </div>
</div>
{/block:Date}
{block:IfShowNotes}
{block:PostNotes}
<div id='notes'>
{PostNotes}
</div>
{/block:PostNotes}
{/block:IfShowNotes}
</div>
{/block:Quote}

{block:Link}
<div class='post link'>
  <h3><a class='post-title' href='{URL}' {Target}>{Name}</a></h3>
  {block:Description}
    {Description}
  {/block:Description}
{block:Date}
<div class="post-footer">
  <div class="date">
  <a class='post-title' href='{Permalink}'><h4>
  {block:Reblog}Reblogged{/block:Reblog}
  {block:NotReblog}Posted{/block:NotReblog}                     
  {Month} {DayOfMonth}{DayOfMonthSuffix} at {12Hour}:{Minutes} {CapitalAmPm}</a>
  {block:Reblog}
  from <a class='post-title reblog' href='{ReblogParentURL}'>{ReblogParentName}</a>
  {block:RebloggedFromReblog} (originally from <a class='post-title' href='{ReblogRootURL}' class='reblogurl'> {ReblogRootName}</a>){/block:RebloggedFromReblog}{/block:Reblog}
  {block:FromBookmarklet}from bookmarklet{/block:FromBookmarklet}
  {block:FromMobile}from mobile{/block:FromMobile}</a> {block:IfDisqusShortname}| <a class='post-title' href='{Permalink}#disqus_thread'>Comments</a>{/block:IfDisqusShortname} {block:IfShowNotes}{block:NoteCount}| <a class='post-title' href='{Permalink}#notes'>{NoteCountWithLabel}</a>{/block:NoteCount}{/block:IfShowNotes}{block:IfShowTags}{block:HasTags}<br/><br/> <h4>{block:Tags}<a class='tag post-title' href='{TagURL}'>{Tag}</a> {/block:Tags}</h4>{/block:HasTags}{/block:IfShowTags}
  </div>
</div>
{/block:Date}
{block:IfShowNotes}
{block:PostNotes}
<div id='notes'>
{PostNotes}
</div>
{/block:PostNotes}
{/block:IfShowNotes}
</div>
{/block:Link}

{block:Chat}
<div class='post chat'>
  {block:Title}
    <h3><a class='post-title' href="{Permalink}">{Title}</a></h3>
  {/block:Title}
  {block:Lines}
  <ul class='chatlines'>
  <li class='lines{Alt}'>
    {block:Label}
      <span class="label"><strong>{Label}</strong></span>
    {/block:Label}
   {Line}
  </li>
  </ul>
  {/block:Lines}
{block:Date}
<div class="post-footer">
  <div class="date">
  <a class='post-title' href='{Permalink}'><h4>
  {block:Reblog}Reblogged{/block:Reblog}
  {block:NotReblog}Posted{/block:NotReblog}                     
  {Month} {DayOfMonth}{DayOfMonthSuffix} at {12Hour}:{Minutes} {CapitalAmPm}</a>
  {block:Reblog}
  from <a class='post-title reblog' href='{ReblogParentURL}'>{ReblogParentName}</a>
  {block:RebloggedFromReblog} (originally from <a class='post-title' href='{ReblogRootURL}' class='reblogurl'> {ReblogRootName}</a>){/block:RebloggedFromReblog}{/block:Reblog}
  {block:FromBookmarklet}from bookmarklet{/block:FromBookmarklet}
  {block:FromMobile}from mobile{/block:FromMobile}</a> {block:IfDisqusShortname}| <a class='post-title' href='{Permalink}#disqus_thread'>Comments</a>{/block:IfDisqusShortname} {block:IfShowNotes}{block:NoteCount}| <a class='post-title' href='{Permalink}#notes'>{NoteCountWithLabel}</a>{/block:NoteCount}{/block:IfShowNotes}{block:IfShowTags}{block:HasTags}<br/><br/> <h4>{block:Tags}<a class='tag post-title' href='{TagURL}'>{Tag}</a> {/block:Tags}</h4>{/block:HasTags}{/block:IfShowTags}
  </div>
</div>
{/block:Date}
{block:IfShowNotes}
{block:PostNotes}
<div id='notes'>
{PostNotes}
</div>
{/block:PostNotes}
{/block:IfShowNotes}
</div>
{/block:Chat}

{block:Audio}
<div class='post audio'>
  {AudioPlayer}
  {block:Caption}
    <p>{Caption}</p>
  {/block:Caption}
  {block:IfShowAlbumArtOnAudioPosts}
  {block:AlbumArt}
  <img src='{AlbumArtURL}' alt='{block:Artist}{Artist}{/block:Artist} - {block:TrackName}{TrackName}{/block:TrackName}'/>
  {/block:AlbumArt}
  {/block:IfShowAlbumArtOnAudioPosts}
{block:Date}
<div class="post-footer">
  <div class="date">
  <a class='post-title' href='{Permalink}'><h4>
  {block:Reblog}Reblogged{/block:Reblog}
  {block:NotReblog}Posted{/block:NotReblog}                     
  {Month} {DayOfMonth}{DayOfMonthSuffix} at {12Hour}:{Minutes} {CapitalAmPm}</a>
  {block:Reblog}
  from <a class='post-title reblog' href='{ReblogParentURL}'>{ReblogParentName}</a>
  {block:RebloggedFromReblog} (originally from <a class='post-title' href='{ReblogRootURL}' class='reblogurl'> {ReblogRootName}</a>){/block:RebloggedFromReblog}{/block:Reblog}
  {block:FromBookmarklet}from bookmarklet{/block:FromBookmarklet}
  {block:FromMobile}from mobile{/block:FromMobile}</a> {block:IfDisqusShortname}| <a class='post-title' href='{Permalink}#disqus_thread'>Comments</a>{/block:IfDisqusShortname} {block:IfShowNotes}{block:NoteCount}| <a class='post-title' href='{Permalink}#notes'>{NoteCountWithLabel}</a>{/block:NoteCount}{/block:IfShowNotes}{block:IfShowTags}{block:HasTags}<br/><br/> <h4>{block:Tags}<a class='tag post-title' href='{TagURL}'>{Tag}</a> {/block:Tags}</h4>{/block:HasTags}{/block:IfShowTags}
  </div>
</div>
{/block:Date}
{block:IfShowNotes}
{block:PostNotes}
<div id='notes'>
{PostNotes}
</div>
{/block:PostNotes}
{/block:IfShowNotes}
</div>
{/block:Audio}

{block:Video}
<div class='post video'>
  {block:Caption}
    <p>{Caption}</p>
  {/block:Caption}
  {Video-500}
{block:Date}
<div class="post-footer">
  <div class="date">
  <a class='post-title' href='{Permalink}'><h4>
  {block:Reblog}Reblogged{/block:Reblog}
  {block:NotReblog}Posted{/block:NotReblog}                     
  {Month} {DayOfMonth}{DayOfMonthSuffix} at {12Hour}:{Minutes} {CapitalAmPm}</a>
  {block:Reblog}
  from <a class='post-title reblog' href='{ReblogParentURL}'>{ReblogParentName}</a>
  {block:RebloggedFromReblog} (originally from <a class='post-title' href='{ReblogRootURL}' class='reblogurl'> {ReblogRootName}</a>){/block:RebloggedFromReblog}{/block:Reblog}
  {block:FromBookmarklet}from bookmarklet{/block:FromBookmarklet}
  {block:FromMobile}from mobile{/block:FromMobile}</a> {block:IfDisqusShortname}| <a class='post-title' href='{Permalink}#disqus_thread'>Comments</a>{/block:IfDisqusShortname} {block:IfShowNotes}{block:NoteCount}| <a class='post-title' href='{Permalink}#notes'>{NoteCountWithLabel}</a>{/block:NoteCount}{/block:IfShowNotes}{block:IfShowTags}{block:HasTags}<br/><br/> <h4>{block:Tags}<a class='tag post-title' href='{TagURL}'>{Tag}</a> {/block:Tags}</h4>{/block:HasTags}{/block:IfShowTags}
  </div>
</div>
{/block:Date}
{block:IfShowNotes}
{block:PostNotes}
<div id='notes'>
{PostNotes}
</div>
{/block:PostNotes}
{/block:IfShowNotes}
</div>
{/block:Video}

{block:Answer}
<div class='post answer'>
  <h3 class='question'>{Asker} asked me, “{Question}”</h3>
    <p>{Answer}</p>
{block:Date}
<div class="post-footer">
  <div class="date">
  <a class='post-title' href='{Permalink}'><h4>
  {block:Reblog}Reblogged{/block:Reblog}
  {block:NotReblog}Posted{/block:NotReblog}                     
  {Month} {DayOfMonth}{DayOfMonthSuffix} at {12Hour}:{Minutes} {CapitalAmPm}</a>
  {block:Reblog}
  from <a class='post-title reblog' href='{ReblogParentURL}'>{ReblogParentName}</a>
  {block:RebloggedFromReblog} (originally from <a class='post-title' href='{ReblogRootURL}' class='reblogurl'> {ReblogRootName}</a>){/block:RebloggedFromReblog}{/block:Reblog}
  {block:FromBookmarklet}from bookmarklet{/block:FromBookmarklet}
  {block:FromMobile}from mobile{/block:FromMobile}</a> {block:IfDisqusShortname}| <a class='post-title' href='{Permalink}#disqus_thread'>Comments</a>{/block:IfDisqusShortname} {block:IfShowNotes}{block:NoteCount}| <a class='post-title' href='{Permalink}#notes'>{NoteCountWithLabel}</a>{/block:NoteCount}{/block:IfShowNotes}{block:IfShowTags}{block:HasTags}<br/><br/> <h4>{block:Tags}<a class='tag post-title' href='{TagURL}'>{Tag}</a> {/block:Tags}</h4>{/block:HasTags}{/block:IfShowTags}
  </div>
</div>
{/block:Date}
{block:PostNotes}
<div id='notes'>
{PostNotes}
</div>
{/block:PostNotes}
</div>
{/block:Answer}

{/block:Posts}
{block:IfDisqusShortname}
{/block:IfDisqusShortname}

</div>

  #section {
    width: 960px;
    word-wrap: break-word;
  }

  div.post {
    width: 300px;
    background-image: url(http://static.tumblr.com/c427a2a/4iHl5b98u/diagonal_lines_lol.png);
    padding: 10px;
    margin: 15px 10px;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    box-shadow: inset 0 0 3px #000;
    -webkit-box-shadow: inset 0 0 3px #000;
    -moz-box-shadow: inset 0 0 3px #000;
  }
desandro commented 14 years ago

Hello! It's hard for me to parse through the code without a live example. Is there a public URL I could take a look at?

sstherrien commented 14 years ago

Ahh, of course :) http://rtheme.tumblr.com/

desandro commented 14 years ago
  1. Import jquery.min.js before jquery.masonry.js (reverse lines 37 & 38)
  2. Add a float: left to div.post (line 218)

That'll enable a 2 column layout. You only have two columns because the outerWidth of the posts is 340px, (not 320px). To set it to 320px

  1. Set with of div.post to 280px (line 219)
sstherrien commented 14 years ago

Thanks! ^_^

desandro commented 14 years ago

Welcome!