0

tumblr のカスタム フォトセット レイアウトを使用しようとしています。ドキュメントについては、こちらの投稿をチェックしていました: http://staff.tumblr.com/post/7615038792/photoset-redux

フォトセット内の画像の数に基づいて、js 配列ブロックを使用して新しいレイアウトを作成する方法を理解しようとしています。正直なところ、これらの機能がどのように機能するかは完全にはわかりませんが、誰かが回答やチュートリアルを提供してくれれば、非常に感謝しています.

4

1 に答える 1

0

Pastebinでいくつかのコードを見つけました。これは、ここで探しているもののようです

画像を行に分割するGithub Gistsで発見された、少し乱雑なコード (ただし、動作する CSS/HTML が提供されている) を使用しています。

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

次に、Javascript を少し追加するだけで、フォトセットに指定された合計幅の割合として画像のサイズを変更できます。

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+'%')
}

それは実際にはかなり醜いものですが、実行されます...さまざまな「ケース」を描写する上記のコードを使用して、明らかによりエレガントに実行できますが、正直なところ、単純な % メソッドが好きで、おそらくケースを削除して、ナビゲートに固執します代わりに幅を変更するDOM。

最後に、これらの div をインラインで配置する必要があります (display:inline-blockテストしたときは効果がありませんでした)。

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

これは実際には私のコードではなく、他の人が構築するための優れたリソースであるため、これをコミュニティ wiki にします - 改善点があれば貢献してください。

これは、Tumblr がダッシュボードに表示するような画像の高さをカットしないことに注意してください (これは私には合っていますが、他の人が探しているものではないかもしれません)。

于 2014-04-25T12:30:43.007 に答える