的Tumblr主题开发：方960x75像素图片Photoset职位

我想使用的tumblr的主题API和刚刚发现的Photoset posts 变量{PhotoURL-75sq}（这应该是内部block:Photos将不会返回一个值它工作正常。对于单张照片的职位，但不适合的photosets的Tumblr主题开发：方960x75像素图片Photoset职位

而且它似乎是图片本身获得产生，但是例如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内而不让开发者知道关于它。

在此先感谢

来源

2012-03-01 zanona

那么，首先，这是一个photoset不正确的语法。 “{block：Photoset} {Photoset-500} {/ block：Photoset}”是你想要的，你明显可以在信息，笔记等photoset的周围和下面添加更多的代码，但这是你的出发点。 iframe将与您的photoset照片一起呈现。你必须使用Javascript来改变iframe的内容。我可以给你一个例子，但它必须等到下课后。效应器主题这样做是为了创建它的高分辨率幻灯片的photosets。 – Ally 2012-03-01 15:26:59

嗨，伙计，恐怕不是，在Photoset里面你可以有另一个叫做'Photos'的模块，如果你不想使用默认的Photoset窗口部件，它将会单独返回每一个图像。这是在提到的链接文档中，我已经在使用它，唯一的问题是75px的方形照片。 – zanona 2012-03-01 16:59:58

然后'{PhotoURL-250}'或'{PhotoURL-500}'的作品？我的帖子印象是这些都不起作用。在这种情况下，您仍然可以使用我提供的代码进行一些更改。无论如何，您将不得不使用Javascript来处理URL以获取方形URL，因为它不在文档中提供。 – Ally 2012-03-01 17:23:05

在你的脑袋补充一点：

<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 f拒绝在页面上。如果页面上有photoset框架，请继续。否则，什么都不要做。
对于每个photoset框架，请等待框架窗口和框架文档加载。
只要框架文档已经加载，抓住所有的photoset行。
对于每个photoset行，清除样式并将显示设置为内联。
接下来，抓住所有的photoset照片。
对于每张照片，将图像源设置为所需的尺寸参数。

很明显，你可以做任何你想要尽可能的造型去在步骤4和6，但是这只是为了使所有的photoset的照片在960x75像素，并把它们络绎不绝的简单方法。如果你有任何问题随时问。我已经在我的沙盒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，并与960x75像素正方形一个替换它。

来源

2012-03-01 17:16:28 Ally

很好，谢谢Ally，我同意这可能是更好的方法来使用它。我只是感到失望，因为这显然是一个关于主题API的错误，他们拒绝听取开发者的意见：/也似乎{PhotoURL-100}无法正常工作，但其他人工作正常......无论如何，谢谢很多您的详细回应。 – zanona 2012-03-01 19:50:10

我不知道多少tumblr更新了他们的东西，但现在每个文件可能在不同的子域 - 36.media.tumblr，41.media.tumblr等，所以这只会工作，如果你运气好，75sq是存储在同一个子域中。尽管75sq主题代码在photoset中并不适用于这一天... – Aistis 2015-07-30 22:36:23

我有点担心浏览器不必要地加载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技能。 :)

来源

2012-03-23 02:08:30

的Tumblr主题开发：方960x75像素图片Photoset职位

回答

相关问题