web-dev-qa-db-ja.com

tumblrカスタムテーマで大きな画像を取得するにはどうすればよいですか？

Tumblrでは 最大画像サイズは500px 。カスタムテーマでより大きな画像を取得する方法を知りたいです。

htmlcsstumblr
9
Fred Stevens-Smith

唯一の複雑さは、フォールバックを含めることです。そのため、高解像度の画像が存在しない場合は、標準サイズのものが使用されます。 注：これらの手順は、Tumblrのテーマ言語を使用してカスタムテーマを作成するためのものです。これは写真ブロック内にある必要があることにも注意してください{block:Photo} {/block:Photo}

この方法は、Tumblrの{block:HighRes}に依存します。 {block:HighRes}{/block:HighRes}でラップされたコードは、高解像度バージョンの画像が存在する場合にのみ存在します。

最初、通常の画像を非表示にします。

<img src="{PhotoURL-500}" {block:HighRes}style="display:none"{/block:HighRes} />

Second、カスタムクラスで大きな画像を表示します。

{block:HighRes}
    <img src="{PhotoURL-HighRes}" class="highres">
{/block:HighRes}

注：最大画像幅を設定する必要がある可能性があるため、クラスが必要です。カスタムCSSをいじりたくない場合は、通常、imgタグ内でstyle="max-width:100%"を使用できます。

12
Fred Stevens-Smith

{PhotoURL-HighRes}を使用できます。これには、高解像度の写真がアップロードされているかどうかを検出するためのブロックも付属しています。 ドキュメントと詳細はここにあります :)

また、高解像度の写真をアップロードしたときとアップロードしなかったときを区別したい場合があります。このようなブロックを使用すると、利用可能な場合はtumblrに高解像度の画像を表示させ、そうでない場合はデフォルトで500pxバージョンを表示させることができます。

{block:IfContentWidth500}
    <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
{/block:IfContentWidth500}

{block:IfNotContentWidth500}
    <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>
{/block:IfNotContentWidth500}

高解像度の写真は、アップロードされたサイズでレンダリングされることに注意してください。それらの動作を維持するために、スタイルの画像要素またはコンテナにmax-widthプロパティを追加すると便利です。

また、次のことを行う必要があります テーマオプションから高解像度の写真を有効にする

お役に立てれば！

0
Jeff Escalante