更改 tumblr 上的默认照片集大小答案

【问题标题】：Change default photoset size on tumblr更改 tumblr 上的默认照片集大小
【发布时间】：2014-07-19 21:06:32
【问题描述】：

我知道 tumblr 有默认的照片集尺寸 {photoset-500}、{photoset-400}、{photoset-250}，但我想更改宽度，以便宽度可以是 420 或 350。我到处找，找不到代码来帮助我做到这一点。

【问题讨论】：

标签： tumblr

【解决方案1】：

您可以使用 {Photoset} 来调整照片集的大小以适应容器（最大尺寸 700 像素）。

https://www.tumblr.com/docs/en/custom_themes

【讨论】：

【解决方案2】：

您无法使用 Tumblr 标记更改图像的默认大小，但您可以使用 CSS 直观地更改大小。

Tumblr 标记：

{block:Photoset}
    {block:Photos}
        <img src="{PhotoURL-500}" class="photoset-img" />
    {/block:Photos}
{/block:Photoset}

CSS：

.photoset-img { width: 420px; /* can be any value you want */ }

【讨论】：

不要忘记调整高度。 .photoset-img { width: 420px; height: auto; }

【解决方案3】：

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

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

【讨论】：