Grow your CSS skills. Land your dream job.

How to make Tumblr Photos smaller?

  • # August 12, 2012 at 8:55 pm

    Ok so i was wondering if someone knows if there is a way to change Tumblr html code so that every photo i post on there can be smaller and all the same size or at least smaller?

    # August 13, 2012 at 1:35 am

    Depends on what you’re going for. Do you have a link to the website?

    Tumblr allows you to choose from a wide range of pre-defined image widths.

    # August 13, 2012 at 6:36 pm

    heres the link – http://powellcustomdrums.tumblr.com/ can you view the code and tell me how to change all the image sizes so when i post something it gets smaller?

    # August 13, 2012 at 6:39 pm

    also any idea how to make my text content on the right hand side of each photo? almost like this forum section or like how sjc has it – http://www.sjcdrums.com

    # August 14, 2012 at 2:26 am

    How small would you like them? Right now you are using {PhotoURL-500}, you can change that number to any of the following:

    • {PhotoURL-400}
    • {PhotoURL-250}
    • {PhotoURL-100}
    • {PhotoURL-75sq}

    All of that info can be found here: http://www.tumblr.com/docs/en/custom_themes#photo-posts

    # August 14, 2012 at 8:57 pm

    ok AWESOME it works!!!! Thanks a LOT! now what about making the photo go to the far left and having my posts text to the right of each photo instead of under it?

    # August 14, 2012 at 11:39 pm

    Find this in your CSS: .post-photo img

    Remove the margin, add ‘float: left’, add ‘margin-right: 10px;’

    On the post-photo divs you’ll need to add a class of ‘clearfix’ and put the following in your CSS file: http://css-tricks.com/snippets/css/clear-fix/

    # August 15, 2012 at 8:37 pm

    i did the float photo left part easy but the link you gave me which code do i copy and where exactly do i paste that code in my tumblr to make it work? and do i change or add anything to that?

    # August 16, 2012 at 4:21 pm

    ?

    # August 16, 2012 at 4:56 pm

    You’ll need to put the CSS from the link into your “Custom CSS” box in the customization screen. Then you’ll need to edit your template by clicking ‘Edit HTML’ and adding that class to your post-photo divs.

    # August 16, 2012 at 6:09 pm

    but when i click the link there are several codes which one do i use?

    # August 16, 2012 at 10:19 pm

    im almost gonna give up on it :( i dont know where to post the code ive tried everything not sure what code to post in my ADD CSS box and then post what?? after that in my edit html and on what :line: in my tumblr to put that code?

    sorry for the questions and confusion and i may be able to figure this out if you can guide me one last time?
    Thanks
    :)

    # August 16, 2012 at 10:31 pm

    Put this in your custom CSS box:

    .group:after {
    content: "";
    display: table;
    clear: both;
    }

    Then click ‘Edit HTML’ and look for class=”post-photo” and change it to class=”post-photo group”.

    # August 18, 2012 at 10:28 am

    its not working when i do the html part with putting in the – “post-photo group”

    because mine has – class-“post-content post-photo”

    go here – http://powellcustomdrums.tumblr.com/

    # August 18, 2012 at 6:07 pm

    1) You aren’t floating the images properly. Your code looks like this:

    /*  POST - PHOTO/VIDEO  */
    .post-photo img {
    display: block;
    margin: 'float: left' auto;
    padding: 20px 0 0;
    }

    It should be like this:

    /*  POST - PHOTO/VIDEO  */
    .post-photo img {
    display: block;
    float: left;
    margin-right: 10px;
    padding: 20px 0 0;
    }

    2) It doesn’t look like you’ve added the CSS code I posted above to your website.

    3) Just add another class to it. So it’d be “post-content post-photo group”. You can have as many classes as you want on any element.

Viewing 15 posts - 1 through 15 (of 26 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".