Grow your CSS skills. Land your dream job.

Trying to make some changes to my charity work photography tumblr – help much appreciated

  • # December 27, 2012 at 4:47 pm

    Hello, inexperienced user here. I’ve been living and working for a charity on a little island in the Indian ocean for the past 2 months, and have a tumblr to exhibit my photography here. I’m wanting to make a few changes to my page but have no idea where to start, Google searches have failed to help.

    Here’s my tumblr – http://leonardoreunion.tumblr.com/

    My problems:

    One: Notice how when you click on a photo (the top one, for example), the caption underneath is half hidden (tested on two computers and three browsers) – how do I make sure the whole caption is shown?

    Two: Thumbnails. The thumbnail images are often not in the position I want them to be – how would I move them around to best show the photo? For example photograph #3, the second on the second row of the first post with the caption “He explains to us that plant-thieves have attempted to steal his crops in the past” – how would I push the thumbnail downwards so that his face isn’t half hidden?

    Three: I want to make my tumblr scroll infinitely. Instead of having pages, how do I make it load more as the user scrolls down? At this point it has 10 posts, if I make another post, another page will be added, I don’t want that. Alternatively, how do I increase the number of posts/page? This would be a second best compromise, as the page is already very image heavy, I’d rather not have 20+ multiple image posts loading immediately.

    Help would be really greatly appreciated, this website will be used to promote the charity I’m working for eventually and I want it to look perfect. Thanks in advance.

    Pastebin link to html – http://pastebin.com/UaKDRNQ4 (not sure if this is necessary, but here it is regardless)

    # January 7, 2013 at 12:53 pm

    Hey there – sorry I never saw this post earlier. I’ll check into this later today (just having my breakfast right now!).

    #1 should be easy. #2 is likely impossible. #3 will take a bit of work but should be easy enough.

    # January 9, 2013 at 11:02 pm

    Thanks! #1 is the main issue, I want those captions to be easily readable. I managed to fix #3 by myself.

    What about #2 is impossible? What determines the part of the image that is shown in the thumbnail?

    # January 10, 2013 at 1:56 am

    Sorry – totally forgot about this. Just off to bed, will try desperately to remember tomorrow!

    # January 10, 2013 at 2:20 am

    You could definitely use this for #3!

    http://www.infinite-scroll.com/

    # January 10, 2013 at 1:48 pm

    Thanks LimeX, but I already solved #3.

    No worries TheDoc, whenever you have time.

    # January 10, 2013 at 1:49 pm

    Okay!

    I cannot reproduce the problem that you’re seeing in #1 – can you take a screenshot? What browser are you experiencing this in?

    The reason why #2 is probably impossible is because it *has* to crop it somewhere. Tumblr *used* to crop it from the top but now it’s cropping it from the center. You’ll simply just need to be aware of this and possibly rearrange your images accordingly (you can change the order of the images if you go to edit your post).

    @LimeX is right, you’d use the Infinite Scroll plugin: https://github.com/paulirish/infinite-scroll

    Your theme is only using jQuery 1.4.2, I’d update that to at least 1.7.0 – shouldn’t cause any problems for you. Jumping up to the newest version (1.8.3) might cause some things to break depending on how the developer created the theme: http://jquery.com/

    Once you’ve got your new jQuery installed and everything is working properly, you’ll need to add a link to your new infinite scroll plugin.

    Look for this line in your current theme by clicking ‘Edit HTML’ on the customization screen:

    You’ll want to change that to:

    And right below that, you’ll want to download the infinite scroll plugin to your computer and upload it to the Tumblr server using this link: http://www.tumblr.com/themes/upload_static_file It’ll give you a URL to the JS file that you can plus just under your call to jQuery, like this:


    Next you’ll need to set up all of your parameters for Infinite Scroll, so our new code will look something like this:



    Now, I noticed that your current `#pagination` div is actually blank. This might mean that you don’t actually have a 2nd page of content yet or the pagination code has been removed from the theme, but I think it’s the former rather than the latter.

    If you’ve managed to get everything working so far, CONGRATULATIONS! If not, ask away.

    # January 13, 2013 at 1:14 pm

    Brilliant, thanks for that. It is greatly appreciated, I’ve been unable to find help anywhere else.

    I’ll implement it later. A couple of questions:

    Are the instructions above including how to install jQuery, or to be done afterwards? Should I upload the jQuery .js file to tumblr static and change the js link, as above?

    You suggest that jQuery 1.83 may cause problems in my theme but then state to change the

    > script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”/script

    line to 1.83?

    As for #pagination, you’re correct, there are 10 posts/page, I currently have 10 exactly.

    Regarding #2 I’m using Firefox but have recreated the problem in Chrome, IE and Opera and checked different computers, on some of which there was no problem (seemingly resolution related rather than browser). I noticed that on a square resolution LCD the problem did not exist and on an older smaller CRT using IE it was fine also. I can also make the captions show correctly by hitting F11 or making my browser window smaller. This is the pressing issue, I have to ensure that all viewers will be able to read the caption regardless of browser or resolution.

    3 – Is it hardcoded into tumblr where the theme crops the photo? Or is there any way we can choose where the photo is cropped, in a similar way to how Facebook allows you reselect a thumbnail for your profile picture? A crop is necessary, but does it have to be in that specific place?

    # January 14, 2013 at 7:57 am

    Here’s a screenshot of the caption problem – http://i.imgur.com/C1jJ1.jpg

    # January 20, 2013 at 6:37 am

    Would be great to get the #1 issue fixed, the infinite scroll thing is not nearly as important as everyone being able to actually read the captions.

    # January 22, 2013 at 11:37 am

    @finshields, I don’t see what you’re saying, I can see all of the captions on Chrome and FF on Windows

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

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