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

【问题标题】：Tumblr theme dev: Square-75px photos for Photoset postsTumblr 主题开发：用于 Photoset 帖子的 Square-75px 照片
【发布时间】：2019-08-18 05:27:46
【问题描述】：

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

似乎图片本身已生成，但 API 没有返回一个合适的值，例如：

_{（来源：tumblr.com）}

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

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 中时，他们只是简单地重命名了该变量，而没有让开发人员知道它。

提前致谢

【问题讨论】：

好吧，首先，这是不正确的照片集语法。 {block:Photoset}{Photoset-500}{/block:Photoset} 是您想要的，您显然可以在照片集周围和下方添加更多代码以获取信息、注释等，但这是您的起点。一个 iframe 将与您的 photoset 照片一起呈现。您必须使用 Javascript 来更改 iframe 的内容。我可以给你举个例子，但要等到课后。 Effector 主题这样做是为了为照片集创建高分辨率幻灯片。
嗨，Ally，恐怕不是，在 Photoset 中，您可以有另一个名为 Photos 的块，如果您不想使用它们的默认 Photoset 小部件，它将单独返回每张图像.它在提到的链接上的文档中，我已经在使用它，唯一的问题是 75px 方形照片。
那么{PhotoURL-250} 或{PhotoURL-500} 有效吗？我从你的帖子中得到的印象是这些不起作用。在这种情况下，您仍然可以使用我提供的代码并进行一些更改。无论如何，您将不得不使用 Javascript 来处理 URL 以获取方形 URL，因为文档中没有提供它。
我用更简单的代码更新了我的答案。祝你好运。

标签： api templates themes tumblr

【解决方案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')">

脚本执行以下操作...

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

显然，您可以根据第 4 步和第 6 步中的样式做任何您想做的事情，但这只是一种简单的方法，可以将所有照片设置为 75 像素并将它们排成一条直线。如果您有任何问题随时问。我已经在我的沙盒 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 并将其替换为 75 像素的正方形。

【讨论】：

太好了，谢谢 Ally，我同意这可能是现在使用它的更好方法。我很失望，因为这显然是主题 API 上的一个错误，他们拒绝听取开发人员的意见：/ 似乎 {PhotoURL-100} 不起作用..但其他工作正常......无论如何，谢谢非常感谢您的详细回复。
我不知道 tumblr 更新了多少内容，但现在每个文件都可能位于不同的子域 - 36.media.tumblr、41.media.tumblr 等，所以这只有在你很幸运，75sq 存储在同一个子域中。虽然照片集中的 75sq 主题代码到今天都不起作用......

【解决方案2】：

我有点担心浏览器会不必要地加载 250 像素的图像，所以我做了一些不同的事情。当然，我对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 技能。 :)

【讨论】：