How to add high res photos to Tumblr

It’s time once again, to explore the deepest and darkest corners of Tumblr. This time around, I’ve got a question from rajvir92, who asks:

I am an amateur photographer and i use tumblr to upload my photos. however whenever i post my photos tumblr shows it in small size not in its orginal size. how can i post the picture of its original size. is there a way or any theme that can show the photo in bigger size than the regular size that tumblr shows?

There’s a couple different options available to change this, and what you choose will depend on the amount of tweaking you’ll want to do.

The easy route is to just pick a High Res theme, which you can find by selecting the “Hi-Res” category from the themes menu. There’s a few nice looking themes here, especially the paid ones.

But let’s say that I’m really attached to my theme, and I don’t care about visual consistency. I just want my photos to be as big as they possibly can. To do this, we’re going to have to work with our theme’s HTML code.

A word of warning: Anytime you mess with code, there’s a chance you can screw something up. If something does go wrong, just go back into the themes menu and re-install your theme by selecting it and pressing the “Use” button.

To get started, press the “Edit HTML” button in the Customize screen.

This will bring up the theme’s HTML code. What we need to look for is a tag that says:

{block:Photo}

In between the opening tag of {block:Photo} and the closing tag of {/block:Photo} is the only area we need to be concerned with. Editing any code outside of these two tags is going to affect other aspects of our theme, and we’re only interested in the Photo posts.

What you see in between will vary, but it should look fairly similar to what I have here. You’ll probably have a span class tag, a linkopen and close tag, an img src tag, and a place for the caption underneath.

The span class tag is responsible for keeping the size of our photo in line with our theme, and since we don’t want that we’re going to delete both it and the closing tag entirely.

Next, the img src tag is telling our theme to pull the photo and shrink it’s width down to 500 pixels. We want to change it from “500″ to “HighRes”

It is case-sensitive, so make sure you capitalize the H & R.

And that’s it! Click “Update Preview” to preview the changes you made. The size of the photo should be much larger. To save changes, press the “Appearance” arrow to return to the Appearance menu and press the “Save” button.

Music Credits

Background music featured in this video is “One Fine Day” by The Insider and is used under CC-BY-SA license from Free Music Archive.

This entry was posted in Tutorials, Videos and tagged , , , , , , , , , , , , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

One Comment

  1. Juan
    Posted August 4, 2012 at 8:18 am | Permalink

    Hello,
    I’m changed the PhotoURL as you recommended, but my blockPhoto is so full of other “blocks” that it’s not having any effect on the posted pictures. it still resizes them to 560 and with a big quality loss.

    I’m an amateur at all this html thing, I’d really appreciate your advice.

    this is what my block actually looks like:

    {block:Photo}
    {block:IndexPage}{/block:IndexPage}
    {block:PermalinkPage}{LinkOpenTag}{/block:PermalinkPage}

    {block:HighRes} {/block:HighRes}
    {block:IndexPage}
    {/block:IndexPage}
    {block:PermalinkPage}{LinkCloseTag}{/block:PermalinkPage}
    {block:PermalinkPage}{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage}
    {/block:Photo}

    I understand how programming works and have done it at a low level, but here i’m lost with all the references.

    Thank you in advance.

    Juan

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>