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

Show Comments link screenshotThe 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.

Purple Fade Technique 1 screenshotWith 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.

Purple Fade Technique 2 screenshotI 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.

Purple Fade Technique 3 screenshotPerfect! 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.

Feel free to if you found this useful.

22 Comments

Brian/Dad

I don’t know if I like the hidden comments especially once you unhide them you can’t go back and re-hide them. Can you make it reversible?

Originally it was reversible, and then I thought, once you unhide the comments, why would you want to re-hide them?

I did just think of one potential oversight: if you unhide the comments, then post a comment, the older comments will be rehidden. I’m not sure this is such a big deal, and I’m not sure there’s anyway to maintain the hidden comment state without more application logic.

Any chance of making the “stretchable” homepage into a plugin? I’ve struggled with the same thing on occasion…One that I’ve especially had issues with is the fact that if I set “maximum of 10 posts” to display, that hold even if I search for something, and that result SHOULD be more than 10 posts. I’d love for the search result to be complete, while maintaining my homepage at X results (or stretchable, if that’s possible).

Great stuff, Justin!

Jason, I had the same problem when I moved to WordPress. Since I only display the post title in my archives, I wanted to see the whole list for each month and not have to page through them 10 or 15 at a time.

I found Limit number of posts with WordPress which I’ve used since moving over. Basically you set the “Show at most” setting under Options > Reading in WP 1.5 to some very large number and in the index.html theme file your break out of “The Loop” with your own logic.

I don’t think it’s possible to turn this into a plugin, but I can put up the “elastic” code I used based on Justin Blanton’s solution above.

I updated the post with code for implementing the Elastic Homepage.

I like you, but these computer-y posts have got to go. :*(

Melanie

in case you’re interested, PJ started a blog from Baghdad: http://pjsblog.blogs.com/my_weblog/

Melanie, that’s great. Thanks for the link.

Brian/Dad

I agree with Joy, it’s been a long time since you’ve said anything about what’s happening in the soap-opera that you call your life.

Brian/Dad

I didn’t want to sound demeaining in my last comments. For which I apologize to you and your readers. All I wanted to say was that your life is episodic, something I look forward to reading and one that is more interesting than my own at this time. So I will retract the “soap-opera” statement above.

Ha, no worries. I don’t think my life is that melodramatic. I just assumed you were trying to by funny.

I have to admit, for a “blogger” I find writing about my life amazingly hard to do. I’ve been impressed with Joy, Marcia, and Leona writing about what’s going on from their perspective. In fact when we do things together, you may find their blogs more illuminating about my life and activities than my own.

Mostly I get bored with my own lack of narrative structure. Sometimes I’ll start a “what I did this weekend” kind of post and the sentences will be like “I did this, and then I did this, and then I did this” that I get so bored of what I’m writing and can’t bring myself to finish it.

Usually what it takes is a certain kind of inspiration about the way I want to write about an event or experience that allows me to overcome some of the tedium of writing. But inspiration is hard to come by. It comes when it comes, I really can’t force it. I’ve thought on a previous occasion that I’d be willing to try a drug that made me feel inspired and creative more of the time.

More sleep + a little caffeine?

Justin, I know what you mean in your last comment. I find it really fascinating the things that people choose to write about in their public blogs. I find myself frequently skipping over major eventful things that happened, and never writing about them, and then writing in depth about some little tiny thought I had.

jackie

this just sounds dumb and irresponsible even to me, but I really do appreciate the effects of substances on creativity. And I would, from recent experience, recommend one caffeine-spiked alcoholic beverage (i.e. Irish coffee). Never do I have so many ideas all at once.

I know you, and I know you have interesting thoughts. Just let them out. They don’t have to be important or funny. Your Justinisms are constantly entertaining me in real life. Do I need to start recording them?

Melanie

Wow, we are a demanding audience! To the point of encouraging use of “substances” for our own entertainment, haha. Hey, I just got a webcam and it’s tres cool.

Umm, are you broadcasting your life live on the web?

Idea: old comments should only be hidden on posts where the most recent comment was posted in the last X days (as well as some cap for always hiding more than Y comments, where Y is some large number, like 20).

For posts where the commenting is current, ongoing, or periodic, the 7 day criteria will serve to bring the more recent comments closer to the top.

For posts where the discussion has ceased, there’s no longer any reason to hide comments, the post should be essentially a flat archive.

Melanie

to your question about broadcasting my life (was that to me?)… heck, no. You’d see nothing but the wall of my home office/guestroom most of the day. I got it so PJ and I can have video chats while he is overseas! So far we haven’t gotten the video to work (although it works for me and my parents) but we can hear each other’s voices.

Melanie have you and PJ tried Skype (for free internet phone calls)?

Melanie

no, but Richard Todd tried to call me from England using it and it was so staticky that we couldn’t really talk. PJ has better ways to call.

For future reference, Matt suggests using query_posts() to adjust how many posts show up on archive pages…

Improved the hidden comments feature so that they’re hidden by JavaScript as the page loads.

This has two benefits. If JavaScript is turned off, the comments aren’t inaccessible, and if the URL includes a hash to a hidden comment, Javascript won’t hide the comments.

Purty cool, huh?

Care to Comment?

Or if you'd prefer to get in touch privately, please send me an email.

Name

Email (optional)

Blog (optional)