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

html css tumblr
Fred Stevens-Smith picture Fred Stevens-Smith · Jan 12, 2012 · Viewed 38k times · Source

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

Answer

Fred Stevens-Smith picture Fred Stevens-Smith · Jan 13, 2012

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.

Related questions

Position Relative to the window

I have a Tumblr account and I'm working on editing the html of it. My question is this: how do I make my side bar be in a certain position but then I scroll down on the page, it stays …

Read More
edit css style of an element with a space in its class name

I'm creating a tumblr them and I have to write an external CSS file but I am having trouble editing the css style of the post elements. This its structure: <li class="post quote"> {other code} </li&…

Read More
How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More