Grow your CSS skills. Land your dream job.

Tumblr {block:Posts}…{/block:Posts}

  • # February 8, 2013 at 1:52 am

    I’m new to Tumblr and have this one hiccup with the theme I’ve built for a client. I don’t know how to, what to or where to put my {block:Posts}. I built the theme using HTML with an external style sheet. When I use just HTML I get perfect infinite-scroll or (auto-paging), but when I use {block:Posts} it stops working. Here’s my client’s Tumblr http://nomdecodenikita.tumblr.com, right now I’m using just HTML and manually entering photo and video posts. It would be great if I could use the Tumblr block elements so that when my client posts her media to Tumblr, the page would automatically update. Here’s the link to my external style sheet: http://static.tumblr.com/kfwmv3q/zgPmhubc9/nomdecodenikita.css Here’s my CodePen: http://codepen.io/kwcbg/pen/feFpa

    # February 8, 2013 at 12:15 pm

    I have little to no experience with tumblr, but it appears the {block:posts} uses ordered lists to display the content. So instead of using divs style and display everything with ol > li

    # February 8, 2013 at 12:17 pm

    I can reply to this in about a couple of hours – I’ll try to remember!

    (and @mcjohnst, that’s not true, sorry!)

    # February 8, 2013 at 12:38 pm

    @TheDoc Thanks Doc!

    # February 8, 2013 at 1:18 pm

    So right now each of your posts look like this:

    Before your first post, you’ll want to put your opening `{block:Posts}` and after your last post you’ll put your closing `{/block:Posts}`. Next up is the tricky bit.

    For inexperienced Tumblr users, I like to recommend an approach that I don’t personally use (as it adds too much duplicated code) but is a lot easier to comprehend.

    Inside your posts block, you’ll need to create areas for each of the post types that you plan on supporting into. I’ll use your photo post example from above. It would look like this:

    {block:Photo}

    {/block:Photo}

    You would repeat this process for all of the post types that you want to support. I’ll do one more example with your video post:

    {block:Video}

    {Video-500}

    {/block:Video}

    I’ve included the `.item` divs in my example, but I’m not sure if they’re actually being used. Also, in the Codepen you created you have 57 `

    ` but 59 `

    `, so you’re going to run into some trouble with that.

    # February 8, 2013 at 2:00 pm

    @TheDoc Thanks again Doc, I’ll try this. I’ll keep you posted on my progress!

    # February 8, 2013 at 5:44 pm

    @TheDoc OK, I did exactly what you suggested. I placed my opening {block:Posts} and closing {block:Posts}, then copied and pasted your example in between. It worked and I was able to load photos and video, but I lost infinite-scroll. How do I get that back? I know the answer is staring me in the face, I just can’t figure it out! You mentioned that I have 57 div but 59 /div, and that I would run into some trouble, could this be it? How did you get the div and /div count?

    Tumblr: http://nomdecodenikita.tumblr.com
    CodePen: http://codepen.io/kwcbg/pen/feFpa

    # February 8, 2013 at 5:47 pm

    On the actual tumblr blog you have one extra closing div. View source and search for `

    Your infinite scroll isn’t working because you have a few JS errors: http://cl.ly/image/0j2j382N2s1A

    # February 8, 2013 at 5:49 pm

    @TheDoc Thanks Doc, your a big help!

    # February 9, 2013 at 1:55 am

    @TheDoc Could the JS error be in one of my external JS files, or in the HTML itself? I don’t get how it works using regular HTML but when I use Tumblr {block:Posts} it doesn’t work?

    # February 10, 2013 at 9:25 pm

    @TheDoc Problem solved, I think it was the extra closing div.

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