customizing tumblr das neue layout Fotosatz

Fand ich einige code auf pastebin, das scheint zu sein, was du suchst, hier

Bin ich mit dem leicht messier-code (aber mit der Arbeit CSS/HTML) ausgegraben auf Github Gist die partition, der die Bilder in Zeilen,

{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}

und dann dauert es nur ein wenig Javascript Hinzugefügt, um die Größe der Bilder, was auch immer % der gesamten Breite gegeben, um den Fotosatz mit

var photosetPics = document.querySelectorAll('div.col-lg-6 div.thumbnail img')
    for (i=0;i<photosetPics.length;i++) {
      var rowLength = photosetPics[i].parentNode.parentNode.parentNode.querySelectorAll('div div.thumbnail img').length;
      photosetPics[i].parentNode.parentNode.setAttribute('style','width:'+100/rowLength+'%')
}

Das ist eigentlich ziemlich hässlich, aber es läuft... Es kann deutlich gemacht werden mehr elegant mit dem code oben die schildert verschiedene "Fälle", aber um ehrlich zu sein, ich mag das einfache % - Methode und wird wahrscheinlich entfernen Sie die Fälle, und nur stick zu navigieren im DOM-zum ändern der Breite statt.

Schließlich, Sie brauchen, um diese div ' s sitzen inline (display:inline-block hatte keine Wirkung, wenn ich es getestet),

div.col-lg-12, div.col-lg-6, div.col-lg-4, div.col-lg-3 {
  float: left;
}

So dass dies ein community-wiki, da es nicht wirklich mein code und das wäre natürlich eine gute Ressource für andere zu erstellen, tragen Sie bitte keine Verbesserungen.

Es mag auch erwähnenswert sein, dass Sie nicht schneiden Sie die Höhe der Bilder wie auf Tumblr, werden auf dem Armaturenbrett (das passt mir aber vielleicht nicht das, was andere suchen)