Skip to content

Instantly share code, notes, and snippets.

@xles
Created August 10, 2013 18:10
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save xles/6201497 to your computer and use it in GitHub Desktop.
Save xles/6201497 to your computer and use it in GitHub Desktop.
Custom implementation of the Tumblr Photoset, without support for the Tumblr Lightbox. A bit crude, but it works...
{block:Photoset}
<script type="text/javascript">
var layout = {JSPhotosetLayout};
var photocount = 0;
var photoclass = '', photos = [];
for(var i=0;i<layout.length;i++) {
switch(layout[i]) {
case "1":
photoclass = 'col-lg-12';
break;
case "2":
photoclass = 'col-lg-6';
break;
case "3":
photoclass = 'col-lg-4';
break;
case "4":
photoclass = 'col-lg-3';
break;
}
for(var j=0; j < parseInt(layout[i]); j++) {
photos[photocount] = {
'class': photoclass,
rowsize: parseInt(layout[i])
};
photocount++;
}
}
photocount = 0;
var rowcount = 0;
</script>
{block:Photos}
<script>
if(rowcount == 0) {
document.write('<div class="row">');
}
</script>
<div id="photosetphoto" class="col-lg-3">
<script>
var photo = document.getElementById('photosetphoto');
photo.className = photos[photocount].class;
photo.removeAttribute('id');
rowcount++;
</script>
<div class="thumbnail center">
{LinkOpenTag}
<img src="{PhotoURL-1280}" alt="{PhotoAlt}" class="img-responsive">
{block:Caption}
<div class="caption">
{Caption}
</div>
{/block:Caption}
{LinkCloseTag}
</div>
</div>
<script>
if(rowcount == photos[photocount].rowsize) {
document.write('</div>');
rowcount = 0;
}
photocount++;
</script>
{/block:Photos}
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
{/block:Photoset}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment