¿Cómo obtengo imágenes grandes en mi tema personalizado de tumblr?

Question

En Tumblr, the maximum image size is 500px. Quiero saber cómo obtener imágenes más grandes en mi tema personalizado.

Answer 1

La única complejidad es incluir un respaldo, de modo que si no existe una imagen de alta resolución, se utiliza el tamaño estándar uno. Nota: estas instrucciones son para la creación de temas personalizados, utilizando el lenguaje de temas de Tumblr. También vale la pena señalar que debe estar dentro de un bloque de fotos {block:Photo} {/block:Photo}

Este método se basa en el {block:HighRes} de Tumblr. El código envuelto con {block:HighRes}{/block:HighRes} solo existe si hay una versión de alta resolución de la imagen presente.

Primero, oculte la imagen normal.

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

En segundo lugar, mostrar la imagen grande con una clase personalizada.

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

Nota: La clase es necesario ya que es probable que necesite para establecer un ancho máximo de la imagen. Si no quiere perder el tiempo con CSS personalizado, generalmente puede usar style="max-width:100%" dentro de la etiqueta img.

Answer 2

Puede usar {PhotoURL-HighRes} - también viene con un bloque para detectar si hay una foto de alta resolución cargada o no. Docs and details can be found here:)

Además, es probable que desee diferenciar entre cuando ha subido una foto de alta resolución y no. Utilizando bloques como este, puede hacer que tumblr muestre una imagen de alta resolución, si está disponible, y si no es la predeterminada, la versión de 500px.

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

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

Tenga en cuenta que las imágenes de alta resolución se mostrarán con el tamaño que se cargaron. Para mantener su comportamiento, es útil agregar una propiedad max-width a su elemento o contenedor de imagen en sus estilos.

Además, es necesario enable hi-res photos from your theme options

Espero que esto ayude!