Question

我正在尝试使用Tumblr的主题API，并发现Photoset posts 变量{PhotoURL-75sq}（应该在block:Photos内不会返回值。它适用于单个照片帖子，但不适用于Photosets。

似乎图片本身也会生成，但API却没有返回适当的值，例如：

http://28.media.tumblr.com/tumblr_lzvey54yzV1ro516ho2_250.jpg http://28.media.tumblr.com/tumblr_lzvey54yzV1ro516ho2_75sq.jpg

上面的图片使用tumblr控制面板上传到photoset帖子中，正如您所看到的，只需用75sq替换文件名250px图像的末尾即可正确显示（这意味着它确实生成了）。

http://28.media.tumblr.com/tumblr_lzvey54yzV1ro516ho2_75sq.jpg

但是当使用`{PhotoURL-75sq}'时，它不会返回它的值。

{block:Photoset}
    <h1>{TimeAgo}</h1>
    <div class='slideshow'>
        {block:Photos}
            <img src='{PhotoURL-75sq}' alt>
        {/block:Photos}
    </div>
{/block:Photoset}

我不确定这是否是正确的要求，但因为他们的支持拒绝帮助我说：

不幸的是，我们无法为HTML自定义提供技术支持。鉴于我们拥有大量用户，我们只是没有资源。我们的歉意。如果您想了解有关HTML和CSS的更多信息......

在这种情况下我认为或者这是一个错误，或者他们只是在一个Photoset内部重命名该变量而不让开发人员知道它。

提前致谢

Answer 1

在你的脑海中添加：

<script type="text/javascript">
function resizePhotosets(desiredSize)
{
    var setFrames = document.getElementsByClassName("photoset");
    if (setFrames != null)
    {
         for(var i = 0; i < setFrames.length; i++)
         {  
             var foundWindow = false;
             var frameWindow = null;

             while(!foundWindow)
             {
                 frameWindow = setFrames[i].contentWindow;
                 if (frameWindow != null)
                     foundWindow = true;
             } 

             var foundDoc = false;
             var frameDoc = null;

             while(!foundDoc)
             {
                 frameDoc = frameWindow.document;
                 if (frameDoc != null)
                     foundDoc = true;
             }

             if (foundDoc)
             { 
                 var photoRows = frameDoc.body.getElementsByClassName("photoset_row");
                 for (var j = 0; j < photoRows.length; j++)
                 {
                     photoRows[j].removeAttribute("style");
                     photoRows[j].style.display = "inline";
                     var photos = photoRows[j].getElementsByTagName("img");
                     for(var k = 0; k < photos.length; k++)
                     {
                         photos[k].style.width = desiredSize.substring(0, desiredSize.lastIndexOf('sq')) + 'px';
                         var source = photos[k].src;
                         var pos1 = source.lastIndexOf('_');
                         var pos2 = source.lastIndexOf('.');
                         photos[k].src = source.substring(0, pos1 + 1) + desiredSize + source.substring(pos2);
                     }
                }    
            }
        }
    }
    return false;
}


</script>

然后从您的body标记中调用它：<body onload="resizePhotosets('75sq')">

该脚本执行以下操作...

文档加载后，检查页面上是否有photoset框架。如果页面上有photoset框架，请继续。否则，什么也不做。
对于每个photoset框架，请等待框架窗口和框架文档加载。
一旦加载了框架文档，就抓住所有的photoset行。
对于每个photoset行，清除样式并将显示设置为内联。
接下来，抓住所有的照片集。
对于每张照片，请将图像源设置为所需的尺寸参数。

显然，就第4步和第6步中的样式而言，你可以做任何你想做的事，但这只是一种简单的方法，可以将所有的照片集照片渲染到75px并将它们放在一条连续的线上。如果您有任何问题随时问。我已经在我的沙箱Tumblr中对它进行了测试，它确实有效。

ETA：我不知道{PhotoURL-250}在photoset区内工作，但确实如此。在这种情况下，这里有一些更简单的代码：

{block:Photos}
<img src="{PhotoURL-250}" class="photoset-image" />
{/block:Photos}
<script type="text/javascript">
var photos = document.getElementsByClassName("photoset-image");
for(var i = 0; i < photos.length; i++)
{
    photos[i].style.width = '75px';
    var source = photos[i].src;
    var pos1 = source.lastIndexOf('_');
    var pos2 = source.lastIndexOf('.');
    photos[i].src = source.substring(0, pos1 + 1) + '75sq' + source.substring(pos2);
}
</script>

所有这一切都是采用提供的URL并将其替换为75px的正方形。

Answer 2

我有点担心浏览器不必要地加载250px图像，所以我做的有点不同。当然，我对javascript几乎一无所知，所以，fwiw：

头部或身体的某处（不会重复）：

  <script type="text/javascript">
    var img_75sq = function(imgTag, urlFor250px)
    {
       var urlFor75px = urlFor250px.replace('_250.jpg', '_75sq.jpg');
       var newImgTag = imgTag.replace('SRC', 'src="' + urlFor75px + '"');
       document.write(newImgTag);
    }
  </script>

然后：

    {block:Photoset}
       {block:Photos}
           <script type="text/javascript">
             img_75sq('<img id="..." style="..." SRC>', '{PhotoURL-250}');
           </script>
       {/block:Photos}
    {/block:Photoset}

这样浏览器永远不会看到250px的img标签。简单也适合我的新手DOM / JS技能。：）

Tumblr主题开发：Photoset帖子的Square-75px照片

2 个答案: