Updating template

[lharby]

Hi. This is not a specific bug as such, but I was advised to post it here.

I have a theme I have rolled myself. It doesn't seem to work well with NPF post format. The goal is that all posts that have images should use the high res version where available.

I've worked with the api a fair bit and built different apps. But I think I want to leverage a full tumblr template in order to utilise likes, reblogs etc.

I looked at this recently: https://gist.github.com/cyle/ae03689903128a73bd174ba16d3ad195

Calling posts via js is nice

<script>
    var posts = new Array();
</script>
{block:Posts}
<script>
    posts[{PostId}] = {NPF};
</script>
{/block:Posts}
<div id="post-list"></div>

But it does not return any tag information, the post id seems to be the link to the post sometimes but not others.

The first four in this array have the correct ID to be able to build a link to the post, but the others do not work. See: https://imgur.com/a/oqlxb4k

So my question is.

Can I update my current theme to handle NPF posts better? Can I just update to another NPF theme and format everything so it looks like my current theme? If so I want a really simple theme? Can I use the code above and also retrieve more meta data about each post?

Sorry this is wooly, if you want URL's of stuff I have implemented I can provide that. I'm just trying to figure out the best approach.

[AprilSylph]

The first four in this array have the correct ID to be able to build a link to the post, but the others do not work

This is because of Javascript being unable to handle newer, 64-bit post IDs as numbers. See how the larger IDs always end in 00; the precision is being lost. Cyle's prototype was made 2 years ago, before the switchover to larger post IDs. To account for it, you'll need to initialise posts as a regular Object and stop using {PostId} as a number:

<script>
-    var posts = new Array();
+    var posts = new Object();
</script>
{block:Posts}
<script>
-    posts[{PostId}] = {NPF};
+    posts['{PostId}'] = {NPF};
</script>
{/block:Posts}
<div id="post-list"></div>

and to pull more data from the theme engine than content, layout, and trail, I feel like the easiest way would to just set the data in the same breath:

<script>
    posts['{PostId}'] = {NPF};
+   posts['{PostId}'].tags = [ {block:Tags}'{Tag}',{/block:Tags} ];
</script>

although personally, i would have posts still be an Array of Objects and use {PostId} as a property rather than an identifier. Cyle using custom identifiers on an Array is... questionable.

[AprilSylph]

(FWIW, I have a full JSON-powered theme here, but it's designed for just visualising posts as JSON rather than using the JSON to do anything. I do recommend looking at it though, since putting regular theme variables into JavaScript is tricky.)

[lharby]

Thank you so much for this. So that I don't keep pestering you, is there documentation somewhere about all the properties the post object will return? If I want likes, reblogs and other meta data?

This does not mention tags for example: https://github.com/tumblr/docs/blob/master/npf-spec.md

[AprilSylph]

You need to construct the post object yourself. {NPF} only contains content, layout, and trail. Everything else needs to be pulled from the theme engine rather than the API to prevent distributing your (or anyone else's) API key.

[cyle]

☝️ Everything April said is what I would've told ya, too. 😄

More documentation on the different theme "blocks" available (i.e. {Tag}) is here.

although personally, i would have posts still be an Array of Objects and use {PostId} as a property rather than an identifier

I would advise this as well. My prototype in the gist you linked was very rough and quickly made to prove a point, not really something ready for actual usage. I'll try to make that clearer in the gist.