-
-
Save blindcyclistsunion/1011001 to your computer and use it in GitHub Desktop.
| <!-- need jquery for this, this line should really go in your theme html | |
| just after the <head> marker, might work OK here if you aren't already using jquery --> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> | |
| <!-- Mimic the style of the tumblr headers from your theme --> | |
| <div class="heading">Recent Posts</div> | |
| <!-- The javascript below will insert your recent posts lists in here --> | |
| <div id="recentPosts"></div> | |
| <!-- // when this script is run, it sets a variable named tumblr_api_read to the result --> | |
| <script type="text/javascript" src="http://blindcyclistsunion.tumblr.com/api/read/json"></script> | |
| <!-- // this is the script that builds the html to go in the div above --> | |
| <script type='text/javascript'> | |
| // number of posts to fetch | |
| const recent_posts_count = 10; | |
| // maximum length of titles for truncation (plus 3 for ...) | |
| const truncate_length = 70; | |
| // start a div for the recent posts, you can add any ul,etc, formatting here also | |
| var recentPostsHtml = "<div>"; | |
| // loop around and proess recent_post_count number of recent posts | |
| for (var i = 0; i < recent_posts_count; i++) { | |
| // get a post | |
| var post = tumblr_api_read.posts[i]; | |
| // we need to extract different fields for different kinds of post | |
| var extract_field = ""; | |
| // we may wish to truncate some (or all, or none) of them | |
| var truncate = false; | |
| // we may wish to add a prefix to indictae (for example) the kind of post | |
| var prefix = ""; | |
| // In order for this to work really properly, we need to cater for all | |
| // the different post types that are available ... | |
| // regular 'text' post | |
| if( post.type == "regular") | |
| { | |
| prefix = ""; | |
| truncate = false; | |
| extract_field = "regular-title"; | |
| } | |
| // link post | |
| if( post.type == "link") | |
| { | |
| prefix = "[Link] "; | |
| truncate = true; | |
| extract_field = "link-text"; | |
| } | |
| // quote post | |
| if( post.type == "quote") | |
| { | |
| prefix = "[Quote] "; | |
| truncate = true; | |
| extract_field = "quote-text"; | |
| } | |
| // photo post | |
| if( post.type == "photo") | |
| { | |
| prefix ="[Photo] "; | |
| truncate = true; | |
| // note we use 'slug' as the field here, because tumblr provides us with | |
| // a nice truncated short clean summary. whereas the captions have html in them | |
| // html like div an p, which will muck up the formatting | |
| extract_field = "slug"; | |
| } | |
| // Video post | |
| if( post.type == "video") | |
| { | |
| prefix = "[Video] "; | |
| truncate = true; | |
| // slug again, see note above | |
| extract_field = "slug"; | |
| } | |
| // Audio post | |
| if( post.type == "audio") | |
| { | |
| prefix = "[Audio] "; | |
| truncate = true; | |
| // slug again, see note above | |
| extract_field = "slug"; | |
| } | |
| // Conversation post | |
| if( post.type == "conversation") | |
| { | |
| prefix = "[Chat] "; | |
| truncate = true; | |
| extract_field = "conversation-title"; | |
| } | |
| // Ask/Answer post | |
| if( post.type == "answer") | |
| { | |
| prefix = "[Answer] "; | |
| truncate = true; | |
| // might need to be 'slug' as well | |
| extract_field = "answer"; | |
| } | |
| // get the post's url | |
| var url = post.url; | |
| // get the field we're going to use as the title | |
| var title_field = $.trim( post[extract_field] ); | |
| // truncate and add elipses if desired | |
| if( title_field.length > truncate_length ) | |
| { | |
| title_field = title_field.substring( 0, truncate_length ) + "..."; | |
| } | |
| // add the prefix is there is one | |
| var title = prefix + title_field; | |
| // add it into the html string | |
| recentPostsHtml += '<p><a href="' + url + '">' + title + '</a></p>'; | |
| } | |
| recentPostsHtml += '</div>'; | |
| $("#recentPosts").append(recentPostsHtml); | |
| </script> | |
with tears of joy in my eyes, I thank you! Perfect!
PS: If you add the filter "text" you will not get html returned in the your postings. So if you want to get the body of your posts it removes the html. make this change at line 12:
http://mytumblr.tumblr.com/api/read/json?filter=text
Hey How would you change the code above to tell the script to ONLY show a particular type of post. on my blog i only want text posts to be listed in the recent posts section. Thank you in advance.
And why doesnt it work when recent_posts_count > 20?
dont worry about my first question i simply put comment marks around the if's.
I know i have posted more than 1 text post. but its only showing 1. (the last post i posted) which makes sense because in the last 20 posts there is only 1 text post. but how can i change it to display the last 10 text posts? (i tried increasing recenttextposts but it shows nothing if its bigger than 20.
@dddaaannnTemp, Probably a better answer to the first question is the code that violetk13 has posted above, the docs for the tumblr API can be found at http://www.tumblr.com/docs/en/api
You can filter for a variety of post types by appending query paramaters to the script where it is called in line 12, so for example to return just 20 text posts, change it to .../api/read?num=20&type=text.
As for why it borks when you set count > 20, I'm not sure, I haven't looked at this for ages, but I'll try and figure something out.
@dddaaannnTemp Ah, I see, because of the way I have done the post count, the script will throw an error if you set recent_posts_count > 20, because 20 is the default number of posts returned by the tumblr API, so in its current form, it's walking off the end of the array. I'll have a bash at tweaking it.
@eliduke @violetk13
Thanks guys, I'm glad you found this useful :-)
Thank you that is a better answer! Because i tries tweaking the for-loop to skip photo posts, then increase i by one to compensate for the 'wasted' loop. (i still want 10 posts so it has to redo the loop. but of course the post[i] has to be the next value so i used two variables. one controlling the condition and one controlling the post[i]. i ended up having a for loop with two variables. which should work fine and i t made sense to me but javascript didnt like the variable++; inside the forloop. it just didnt work. and besides to accumilate a number of 10 text posts the script would have to analyze more than the last 50 posts (maximum)... so yeah :) thanks so much for your help :) the script is very well documented and i could understand what it does by looking at it. (i used to do amateur java programming some time ago).
Thank you so much for this! Been looking for weeks for something like this.
One question though... How do I add a style to the div so each is styled differently for each post type? I want to include my little post icons to the Latest Posts list.
Thanks!
Thank you SO MUCH for this. I'm certainly not a javascript expert, and this was very well documented and aside from a few little things here and there I basically just copy and pasted this and it worked! Thank you! Thank you! Thank you!