#post sizes

Tumblr’s dashboard photo sizes.

height can be any size as long they are the same in a row

hello there nonny…

post widths are quite often the bane of theme makers lives… O_O  tumblr standard code will render your post blocks in the following widths by default - 250px, 400px, 500px, 700px - why this is, we may never know… - if you look at tumblr standard code ( for example for photosets ) you can see the sizes here -

which is why most theme makers will stick to these standard sizes.  anything other will require a little extra code tinkering.  

i’ll walk through changing post size on my ‘in flux’ theme - it’s currently set as a standard 400px post theme, but we’ll notch it down to your required 350px.

here’s our ‘starting’ basic theme…

you might want to make sure you can see a text post, a video, a photo and a photoset on your theme live preview when editing…

first of all we’re going to make the container smaller and the post width smaller…

on line 203 of the code - we’ll take 50 px off the post container size -on line 190 of the code - we’ll take 50px off the post size - 

now - you’ll see our text posts look fine -

and our single photo posts are probably okay too - that’s because in this theme, i’ve already included a little bit of code on line 177;

img {    max-width:100%;}

if your photo posts have messed up at this point, you might want to add that bit of code to the css in your theme.  

the code for photo posts in this theme is on line 423

{block:Photo}{block:Caption}{Caption}{/block:Caption}{/block:Photo}

you can change the block size to {PhotoURL-500} - as long as the reference is LARGER than your post size and you include the ‘max-width-100%’ in your css - all photos will be forced into the right size for your post width.

but if we look at our photosets and our video posts - they’re still sitting at the ‘400px’ post size and sticking out to the right a bit :(

now we need to make sure our photosets and videos will fit

for photosets, it’s quite an easy fix... scroll right down to the html for the post blocks ( right down at the bottom )  on line 425 you’ll see the block for photosets - 

{block:Photoset}{Photoset-400}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}

all we’re going to do here is take out the reference to the ‘400′ post width.  delete that line and paste in the following;

{block:Photoset}{Photoset}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}

this will now be picked up by the css we referred to earlier - the ‘max-width:100%;’

videos are a little trickier as they won’t be picked up by the image max-width.

we need to add in some extra css now - 

.video {    width:350px!important;}

.video iframe {    width:350px!important;}

just pop that anywhere in the css section of your theme - then scroll down to the video html section and add in the reference to your new css like so-

{block:Video}

{Video-400}

{block:Caption}{Caption}{/block:Caption}{/block:Video}

again, as long as the video size is LARGER than the one you’re setting in your css, it will work fine!  here’s our video post nicely resized -

one last thing you want to check when resizing posts is the width of your notes on your permalink pages.

by changing the width of the posts, my notes are now a little too big...

in this theme, i only had to take 50px off the width of the notes to get them to line up again...

you may also need to check your tags/permalink etc, depending on how your particular theme is coded and make sure all widths are in line with your new post size...  

but that’s about it... :3

normal (250 x 250) px - no tag needed,

vertical (250 x 500) px - add tag 1x2,

horizontal (500 x 250) px - add tag 2x1,

large (500 x 500) px - add tag 2x2,