Разработчик темы Tumblr: Square-75px для постов фотосетов

Question

Я пытаюсь использовать Theme API Tumblr и только что обнаружил, что для Фотосет постов переменная {PhotoURL-75sq} (которая должна быть внутри block:Photos не будет возвращать значение. Она работает нормально для одногофотографии, но не для фотосетов.

Также кажется, что само изображение генерируется, но API не возвращает правильное значение, например:

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

изображения выше, которые были загружены в фотосет с помощью панели управления 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, не позволяяРазработчики об этом знают.

Заранее спасибо

Answer 1

Я был немного обеспокоен тем, что браузер без необходимости загружал изображения размером 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}

Таким образом, браузер никогда не видит теги img размером 250px. Простота также подходит моим начинающим навыкам DOM / JS. :)

Answer 2

В голове добавь это:

<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')">

Сценарий выполняет следующее ...

1. Когда документ загружен, проверьте, есть ли на странице рамки для фотосета. Если на странице есть рамки для фотосетов, продолжайте. В противном случае ничего не делать.
2. Для каждого кадра фотосета дождитесь загрузки окна кадра и документа кадра.
3. Как только документ кадра будет загружен, возьмите все строки фотосета.
4. Для каждой строки фотосета очистите стили и установите дисплей на линию.
5. Затем возьмите все фотографии с фотосета.
6. Для каждой фотографии установите для источника изображения нужный параметр размера.

Очевидно, что вы можете делать все, что захотите, поскольку стилирование выполняется в шагах 4 и 6, но это был простой способ отрисовки всех фотосет-фотографий с разрешением 75px и размещения их в виде непрерывной линии. Если у вас есть вопросы, не стесняйтесь спросить. Я проверил его в своей песочнице Tumblr, и он работает.

ETA: Я не знал, что {PhotoURL-250} работает внутри блока фотосет, но это работает. В этом случае вот более простой код:

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