Come posso ottenere immagini di grandi dimensioni nel mio tema personalizzato tumblr?

Question

In Tumblr, the maximum image size is 500px. Voglio sapere come ottenere immagini più grandi nel mio tema personalizzato.

Answer 1

L'unica complessità è includere un fallback in modo che se non esiste un'immagine ad alta risoluzione, viene utilizzata la dimensione standard. Nota: queste istruzioni sono per la creazione di temi personalizzati, utilizzando la lingua dei temi di Tumblr. Vale anche la pena notare che questo deve essere all'interno di un blocco di foto {block:Photo} {/block:Photo}

Questo metodo si basa su Tumblr {block:HighRes}. Il codice con {block:HighRes}{/block:HighRes} esiste solo se è presente una versione ad alta risoluzione dell'immagine.

Primo, nascondere l'immagine normale.

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

In secondo luogo, visualizzare l'immagine di grandi dimensioni, con una classe personalizzata.

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

Nota: La classe è necessaria come avrete probabilmente bisogno di impostare una larghezza massima dell'immagine. Se non vuoi scherzare con i CSS personalizzati, puoi generalmente utilizzare lo style="max-width:100%" all'interno del tag img.

Answer 2

È possibile utilizzare {PhotoURL-HighRes} - anche con un blocco per rilevare se è caricata o meno una foto ad alta risoluzione. Docs and details can be found here:)

Inoltre, è probabile che tu voglia distinguere tra quando hai caricato una foto ad alta risoluzione e non. Usando blocchi come questo, puoi avere tumblr visualizzare un'immagine ad alta risoluzione, se disponibile, e se non predefinita alla versione 500px.

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

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

Nota che le foto ad alta risoluzione verranno visualizzate nella dimensione in cui sono state caricate. Per far sì che si comportino, è utile aggiungere una proprietà max-width al tuo elemento immagine o contenitore nei tuoi stili.

Inoltre, è necessario enable hi-res photos from your theme options

Spero che questo aiuti!