drupal planet

The other day I got a message today from killes that the Drupal Planet was getting a ton of 404 errors on the images in my posts because I was using relative URLs, and because I've been going a bit gangbusters on the imagery lately, the errors have been compounded. These 404 errors pollute the error logs, making is more difficult to identify important errors, and apparently I'm not the only one with this issue. You, too, could be responsible for log pollution!

Luckily, I ran into a module called Relative Path to Absolute URLs a while back when figuring out how to send launch MailChimp campaigns from Drupal (module forthcoming) that will add an input filter to convert relative URLs in your images and links to absolute ones. So, I installed it, enabled the filter, and all was well with the Planet.

If you're contributing to log file wash-out with relative paths, use Relative Path to Absolute URLs and help keep the Planet clean.

What does a monthly archive block achieve?

I'm not sure how many people actually visit archive links for blogs. It seems like there are more natural groupings of posts, either by tag or the basic pagination, so I think it's likely not a terribly useful browsing pattern. However, there's three things do like about them:

1. It makes it easier for other people to track your posting frequency
2. It makes it easier to track your own posting frequency
3. It helps distributes internal link juice in a permanent way

From what I've heard - and almost all my SEO knowledge comes second-hand - one commonly overlooked method of improving the ranking of a page is using internal links well. Google sees each URL as its own entity, so in addition to garnering incoming links to boost the PageRank of a page, you can also use internal PageRank and it works the same way.

The idea is that each page has a bucket of rank to pass out. If you pass that rank around internally, you can get a nice boost in overall ranking. But, it's important that the links stay constant on a page, since Google tracks the age of links. So while taxonomy pages do a good job of passing out links, the links on their pages may change if they're sorting from newest to oldest.

Archive pages, on the other hand, will always have the same links on each page, so if this internal linking theory is valid, it's a good method to use.

How to set up the archive blog and pages with Views - The easy way

After I put together this blog post, a reader mentioned that there is an archive view that comes bundled with Views. I gave it a test run and it had enough of the same properties of my archive view that I'm pretty sure I must have just cloned it a year or two ago. So, if you want to go the easy way, just enable that and configure it to your liking. If you're wondering how it works or want to set it up manually, read on.

How to set up the archive blog and pages with Views - The manual way

Even though Drupal doesn't come bundled with an archive view like Wordpress, it's pretty easy to set one up with Views.

First, create a new view and add a Block display. 

Set the display to show a high number of items. I want all months to display, so I have it set to 30 for now. The screenshot is from Views 3 Alpha:

Set the filters to match whatever is showing up in your blog. In my case, it's just nodes that are a blog content type.

Next, we need to add an argument for year and month. So, click on the plus sign next to the argument box and select Node: Created year + month:

Next, we just need to select Summary, sorted ascending under Action to take if argument is not present:

You could also select Summary, sorted descending if you wanted the most recent month to display at the top.

By default, the list of months will display as a list with the number of posts per month. This is how I have mine set, and with a little styling it looks like this:

There are a few other options which you can explore by clicking on the link next to Style, which will be List by default and taking a look at the options:

The Jump Menu option sounds neat, but I couldn't get it to work with Views 3 Alpha.

Setting up the archive page

First, add a Page display.

Give the page display a URL:

From what I can tell - and it's been a while since I set this up - the only difference with the Page view is that I've set a title in the argument settings. So, click the override button to make sure this change doesn't apply to the defaults, and then click the edit link for Node: Created year + month and set %1 for the title.

You can test out this page view as long as you have some blog items already. In the Live preview section, add an argument in the YYYYMM format, like so:

In the example above, you would see a list of nodes for July, 2010.

