Noodles and Beef

If you use my Barcelonia theme you’ve probably encountered an annoying layout bug involving tumblr’s photosets.  This fix requires a little fussing in the HTML of your theme, but will fix all your photoset woes:

1. Go to customize your theme
2. Click the “Edit HTML” button
3. Look for “{photoset-250}” (should be around line 274)
4. Replace {photoset-250} with this code:

   {block:Photos}<a href="{Permalink}" class="imgwrap"><img src="{PhotoURL-250}" data="{PhotoURL-HighRes}" alt="{PhotoAlt}"/></a>{/block:Photos}

5. Annnnnd then scroll to the bottom of the HTML and replace this (third line from bottom of file):

   <script type="text/javascript" src="...barcelonia.js"></script>

   …With this:

   <script type="text/javascript" src="http://static.tumblr.com/td3l81c/Ob7lxobyl/barcelonia.js"></script>

6. Hit “Update Preview” and Save! You’re done!

SUPER IMPORTANT EDIT:

I made a big mistake in the JS file. It has been updated, please make sure you use this URL: http://static.tumblr.com/td3l81c/Ob7lxobyl/barcelonia.js

ANOTHER (LESS IMPORTANT) EDIT:

If you want to support tumblr-uploaded videos, you will need to add this code just before the closing head tag </head> (anywhere between line 12 and 180 will work)

<script type="text/javascript" language="javascript" src="http://assets.tumblr.com/javascript/tumblelog.js"></script>

Tumblr. You give me so much grief.

ONE LAST EDIT!!!

This fix also includes a new feature: recommend posts!  If you want this styled correctly, just add this CSS to the “Custom CSS” section of your tumblr settings:

/** Recommendations **/ #postNotes { margin-top: 6px; } #recommendations { clear: both; height: 170px; margin-bottom: 10px; overflow: hidden; } #recommendations .post { width: 132px; height: 160px; float: left; background: transparent; margin-bottom: 200px; } #recommendations .post.typephoto img { max-height: 123px; margin-bottom: 200px; } #recommendations div.asker { max-height: 80px; margin-bottom: 200px; } #recommendations a.asker { display: none; } #recommendations .meta { position: static; } #recommendations .meta li, #recommendations .caption, #recommendations .tags { display: none; } #recommendations .meta li.datelink { display: block; } #recommendations .meta li.datelink a { display: block; background: transparent; position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-indent: -5000px; } #recommendations .meta li.datelink a:hover { background: rgba(0,0,0,.25); }