禁用 Tumblr 照片集或更改它们的大小？答案

【问题标题】：Disable Tumblr photosets or change the size of them?禁用 Tumblr 照片集或更改它们的大小？
【发布时间】：2013-07-24 10:27:31
【问题描述】：

我已经能够在我的博客 http://blog.seans.ws 上将我的照片放大到单个照片帖子，但 Tumblr 照片集将我的宽度限制为 500 像素

如何使照片集的布局更大，或者只是禁用该功能并一张一张地以高分辨率显示我的照片？这是照片集代码：

             {block:Photoset}
                 <article>
                    <span class="break" style="padding-bottom: 19px;"></span>
                    {Photoset-500}
                    {block:Caption}
                        <p>{Caption}</p>
                    {/block:Caption}
                    <p></p>
                    <time>{TimeAgo}</time>
                </article>
            {/block:Photoset}

这是单张照片代码，我可以在其中制作巨大的照片：

            {block:Photo}
                <article>
                    <span class="break"></span>
                    <img src="{PhotoURL-HighRes}" class="highres">
                    <p>{Caption}</p>
                    <time>{TimeAgo}</time>
                </article>
            {/block:Photo}

谢谢！

【问题讨论】：

标签： javascript html css tumblr

【解决方案1】：

确实没有必要使用 Javascript 和 Tumblr API。

您可以使用 {block:Photos} 单独浏览每个 Photoset 中的照片。

例如在您的示例中：

{block:Photoset}
     <article>
        <span class="break" style="padding-bottom: 19px;"></span>

        <!-- Go through each Photo in the Photoset -->
        {block:Photos}
            <img src="{PhotoURL-HighRes}" class="highres">
        {/block:Photos}

        {block:Caption}
            <p>{Caption}</p>
        {/block:Caption}
        <p></p>
        <time>{TimeAgo}</time>
    </article>
{/block:Photoset}

记住，Documentation 是你的朋友 :)

【讨论】：

啊，是的，我完全想念那个菲利克斯。谢谢！

【解决方案2】：

在结束正文标记之前添加此脚本。这将增加或减少照片集的大小

<script type="text/javascript">
    //This will change the source address and display the correct size.
                $(".photoset").each(function() { 
            var newSrc = $(this).attr("src").replace('700','860');
            $(this).attr("src", newSrc);       
        });
    //This will get the new size of the iframe and resize the iframe holder accordingly.
        $(function(){
        var iFrames = $('.photoset');
        function iResize() {
            for (var i = 0, j = iFrames.length; i < j; i++) {
                iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
            }

            if ($.browser.safari || $.browser.opera) { 
                iFrames.load(function(){
                    setTimeout(iResize, 0); 
                });

                for (var i = 0, j = iFrames.length; i < j; i++) {
                    var iSource = iFrames[i].src;
                    iFrames[i].src = '';
                    iFrames[i].src = iSource;
                }
            } else {
                iFrames.load(function() {
                    this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
                });
            }
        });
</script>

【讨论】：

【解决方案3】：

如果你想保留 Tumblr 的照片集网格样式，请查看这个小 jQuery 插件：https://github.com/PixelUnion/Extended-Tumblr-Photoset

它使用 EXIF 数据、圆角、不同的装订线尺寸等扩展了 Tumblr 的默认照片集。

免责声明：我参与了创建它的一小部分；）

【讨论】：

【解决方案4】：

这家伙解决了它:)

https://github.com/ram-nadella/Tumblr-Photoset-Alternative/blob/master/mod.html

【讨论】：