Save the view and then set the block to display using either the block admin page (/admin/build/block) or Context (definitely check out the Context module if you haven't yet for block display settings, it makes SO much more sense). 

That's it, you should be good to go!

This tutorial is sponsored by the Save Joseph campaign. Only 6 more days to save one man from a roomful of teeth. http://savejoseph.org.

I've recently been using the Evernote module to blog, which has made my life surprisingly more rich. After building the module, I started using it right away and found it was the missing piece in creating a workflow that would encourage quality, rapid posting - something I've always wanted to be able to do. Now that its set up, I feel like I can write with virtually no overhead, and using images - kind of tricky when using webforms and wysiwyg - is about as easy as it can get. Even adding annotations is super simple with Skitch (writeup for a workflow with Skitch is imminent).

The ease with which I can create content made me wonder if maybe I could run an entire Drupal site's content off of Evernote. So I gave it a shot when setting up http://josephcowman.com, and it worked like a charm!

What I've done is set up four separate feeds in the Evernote module, three of which correspond to different content types, and a third which imports unpublished blog nodes with instructions for using and administering the site:

The Gallery feed expects notes with a single image. This image is added to an imagefield and is displayed in a gallery fashion on pages like http://josephcowman.com/gallery and http://josephcowman.com/gallery/untitled. The author can put the image anywhere in the post and it will be stripped out using the HTML input filter.

The Blog and Pages feeds, on the other hand, pulls any number of images in and replaces them with local copies of the images, so they would end up looking something like this blog post.

The idea in setting up the site this way is to make management of the content extremely easy. Since Evernote has a desktop application, all the site admin has to do is create or edit a page in Evernote on their computer (even offline), and any changes get pulled into the site on a cron run. So, no log-ins, no working with web forms, it's just working directly with the content without having to deal with the middle man.

I'd love to see more people experimenting with this kind of integration. It makes for a pretty tight workflow. I even take this a little further with my blog (a more detailed article will be forthcoming) by automatically Tweeting and sending my post to Facebook through Evernote as well.

This tutorial is sponsored by the Save Joseph campaign, a grassroots effort to find a good friend, stellar artist and all around amazing person a satisfying, creative job in the next 8 days. I know the Drupal community could use this kind of talent. Learn more about the effort at savejoseph.org. If you have any ideas on how I can get the word out about this, let me know!

My use case was that I wanted to be able to use social media icons for menu items so that we could re-arrage, add or remove items directly from the menu management interface:. The result is what you see below:

To use images for menu items in Drupal, the first step is to create an override theme function for theme_menu_item_link() in your theme's template.php file. The idea is to first run your image handling bit to switch out text for images, and then hand it over to the parent theme to do the rest. In my case, I'm using the Zen theme.

/**
 * Implements theme_menu_item_link()
 */
function yourtheme_menu_item_link($link) {
  // Allows for images as menu items. Just supply the path to the image as the title
  if (strpos($link['title'], '.png') !== false || strpos($link['title'], '.jpg') !== false || strpos($link['title'], '.gif') !== false) {
    $link['title'] = '<img alt="'. $link['description'] .'" title="'. $link['description'] .'" src="'. url($link['title']) .'" />';
    $link['localized_options']['html'] = TRUE;
  }
  return zen_menu_item_link($link); // Let Zen take over from here.
}

Be sure to change the yourtheme in the function to the name of your theme. Also note that this only checks for .png files. If you want to use a jpeg or a gif, you will need to modify the code slightly.

Next, clear the theme registry (CTFC).

Now, you can use image paths instead of text for the image, as seen below:

This tutorial is sponsored by the Save Joseph campaign, a grassroots effort to find a good friend and stellar artist a satisfying, creative job in the next 10 days. I know someone in the Drupal community could use this kind of talent. Learn more about the effort at savejoseph.org.

I have 10 days to find my friend a job, and as part of this effort, I wanted to create an image people could use on their web sites that would dynamically change each day. My first thought was that imagecache would be great for this, but there are two issues that make dynamic text in imagecache tricky:

1. Imagecahce images are... well... cached. Once they're made, they don't get re-made until you flush the cache.
2. Browsers cache images too, so even if the image was refreshed on the server, the client-side image wouldn't change from one day to the next.

I was able to work around these using a couple of interesting techniques. The end result is something that looks like this:

Before you start, you'll need to download the Imagecache Actions module to add the ability to overlay text on an image.

The first step was to create the background image. I created the image in Photoshop with an empty space where the countdown was supposed to go:

Next, I created a new imagecache preset to overlay text. It's down there at the bottom:

I changed the following settings:

• Font size: 9
• X-offset: center
• Y-offset: top+40
• HEX: #FFFFFF

And for the text, I checked the Evaluate text as PHP code box, and used the following code:

$interval = strtotime('August 5, 2010') - time();
$interval = ucwords(format_interval($interval, 2) . ' left');
return $interval;

August 5th is my deadline, and what this code does is use the awesome format_interval function to create a string based on a time difference in seconds. I've set the granularity to 2 so that right now it will say 1 Week, 2 Days but in a few days it will say 6 days, 4 hours.

Next, I uploaded the background picture to the theme directory of my site. Then, I used the imagecache theme function to load up the image with the overlay:

theme('imagecache', 'save_joseph_box', path_to_theme() . '/images/save-joseph.png');

Then, I put this in a page preprocessing function in template.php and assigned it to a variable that I could use in my theme. This is really temporary code so that I can copy the output, so it could have gone anywhere.

function jc_preprocess_page(&$vars, $node) {
  $vars['save_joseph'] = theme('imagecache', 'save_joseph_box', path_to_theme() . '/images/save-joseph.png';
}

Then, I just added a print statement in my page.tpl.php page so I could see the image. Embedding this in the page template temporarily allowed me to play with the imagecache settings until I got the font size and positioning right while seeing a preview:

  <?php print $save_joseph; ?>

Okay, now we have a functioning text overlay that at least is current as of this moment. But, tomorrow, the image will be out of date. So, we need to flush this imagechange to get a re-rendering of the image whenever the text changes. Here's the strategy I used:

1. Set up a hook_cron function
2. In the function, use the same code above to create a textual output of the date.
3. Load a variable that has the last textual output saved (the first time, this will be blank)
4. Check if the new time and the previous time are different
5. If so, clear the iimagecache
6. Save the new text string to the variable we used before

And here's the code to do it:

function common_misc_cron() {
  $interval = strtotime('August 5, 2010') - time();
  $interval = ucwords(format_interval($interval, 2) . ' left');
  $last_time = variable_get('jc_save_time', 0);
  if ($interval != $last_time) {
    imagecache_preset_flush(array('presetid' => 'save_joseph_box'));
    variable_set('jc_save_time', $interval);
  }
}

Now we'll have an up-to-date image all the time. Except that browsers will cache images for a while, so we need a way to make the browser think it's a unique image every time to pull it fresh from the server. The way we do this is by adding a dynamic query string to the end of the image URL that will change randomly on every page load.

My goal was to make it really easy to put this image on a web page, so I needed a way to bundle this dynamic-ness with the image. So, using PHP to generate this string was out of the question. The way do to it was to use JavaScript to add the query string to the src of the image tag:

<script type="text/javascript">document.getElementById("save_joseph").src = 
document.getElementById("save_joseph").src + "?unique=" + new Date().valueOf();</script>

For folks that can't use JavaScript (in Facebook and MySpace, for example), I also provided an image that just had the end date on it, so it could be static. Not as cool, but at least functional:

Finally, I added the script with the HTML image output, copied it, and put in in a blog entry so that people could copy and paste the code to use on their sites.

Up until a month ago, I hadn't had very good experiences managing commenting on Drupal blogs. Even with the hoops that commenters had to go through to write a post (i.e. long and frustratingly ambiguous captchas), tons of spam still got though, and the whole administration process was rather unwieldy. The e-mail notification modules available at the time were a little too in-depth, sending e-mails on new comments as well as new or updated nodes. Also, because of the spam, I'd set comments to only be published on approval, adding additional lag time to the discussion. It was a poor experience, and even I loathed posting comments on my own blog!

In setting up a blog for my Drupal training company, Blue How-To (currently a coming soon page), I decided to get things right. The installation was also going to be core to a multi-site that would include several other sites as well, so I'd be able to leverage the techniques across multiple sites. 

What I wanted in particular was:

• A way to allow anonymous commenting without captchas or moderation
• A simple method of receiving notifications for posts that you've commented on
• A special notification that would go out to administrators with additional information about the comment
• Integration of any comment modules I could find that would improve usability

I scanned through the Drupal modules matching the phrase comments and found a few gems, did the same in Google, and got started.

The modules you'll need

* Spam
* Comment Notify
* Rules
* Ajax Comments
* Comments Bonus API (dependency for Ajax Comments)

Dealing with comment spam

The first step was figuring out how to deal with spam. I was using image captchas from the Captcha module. I had given Mollom a try on other sites, and while it will be my fall back if I end up needing captcah, I've gotten a lot of false positives in the mode where they show a captcha only if your content looks spammy (particularly on groups.drupal.org).

In my searching, I came a across a couple of easy-to-apply techniques using hook_form_alter(). The first is to add a text input that is hidden via CSS on forms so your users don't see it, but any bots will. Using a validation function, you check to see if the input is filled out, and if it is you throw an error and don't submit the form. I was familiar with this technique from way back and even used it in my first custom-made CMS, but it had slipped through the mental cracks.

Here's the code I use for this, which is slightly modified from the original. I was having issues on node forms, so I set it to not display there. I would also suggest changing the name of the input so as to not make this too predictable:

$form['#validate'][] = 'common_misc_honeytrap_check';    
if (strpos($form_id, 'node_form') === false) {
  $form['comment_body_two'] = array(
    '#type' => 'textfield',
    '#weight' => 0,
    '#required' => false,
    '#default_value' => '',
    '#attributes' => array('class' => 'honeypot'),
  );
}

We need to add a validation function to do the final check, and here it is:

function common_misc_honeytrap_check(&$form, &$form_state) {
  if (!empty($form_state['values']['comment_body_two'] ) ) {
    watchdog('notice', 'SPAM attempt at '
.$form['form_id']['#value'].' form', NULL, WATCHDOG_NOTICE);
    form_set_error('comment_body_2', 'Oops, you probably didn\'t mean to do that');
  }
}

So, if there's anything in this particular input, it will trigger the error.

The second thing we can do is set a timer on the form. Using this technique, we will add a hidden input with the current time to the form, and in a validation function make sure that it has taken the user more than a few seconds to fill out the form and throw an error if the submission un-humanly quick:

if ($form_id == 'comment_form') {
  $form['timegate'] = array(
    '#type' => 'value',
    '#title' => 'Timegate',
    '#weight' => 5,
    '#required' => false,
    '#default_value' => time(),
  );
}

I added the validation to the validation function above. Note I've set this to 10 seconds, but you can set it lower or higher.

if (time() < ($form_state['values']['timegate'] + 10 ) ) {
  form_set_error('comment_body_two', 'We KNOW you can\'t be THAT fast.');
}

Because I personally submit some forms faster than 10 seconds, I wrapped a check for an administrator role around both validations so that I wouldn't trigger the errors.

Setting up the spam module

These two techniques seem to work really well to stop automated spam. For spam that is produced by spam sweatshop laborers, I installed the Spam module. I enabled all of the included modules, but after a problem with one post triggering the Bayesian filter by beginning with the word "Thanks", I turned that one off. In the Custom filter, I added a regular expression so that I can add spammy words to as I discover them. Notice the <code>\b</code> around a word that could legitimately be part of some other word:

(bad_word|another_bad_word|\bword_that_could_be_in_some_other_word_but_is_still_bad\b)

So far, I've just had a couple of spam comments that could have been caught with the custom filter. It's a huge improvement, and there's no captcha to get in the way for real users.

Integrating simple notifications 

In a previous iteration of this blog, I used the watcher module, which had some nice features. I did some heavy CSS styling on it to match up the look, but I always kind of felt like there might be a better way.

I started by installing the Notifications module and attempting to chisel down it's many features to particular one I was looking for, which was customizable comment notifications. Ultimately I got the feeling that there had to be something more suited to this particular need. 

I finally landed on the Comment Notify module, which is what I'm using now to provide the nice "Notify me when comments are posted" feature:

The default e-mail that goes out for notifications is pretty heavy, so I trimmed the text a bit. You can find this setting at /admin/settings/comment_notify:

Hi !name,

!commname has commented on: "!node_title"

You can view the comment here: !comment_url

Below is the text of the comment:
!commtext

You can stop receiving emails when someone replies to this post,
by going to !link1

You can set up auto-following feature for all future posts
by creating your own user with a few clicks here !uri/user/register

Thanks!
Chris

So far, I've had a lot more repeat participation on my blog.

A special e-mail notice to administrators with some additional information 

Comment Notify is good, but it would require an administrator to manually sign up for each post. In addition, spam that got added but not published wouldn't send out any notification. As an administrator, I also wanted more information about the user that posted the comment, so I used the Rules module to set up an e-mail that got sent out whenever a comment was created.

In the first step, I set up my rule to be triggered when a new comment was saved:

Next, I set up a condition to check that the user doesn't have the administrator role, to make sure I don't get alerts for my own comments. Then, I added an action to send an e-mail to an arbitrary address:

Below is the text of the e-mail I'm sending out to myself:

Node title: <?php echo $node->title;?>


URL to comment: <?php echo url( 'node/'. $node->nid, array('fragment' => 'comment-'. 
   $comment->cid, 'absolute' => true));?>


User info: <?php echo $comment->name . '  '. $comment->mail . '  '. $comment->homepage;?>


<?php echo $comment->comment; ?>

Improving the usability of comments 

The main tool I found for really making the commenting process a more pleasant experience was the AJAX Comments module. With it, you get a ton of really nice ajax-y features:

• When a user posts a comment, it loads it into the body via AJAX
• You can administer comments via AJAX (to change the author, mark it as spam, etc)
• Delete a comment via AJAX, with a key combination that will allow you to bypass the javascript approval dialog if you need to delete a bunch of comments.

It's really nice, and makes commenting and administering comments very fast. Working with comments is actually a pleasure now instead of a chore due chiefly to this module.

There's a couple of caveats, though:

• AJAX Comments doesn't integrate well with Captcha or Mollum. The initial Captcha will show, but after that, no dice.
• The comment Preview feature doesn't work
• If the comment triggers the spam module, the user will get a not-so-helpful error dialog box instead of a useful inline error.

I finally got a chance to install the Managing News Drupal distribution the other day, and it's pretty slick. The idea behind it is to aggregate news feeds and allow multiple users to collaborate on organizing, commenting and sharing the items with others. After hearing what some people are doing with it, it made me really excited to use it on my own projects.

Below is a walkthrough of installing and working through the default features of Managing News, documented as I went through the process myself.

Installing Managing News

Download the distribution from http://managingnews.com/.

As with any Drupal installation, you'll need to:

• Create a database
• Have a domain or folder in a domain to work with
• Copy the default.settings.php file in /sites/default to a new file called settings.php

Once you're ready to install, go to the folder and select "Managing News" installation profile and click "Save and Continue"

Fill out the database information, click next.

Fill out the user account information, click next.

You should now see the main Managing News screen:

Adding feeds

It sounds like the first think I need is a Feed, so I click on the Feeds button and type my blog's RSS feed into the Feed URL field and click "Preview." This is what I get:

Okay, looks like the preview features doesn't work, so I click Save.

Looks like it imported, here's what I see now:

Sharing

Now it's time to explore some of the features. I'm going to take a look at the Share feature.

Nice, I can share via Twitter, Facebook, MySpace or E-mail. My first thought is that there should be an Evernote link here, too, since I use that as a funnel to the other channels.

When I click the Twitter link, it takes me directly to Twitter, where I have to log in. After I'm logged in, I click the Twitter link again, and Managing News pre-populates my status box, including a shortened URL, nice!

When I click on the Facebook link, it gives me the option of posting a "share" on Facebook, with a couple other options, including connecting up a status update or sending the share as an e-mail. I'm not familiar with the Share feature, so I had to look up. Here's a bit about the Share feature for Facebook developers. Here's what the screen looks like:

When I click on the E-mail link, it populates an e-mail, complete with shortened url, like so:

Okay, this is nice and very straightforward.

When I click the Trash button, the item collapses in a nice, ajax-y fashion.

Editing tags for the posts is nice, too:

• Click the edit button
• Start typing tags, separated with commas
• When you press Enter or click away from the tags, it will save the tags and make them clickable links, which will then direct you to a listing of all items that match that tag.

Getting a map error?

There was an error in the map rendering on the home page which made me want the mapping features even more:

So I added Development Seed's rss feed, figuring that if anyone had geolocation data in their feed it would be them. And sure enough, here's what the map looked like afterwards: 

That's sweet.

Viewing options

Up near the top of the page are some different viewing options, so I thought I should explore those:

When I click on the map, I get a larger rendering of the same map I saw above:

It took me a minute to figure out what the difference was between the News and List view (you can hover over the icons to see what they are), but I think it's just that the List view doesn't have snippets, only titles, so the output is a bit more concise.

Embedding Managing News Widgets

I got pretty excited when I saw the Embed link in the lower right hand corner of the page. When you click that, you get a preview of the widget plus embed code that you can then copy and paste into a web page. You can embed a preview map by going to the map view and clicking Embed, or a list view by going to News or List and clicking Embed. Here's what it looks like when you click on the Embed ink in the News view.

I tested it out by creating a dummy, pure HTML page and pasting the code in. It works! Here's what the Map preview looks like on an HTML page with nothing else on it:

So, this could be a very cool way to let other people share your aggregations.

Map layers

In the upper-right corner of the Map view, there's a cute little button that looks like a stack of papers. If you click that, you'll get some options on what layers you'd like to see on the map:

The OSM Maplink layer shows country names, and when you zoom in you can see roads and other borders as well:

In the lower right-hand corner, next to the embed options, is an account link. If you click that, you'll see some settings for your account:

Searching and saving searches

The Search view leverages Drupal's search infrastructure to search, so the first time you go to the search page, you probably won't be able to see much. Drupal's search compiles the index on cron runs, so eventually you'd want to set up cron to run on your site. However, you should be able to update the index manually by clicking the Update now link in the search index box:

I clicked the button twice and got the follow error, but that's because only one instance of cron can run at a time:

When I do a search for Great, I see a couple nice things. First, the instances of the text are highlighted, and second there is a Save this search button:

Clicking the button adds the search to the side Saved searches box:

Creating a channel

Okay, on to Channels. When I click the Channels link, here's what I get:

I click on the Example channel item, and it gives me some instructions:

I click edit, and add the test tag to the channel, which I've already added to a couple of articles. I run into a funny little visual error, where the submit buttons are hidden, but if I keep scrolling down they re-appear:

When I've submitted the form, I get a listing that renders pretty much the same as the Search or News listing, but contains matches for the tags I've set.

Between the Search and Channel features, I felt like there was some common ground. If you could do a search based on 1) keywords, 2) tags and 3) specific feeds, the channels would be the saved searches.

