Barcelonia photoset fix
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:
- Go to customize your theme
- Click the “Edit HTML” button
- Look for “{photoset-250}” (should be around line 274)
- 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} - Annnnnd then scroll to the bottom of the HTML and replace this (third line from bottom of file):
…With this:<script type="text/javascript" src="...barcelonia.js"></script><script type="text/javascript" src="http://static.tumblr.com/td3l81c/Ob7lxobyl/barcelonia.js"></script> - 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); }