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

[kwcbg]

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

[TheDoc]

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

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

[kwcbg]

@TheDoc Thanks Doc!

[TheDoc]

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.

[kwcbg]

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

[kwcbg]

@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

[TheDoc]

On the actual tumblr blog you have one extra closing div. View source and search for `http://cl.ly/image/0j2j382N2s1A

[kwcbg]

@TheDoc Thanks Doc, your a big help!

[kwcbg]

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

[kwcbg]

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

[Author]

Posts