Subscribing to RSS feeds

Managing News generates RSS feeds for any News, Tags, Search or Channels. Just navigate to the page you'd want to subscribe to and click the RSS Feed button:

Printing

Clicking the Print button above lets you print a nicely formatted list of feeds so you can read them later on:

This looks pretty slick, but would be more practical to me if could print out the entire body of the post.

Help

Clicking the ? icon in the upper right-hand corner of the screen will give you contextual help. If you click it on the home page, you'll get something like:

The is some basic help for all of the main tabs above, but none for saved searches or tags.

Additional notes

Nice input descriptions

I really like the conditional display of help text for inputs. It keeps the clutter way down. Here's an example:

The help text only shows when you are filling out or hovering over an input. Nice! I'd like to know if there's a module for that, or if it's theme based.

Modules used

To find the modules used by Managing News, you can go to /profiles/managingnews/. There are three folders there, and here are the contents of each:

contrib:

custom:

features:

Note: If you want to really bend this block to your will, you might need to learn some module building skills. Check out Build a Module.com for clean video tutorials on modifying the output of a page, theming and lots more.

Instructions

Download and install the Taxonomy Menu module.

Download and install the Menu Block module.

Optionally create a new parent menu where all the taxonomy-based menus will reside by going to /admin/build/menu/add. I named mine Taxonomy.

