Elastic Homepage and Hidden Comments
In the background, I’ve been making a few improvements to my blog, some of which I think are pretty cool.
The Elastic Homepage
The first was inspired by my rampant blogging over the holidays, partly trying to keep in contact with friends and the fam, but also because I was spending an inordinate amount of time trying to get from Phoenix to Austin. Plus PHX had FREE! and ubiquitous wireless, so what else was a blogger to do?
I also noticed, as expected, that the traffic to my blog dropped off precipitously during the holidays. So there I was, posting once or twice as day, and with only 5 posts showing up the homepage, I was concerned that when people took a break from celebrating with their families to check their email and my blog, half of my ordeal might have scrolled off into the archives!
It occured to me that I needed to whip up some hybrid between Movable Type’s default behavior of showing the last X days worth of posts and just about every other platform’s behavior of displaying the last N posts. I could manually expand the number of posts showing up on my homepage, but I thought it’d be a LOT cooler if the homepage automatically “stretched” so that it displayed more posts when I’m posting frequently, but never dropped below some minimum threshold when I can barely squeeze out a post a week.
So that’s what I’ve done. At minimum you’ll see the last five posts on the homepage, but if I happen upon a stroke of unexpected brilliance, you’ll see at most the last 8 days worth of posts. Which, if you check my blog once a week (the old fashioned way), means you won’t miss a thing. Ha!
Update: The Elastic Homepage Howto
Want to implement the Elastic Homepage yourself? It’s based on Justin Blanton’s Limit number of posts with WordPress, so first you’ll have to set the Show at most posts option under Options > Reading to some large number. Choose something that you wouldn’t expect to exceed in the maximum time period you specify below. Be aware that this will affect how many posts show up in your archive, category, and search result pages. The updated code below will then override this number based on variables you specify.
In your index.php template file, change the following code (as taken from the default template):
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
To this:
<?php if (have_posts()) :
// variables to configure elastic homepage
$minimum_posts_to_display = 5;
$maximum_days_to_display = 8;
// initialize counter for elastic homepage
$elastic_homepage_counter = 0;
// convert days to seconds (60*60*24 = 86400)
$maximum_days_to_display *= 86400;
?>
<?php while (have_posts()) : the_post();
// stop printing posts when the minimum number of posts has been reached
// and the current post is older than the number of days specified above
$age_of_current_post = time() - get_the_time('U');
if (($elastic_homepage_counter >= $minimum_posts_to_display) &&
($age_of_current_post > $maximum_days_to_display))
{
break;
}
$elastic_homepage_counter++;
?>
Then modify the variables $minimum_posts_to_display and $maximum_days_to_display to configure the elasticity of the homepage to your liking.
Hidden Comments
The next idea came to me while I was reading a recent comment on my monthchunks plugin post, which continues to generate interest and thus occasionally new comments. The utility of scrolling down a narrow column of 40 odd comments loses its allure pretty quickly. Wouldn’t it be cool, I thought, if I could hide the old comments without making them inaccessible, in order to bring the most recent to the top, while still sorting them in chronological order.
With a teensy bit of JavaScript and a little WordPress theme hacking, I wrapped the first bunch of comments in a div so that only the most recent 10 comments lived outside of this div. Then I set display:none on the div so it doesn’t show up, but I added a link at the top of the comments that says Show comments: 1 through X which makes the div reappear and hides the link. Ah, so satisifying.
I came back a day or two later and realized that clicking the link to show the hidden comments happens so fast that it’s hard to tell what exactly changed. What a perfect opportunity to try the Yellow Fade Technique, popularized by the folks at 37Signals. [Unfortunately the images on the YFT post are currently broken, so it doesn’t do you much good.] However, the gist is that if you change something subtly on a webpage, you should provide the user with some kind of visual cue that something happened, like fading the updated info from yellow to white.
Perfect! All I needed was a library that would fade from any color to any background color. Thank you Adam Michela for doing the heavy lifting so I didn’t have to. His Fade Anything Technique does exactly that. I grabbed the code, plugged in my purplish highlight color and my beige background color, so now when you click the link to show the hidden comments, they gradually fade from purple to beige. SO COOL!
Check out Television Abstinence (currently has 12 comments, so 2 are hidden) to see this in action.
