blindcyclistsunion/tumblr_recentpostwidget_js.html

## tumblr_recentpostwidget_js.html
<!-- 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>
	<!-- 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>