Go to /admin/content/taxonomy and click the edit vocabulary link next to your tag vocabulary

Scroll down to the Taxonomy menu fieldset

Select your new menu for the Menu Location

I use the following options:

Most of the other options are there so that you can customize the paths to the taxonomy terms if you use Views, for example.

Click Save.

Go to the block administration page at /admin/build/block and click the Add menu block tab.

Start working your way down the form. Here's what I used for the Parent item settings:

I changed the custom visibility settings:

Then click the Save block button.

You'll see the menu in the disabled section of the page, and it will look something like this:

Set where you want the block to display, and then you've got your block! Here's what mine looks like:

If you want to really bend this block to your will, you might need to learn some module building skills. Check out Build a Module.com for clean video tutorials on modifying the output of a page, theming and lots more.

My use case was that I had a super long blog entry that I didn't want to hog my blog's front page. So I needed to shorten it down to a certain pixel height, and add a link that would expand it completely.

First, we need a couple of jQuery bits:

  // Go through each item in the main blog page and shorten if bigger than 1500px
  $('.view-blog .views-row').each(function (i) {
    var div_height = $(this).height();
    if (div_height > 1500) {
      $(this).height(1500);
      $(this).append('<input type="hidden" class="item-height" value="' + div_height + '" />');
      var id = 'expando-num-' + i;
      $(this).attr('id', id);
      $(this).after('<a href="' + id + '" class="expando-div">This is a long blog post, click here to view the rest</a>');
    }
  });
  
  // Add the 'click to expand' behavior to the links
  $('.expando-div').click(function () {
    $(this).remove();
    var $div = $('#' + $(this).attr('href'));
    var div_height = $div.find('.item-height').val();
    $div.animate({height:div_height}, 1000);
    return false;
  });

