#post sizes

[oeuvresource]

Tumblr’s dashboard photo sizes.

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

gifs cannot go past 3mb in size

[myheroacademia]

Old Posts vs. New Posts

I wanna know which post size people like more the old one (500px) or the new one (540px). Can you all please reblog or reply stating “old” or “new”? I wanna know for editing purposes.

[octomoosey]

Hey there G! :'3 I was wondering if there was anyway you could explain to me how to change posts sizes on a theme. I'm trying to make theme posts 350 px but everytime I do the images I've reblogged disappear. If the posts are 400 or 500 px they are there, but if I go any smaller they're gone again. p.s thank you for being so helpful always. <3

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

if you found this useful, a like or reblog is always appreciated! 

[stevebuckeythemes]

hello i really love your theme sun hands 2.0 and i wanted to use it only with 300px posts instead of 400px but whenever i try to change the posts' size the photosets stay the same and look like cut only on the right side, do you have any suggestions?

well, tumblr’s blog post sizes can only go from 250px, 400px, 500px and 700px (i think 800px too). there are some special java scripts you’ll need to download and you’ll need to be pretty familiar with coding to be able to integrate the java scrips into the code. i myself don’t bother with it (but the 300px posts do look really nice) but if you really want, you’re more than welcome to try it here. :)

[seviippyong]

Can tumblr staff finally fix the 540px posts, so they look normal when you upload them? I miss making them and don't wanna upload them when they look ugly

[chempathetic-fallacy]

Post sizes

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,

extended (500 x 750) px - add tag 2x3.