treehouse : what would you like to learn today?
Web Design Web Development iOS Development

How to make Tumblr Photos smaller?

  • 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?
  • 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.
  • 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?
  • 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 - www.sjcdrums.com
  • 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
  • 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?
  • 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/
  • 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?
  • 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.
  • but when i click the link there are several codes which one do i use?
  • 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
    :)
  • 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".
  • 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/
  • 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.
  • Im just going to keep the photos floating left im happy with it now thanks a lot for all the help!

    Last question maybe you can help How do i make it so when someone clicks on my photos they zoom in bigger on the same page and the background gets darker like a "LIGHTBOX" so when there done viewing it they x the photo out? i know people say it can be done with TUMBLOX or something? Can you help me with this?
  • Never used Tumblox. You can use any type of modal box script, but I'm afraid you'll have to go on your own on that one before getting any more help!
  • ok i found out how to do this LIGHTBOX in TUMBLR and im so close but i think im messing up a small piece somewhere maybe you can check my code out and see where i am going wrong? here is the page where i found the STEP by STEP -

    http://www.webcunningham.com/add-a-lightbox-2-slideshow-to-your-tumblr-posts/

    here is my page -

    http://powellcustomdrums.tumblr.com/

    Now in the steps i uploaded everything but where im confused is it says to change the code to:
    <!-- Lightbox css -->
    <link href="[your absolute path]/lightbox.css" rel="stylesheet" />

    do i keep the - [ there ? and do i do my path like
    - http://static.tumblr.com/ppqzotg/wq6m90km0/lightbox.css

    last thing i think the real problem is the last step where they tell me to post -
    Go to Customize Theme > Edit HTML
    Just after the {block:Photo}, find the {LinkOpenTag} and change it to this:
    <a href="{PhotoURL-HighRes}" rel="lightbox[image]" title="{PhotoAlt}">

    Then find the {LinkCloseTag} and change it to this:
    </a>

    on my page my Link Open Tag looks like this -
    {LinkOpenTag}<img src="{PhotoURL-250}" rel="lightbox[image]" title="{PhotoAlt}">{LinkCloseTag}</a>
  • 1) Yup, you'll need to upload the CSS file through here: http://www.tumblr.com/themes/upload_static_file - don't keep the square brackets.

    2) I downloaded your theme, your entire photo post block should look like this if unaltered:
    {block:Photo}
    <div class="post-content post-photo">
    <a href="{Permalink}" class="permalink" title="Permalink">Permalink</a>

    {LinkOpenTag}
    <img src="{PhotoURL-500}" alt="{PhotoAlt}" />
    {LinkCloseTag}

    {block:RebloggedFrom}<p class="reblogged">Reblogged from <a href="{ReblogParentURL}" {Target}>{ReblogParentName}</a></p>{/block:RebloggedFrom}
    {block:Caption}
    {Caption}
    {/block:Caption}
    </div> <!-- .post-content -->
    {/block:Photo}

    As you can see, there is no trailling </a> after the link close tag, so I'm not sure what you're referring to .

    Based on the instructions that you showed me above, it should end up looking like this:
    {block:Photo}
    <div class="post-content post-photo">
    <a href="{Permalink}" class="permalink" title="Permalink">Permalink</a>

    <a href="{PhotoURL-HighRes}" rel="lightbox[image]" title="{PhotoAlt}">
    <img src="{PhotoURL-500}" alt="{PhotoAlt}" />
    </a>

    {block:RebloggedFrom}<p class="reblogged">Reblogged from <a href="{ReblogParentURL}" {Target}>{ReblogParentName}</a></p>{/block:RebloggedFrom}
    {block:Caption}
    {Caption}
    {/block:Caption}
    </div> <!-- .post-content -->
    {/block:Photo}
  • if i email u my tumblr login and password can you rearrange and fix the coding so it works? i uploaded all the css and everything already unless you wanna redo it!
  • Send me a private message.
  • Hi, I've tried and tried to get the images on my blog smaller. I went all the way down to size 75 on the code you posted above and for some reason the pics are still huge. Here's my blog: natazianatazia.com I bought the theme and can send you the code if ya need it. I hope you can help.

  • @natazia - what are you trying to accomplish? Post your theme's code here and create a secret gist: https://gist.github.com/ Then post back a link to it.

    It appears as though you're still loading in the high res version of your images.