Grow your CSS skills. Land your dream job.

How to make Tumblr Photos smaller?

  • # August 18, 2012 at 7:43 pm

    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?

    # August 18, 2012 at 8:06 pm

    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!

    # August 19, 2012 at 2:26 pm

    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:


    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:

    Then find the {LinkCloseTag} and change it to this:

    on my page my Link Open Tag looks like this -

    {LinkOpenTag}{LinkCloseTag}
    # August 19, 2012 at 4:23 pm

    help

    # August 19, 2012 at 4:50 pm

    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}



    {LinkOpenTag}
    {PhotoAlt}
    {LinkCloseTag}

    {block:RebloggedFrom}

    Reblogged from {ReblogParentName}

    {/block:RebloggedFrom}
    {block:Caption}
    {Caption}
    {/block:Caption}

    {/block:Photo}

    As you can see, there is no trailling 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}




    {PhotoAlt}


    {block:RebloggedFrom}

    Reblogged from {ReblogParentName}

    {/block:RebloggedFrom}
    {block:Caption}
    {Caption}
    {/block:Caption}

    {/block:Photo}
    # August 19, 2012 at 5:06 pm

    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!

    # August 19, 2012 at 5:41 pm

    Send me a private message.

    # August 19, 2012 at 6:34 pm

    ok sent

    # April 5, 2013 at 11:41 pm

    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.

    # April 6, 2013 at 2:38 pm

    @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.

    # July 13, 2013 at 1:12 am

    im having issues making my posts smaller as you can see on my tumblr, http://mesmerizedsouls.tumblr.com/ the pictures are far too wide to fit on the page without having to scroll to the right. i have looked through the html to fix the size but i cant find it anywhere. help please?

Viewing 11 posts - 16 through 26 (of 26 total)

You must be logged in to reply to this topic.

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