的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職位

回答

相關問題