Wie bekomme ich große Bilder in meinem benutzerdefinierten Tumblr-Theme?

Question

In Tumblr, die maximale Bildgröße beträgt 500px . Ich möchte wissen, wie ich größere Bilder in meinem benutzerdefinierten Thema erhalten kann.

Answer 1

Die einzige Schwierigkeit besteht darin, ein Fallback einzubauen, so dass, wenn kein hochauflösendes Bild vorhanden ist, das Bild in Standardgröße verwendet wird. Note : diese Anweisungen sind für die Erstellung von benutzerdefinierten Themes mit der Themesprache von Tumblr. Es ist auch erwähnenswert, dass dies innerhalb eines Fotoblocks geschehen muss {block:Photo} {/block:Photo}

Diese Methode basiert auf Tumblr's {block:HighRes} . Code umhüllt mit {block:HighRes}{/block:HighRes} gibt es nur, wenn eine hochauflösende Version des Bildes vorhanden ist.

Erste das normale Bild ausblenden.

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

Zweite zeigen Sie das große Bild mit einer benutzerdefinierten Klasse an.

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

Note : Die Klasse ist notwendig, da Sie wahrscheinlich eine maximale Bildbreite festlegen müssen. Wenn Sie sich nicht mit benutzerdefiniertem CSS herumschlagen wollen, können Sie im Allgemeinen einfach style="max-width:100%" innerhalb des img-Tags.

Answer 2

Sie können {PhotoURL-HighRes} verwenden - es gibt auch einen Block, der erkennt, ob ein hochauflösendes Foto hochgeladen wurde oder nicht. Dokumente und Details finden Sie hier : )

Außerdem werden Sie wahrscheinlich unterscheiden wollen, wann Sie ein hochauflösendes Foto hochgeladen haben und wann nicht. Mit Blöcken wie diesem können Sie Tumblr veranlassen, ein hochauflösendes Bild anzuzeigen, wenn es verfügbar ist, und wenn nicht, die 500px-Version zu verwenden.

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

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

Beachten Sie, dass hochauflösende Fotos in der Größe gerendert werden, in der sie hochgeladen wurden. Damit sie sich richtig verhalten, hilft es, ein max-width Eigenschaft zu Ihrem Bildelement oder Container in Ihren Stilen.

Außerdem müssen Sie Aktivieren Sie hochauflösende Fotos in Ihren Themenoptionen

Ich hoffe, das hilft!