TumblrのテーマDEV：スクエア-75pxフォトセットのポストのための写真

私はTumblrののテーマのAPIを使用しようとちょうどPhotoset posts ためblock:Photos内にある必要があり、変数{PhotoURL-75sq}が（値を返さないことが判明していますそれはOK作品。TumblrのテーマDEV：スクエア-75pxフォトセットのポストのための写真

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

：シングル写真の記事のためではなく、フォトセットのためにも

絵自体が生成されますが、APIは例えば適切な値を返さないようです

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についての詳細を学ぶしたい場合は...この場合には、私はそれか、このことを考えています

はバグですか、それは開発者が知っているさせることなくフォトセット内だとき、彼らは単にその変数に改称しますそれについて。あなたの頭の中で事前

出典

2012-03-01 zanona

まず、それはフォトセットの構文が正しくありません。 {ブロック：Photoset} {Photoset-500} {/ブロック：Photoset} 'はあなたが望むもので、インフォメーション、ノートなどのために、写真セットの周りと周りにコードを追加することは明らかです。 iframeはあなたのフォトセットの写真と共にレンダリングされます。 iframeの内容を変更するには、JavaScriptを使用する必要があります。私はあなたに例を挙げることができますが、授業の後まで待たなければなりません。エフェクタのテーマは、これを使って写真セット用の高解像度スライドショーを作成します。 – Ally

こんにちはアリー、私は恐れていない、Photosetの内部に別のブロックを 'Photos'と呼ぶことができます。これはデフォルトのPhotosetウィジェットを使いたくない場合に備えて個々の画像を個別に返します。それは、リンク上のドキュメントにあり、私はすでにそれを使用しています、唯一の問題は、75pxの正方形の写真です。 – zanona

それで '{PhotoURL-250}'や '{PhotoURL-500}'が動作しますか？私はあなたのポストからの印象の下で、これらはうまくいきませんでした。その場合、私はいくつかの変更を加えたコードを引き続き使用することができます。それにもかかわらず、ドキュメントでは提供されていないため、URLを処理するためにJavaScriptを使用する必要があります。 – Ally

で

おかげで、この追加：

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

スクリプトは次の...

を行います

ドキュメントが読み込まれたら、フォトセットfページのラマ。ページにフォトセットフレームがある場合は、続行します。それ以外の場合は何もしないでください。
各フォトセットフレームに対して、フレームウィンドウとフレームドキュメントが読み込まれるまで待ちます。
フレーム文書がロードされるとすぐに、すべてのフォトセット行を取得します。
各フォトセット行について、スタイリングをクリアして、ディスプレイをインラインに設定します。
次に、すべての写真を撮影します。
写真ごとに、画像ソースを目的のサイズパラメータに設定します。

もちろん、ステップ4と6でスタイリングができる限り、何でも構いませんが、これはすべてのフォトセット写真を75ピクセルでレンダリングして連続した線にする簡単な方法でした。ご不明な点がございましたら、お気軽にお問い合わせください。私は私のサンドボックス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の正方形の1と交換されてやっている。その場合は、ここでいくつかの単純なコードです。

出典

2012-03-01 17:16:28 Ally

偉大な、ありがとうアリー、これは今これを使用するより良い方法かもしれないことに同意します。私はこれが明らかにテーマAPIのバグであり、彼らはそれについての開発者の声を聞くことを拒否しているので、ちょうど失望していた：/それは{PhotoURL-100}は動作しません..しかし、あなたの精巧な応答のための多く。 – zanona

tumblrがどれくらい更新したか分かりませんが、すべてのファイルが別のサブドメインにある可能性があります - 36.media.tumblr、41.media.tumblrなどです。これは運が良ければ75sqが同じサブドメインに格納されます。フォトセットの75sqのテーマコードは今日までは機能しませんが... – Aistis

私はブラウザが不必要に250pxの画像を読み込んでいるのを少し心配していました。少し違いました。もちろん、私はジャバスクリプトについてはほとんど何も知らないので、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}

この方法では、ブラウザには250ピクセルのimgタグが表示されません。シンプルさは私の初心者のDOM/JSスキルにも合っています。 :)

出典

2012-03-23 02:08:30

TumblrのテーマDEV：スクエア-75pxフォトセットのポストのための写真

答えて

関連する問題