I’ve lately been messing around with the Tumblr platform, and am pretty impressed overall with what can be achieved with a free blogging platform. I’ve been working on a tumblr theme for portfolio creation (more on that later…) and came across the problem of not being able to display more than 15 posts per page. After a some digging, copying and pasting, and a bit of cleverness, I have the beginnings of a solution. I came up with a bit of code which will let you load all pages at once. I haven’t thought about how this would be integrated into a proper tumblr theme, because that’s not really my goal at the moment, perhaps someone else will have a solution. For now it’s more of a proof of concept. Much of the code is borrowed from Fluid Theme

First you need to set up the start_page variable somewhere at the bottom of your page. Or anywhere.

</pre>
<div id="hidden_navinfo"><!-- this is necessary for ajax pagination --><span class="startpage">{CurrentPage}</span><span class="totalpages">{TotalPages}</span></div>
<pre>

This is the script that makes it go:

$(document).ready(function() {
   var totalPages = $("#hidden_navinfo .totalpages").text();
   for ( var i = 1, len = totalPages; i < len; i++) {
		var count = i+1;
		var new_posts = "";
		$.get("/page/" + count, function(data) {
		 	$("#posts").append($('.page', $(data)));
		});

	}
});

This assumes that your posts are wrapped in one div with the class of “page” and another with the id of “posts”. The extra “page” div isn’t ideal, but it prevents nesting problems. Here’s an example of the very stripped down theme code I have:

  {Title}{block:PostTitle} - {PostTitle}{/block:PostTitle}
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">// <![CDATA[

// ]]></script>
<script type="text/javascript">// <![CDATA[
	$(document).ready(function() {
   var totalPages = $("#hidden_navinfo .totalpages").text();
   for ( var i = 1, len = totalPages; i < len; i++) {
		var count = i+1;
		var new_posts = "";
		$.get("/page/" + count, function(data) {
		 	$("#posts").append($('.page', $(data)));
		});

	}
});

// ]]></script>

</pre>
<div id="content">
<h1><a href="/">{Title}</a></h1>
<h2>{Description}</h2>
<div id="posts">
<div class="page">{block:Posts}

 {block:Photo}
<div class="box"><img src="{PhotoURL-250}" alt="{PhotoAlt}" />
 {block:Tags}
 <a class="tag" href="{TagURL}">{URLSafeTag}</a>
 {/block:Tags}</div>
<!-- post -->
 {/block:Photo}

 {block:Video}
<div class="box">{Video-250}
 {block:Tags}
 <a class="tag" href="{TagURL}">{URLSafeTag}</a>
 {/block:Tags}</div>
<!-- post -->
 {/block:Video}

 {/block:Posts}</div>
<!-- page --></div>
<!-- posts -->
<div id="hidden_navinfo"><!-- this is necessary for ajax pagination -->
 <span class="startpage">{CurrentPage}</span><span class="totalpages">{TotalPages}</span></div>
</div>
<pre>

Please let me know of any ideas for improvement!

UPDATE: Sorry guys, I really don’t have the answers to any of your questions, I’m not much of a Javascript pro, and was more just doing this to see if it sparked any ideas in others. I am, however, planning to revisit this eventually when I have time to learn some more javascript. Thanks!