Getting Tumblr To Play Nice With Photo Width
I find it strange that Tumblr only gives us default PhotoURL variables up to 500px. This limit makes it slightly annoying for those of us who like a bit of neatness and alignment in our lives. Since this content column is 600px wide, and the default PhotoURL values go up to 500px, all of my photo posts are going to be 100px short of the caption.
This point is handily demonstrated in this shocking little example picture I whipped up.
After some searching I came across a forum post asking for help on this specific topic, and in amongst the well-meaning yet somehow mis-understanding answers, was an actual answer which managed to produce actual results. However the answer was not as straightforward as one would have hoped.
So to get to the point, what I did was this:
Go to your Tumblr Dashboard, and click on the gear icon to get to preferences, then click on “Customize your blog”. This will take you to the theme customization page.
Under the custom theme block, click on the “Edit HTML” button. Here comes the fun part.
The side bar should have expanded, showing a mess of HTML code. Yay. Now, if you don’t know how wide your content wrapper is, you’re going to have to find out. In my case my wrapper is 600px wide. Depending on your type of theme, this may vary, and there is no single way to find out for sure. Generally it will be near the top of this HTML code in the CSS section for the wrapper, as mine was:
#wrapper {
width:600px;
margin:0 auto;
}
Next hit CTRL-F (Command-F for our Mac-toting comrades), and type in “photourl” without the quotes (into the very plain looking “Find:” box that pops up, not the one that your browser will show). Now you should have located the code that renders a Photo from a Photo post, and it should look something like this:
<img src=“{PhotoURL-500}” alt=“{PhotoAlt}”>
That little -500 after PhotoURL is what is causing the problems. Unfortunately you can’t just change that to whatever size you want. No. That would be too easy. Instead, you need to change the tag to a HighRes photo tag, and constrain it’s size using in-line CSS. Gibberish? Indeed. Make it look like this:
<img src=“{PhotoURL-HighRes}” alt=“{PhotoAlt}” style=“max-width: 600px; height: auto”>
Where max-width is the width of your wrapper, in my case 600px. That was enough to magically fix the problem for me, with this theme at least. And only for “Photo” posts.
For Text posting, there doesn’t seem to be an over-arching variable that handles image size, as the built in text editor seems to handle the images on a per-image basis. Thus, to resize your photos as you insert them into a Text post:
Insert the image by clicking “+ Upload photo” or by using the little picture icon above the editor window.
Resize the photo inside the text editor to the correct size, or alternatively (because the small size of the editor window makes it difficult), just resize the image slightly in any proportion.
Then, click on the HTML icon to enter HTML editing mode. Look for your inserted image by finding the tags:
<img src=“http://media.tumblr.com/whatever.png” width=“600” />
And change the width value to the same value as the wrapper width, in my case 600px. There will be a “height” value there too, but that can be erased (unless you know your image proportions and can really be bothered typing in the pixel height).
Now all your images should have the same width, unless their dimensions are actually initially smaller than the wrapper width. In that case they won’t be stretched to fit.
I hope this helps someone, somewhere, out there!
prguitarman
kianamaiart
izzy806
germansingergirl
annaxmalina
discoholicmusic
jacobvanloon