I added this code inside of a function called Drupal.behaviors.custom_misc(). Click here to read a bit more about Drupal behaviors.

Note that your selectors might be different. I'm using a Drupal view to display the blog, so I can rely on certain selectors.

Next, we need to add a couple of styles to our CSS (or LESS) file:

.view-blog .views-row {
  overflow:hidden;
}
.expando-div {
  display:block;
  margin-bottom:30px;
  background:#185686;
  color:white;
  text-decoration:none;
  padding:5px;
}

The only really necessary part there is the overflow:hidden, which makes it so the hidden content doesn't overlap on other stuff.

My result (with a little more CSS styling) looks like this:

I decided to jump into Views Alpha 3 because I wanted to explore the Views Infinite Scroll module, and I have a friend using it on a large production site without any problems. Here are some notes from the upgrade experience.
No update.php run was required - nice.

I did get a WSOD on the /admin/build/views page, but I CTFC and all was good.

Here's the new interface, which looks a lot like the old one:

On one of my side blocks, a pager suddenly appeared, so I had to change the pagination settings here:

This is cool, the number of items and pagination settings have merged into a single setting.

I also started to notice that the configuration blocks are ordered a bit differently. There are basic and advanced settings panes now, and the new ordering does seem to make more sense, though it's hard to tell if it would make more sense to someone new to Views.

Ah, I've been wanting this feature, the ability to re-order the displays.

When setting pagination options, you can expose inputs for the number to show and the offset. Even though I think this is usually clutter, it's a common request from clients to have the ability to set the number displayed.

I installed the Views Infinite Scroll module (and the associated jQuery plugin, after some wheel spinning), and selected it as the pager option for my view. At that point, it said that it was incompatible with Ajax, which makes the search box above my view less responsive. So, I'll have to leave it to the default Views pager. I also kept getting this error, even after turning Ajax off on the view:

My friend also suggested that I upgrade Views Bulk Operations to the latest 6-3 dev release, which at the moment is here. No problems there, and it also didn't require an update via update.php.