How do I get large images in my tumblr custom theme?

Question

In Tumblr, the maximum image size is 500px. I want to know how to get larger images in my custom theme.

Answer 1

The only complexity is including a fallback so that if no high resolution image exists, the standard size one is used. Note: these instructions are for custom theme creation, using Tumblr's theming language. It's also worth noting that this must be within a photo block {block:Photo} {/block:Photo}

This method hinges on Tumblr's {block:HighRes}. Code wrapped with {block:HighRes}{/block:HighRes} only exists if a high resolution version of the image is present.

First, hide the normal image.

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

Second, display the large image with a custom class.

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

Note: The class is necessary as you will likely need to set a maximum image width. If you don't want to mess around with custom CSS you can generally just use style="max-width:100%" within the img tag.