drupal

Archdiocese of Saint Louis redesigns website (still running Drupal)

I used to work in the Archdiocese of St. Louis as the director of Web Development, so archstl.org (and other online Archdiocesan properties) are near and dear to my heart. I spent countless hours merging some 49 Joomla websites into the Drupal install that (still) runs archstl.org, and besides a bunch of database heavy lifting that was outsourced, I bled over almost every feature on the site (I've chronicled many experiences on this site in the past).

Archdiocese of St. Louis archstl.org redesign - blue

So, I'm very happy to see that the Archdiocese has continued to develop and improve the site. This new design has a more modern and 'edgy' feel, and is the first redesign to involve more theming and work on the 'View' of the website rather than a complete rearchitecting of the database, filesystem, etc.—which is awesome!

I wish other Catholic organizations I've worked with were in the position of not having to scrap their website and redesign from scratch every few years... I've seen too many projects where an organization will spend thousands, maybe hundreds of thousands, and end up with a site that's not very future-proof, and will again be scrapped and redesigned for much more $$$ in a few years. Don't be that organization :)

Mass and Sacrament Times on the Archdiocese of St. Louis' Website

One question I'm often asked by many other diocesan web development teams/individuals is how we put together our online Mass Time search (also used for searching adoration and reconciliation times). We also get questions about how we do our online mapping—but I've already covered that (see: Beautiful, Easy Maps in Drupal using Views and Mapstraction).

Mass Times Search Interface
The Archdiocesan Mass Times search interface (click to enlarge)

We already have a database provided by the Archdiocesan IT department (they maintain it with the help of our diocesan Parish Support staff, and parish secretaries who can update their own schedules and information), so we needed to do the following on the web:

  • Import all the Sacrament time information and attach it to a parish node (so times/days could be affiliated with parishes).
  • Display the time information on parish node pages, in a meaningful way.
  • Allow users to search by Sacrament times, showing parishes on a map, and showing the Sacrament times in a list under the map.

I'll cover each of these important aspects of our website's functionality below.

Preliminary note: much of this code was provided originally by the great folks at Palantir, who helped us set up this and many other features on the Archdiocesan website...

Importing time information, attaching it to Parish nodes

The first step in the process is importing some 3,000+ parish event nodes (which contain data for each 'event' - the event time, the event type (Mass/Reconciliation/Adoration), whether the event is a 'Normal Service' or a special kind of Mass, the location of the event (often in a side chapel or somewhere else), the event day, and the reference for the parish to which the event is attached.

Our site uses the Migrate module to import all the data, and we have the module set up to import all the events first, then import the Parishes, attaching the events to parishes (through custom code) using a node reference. Continue Reading »

Beautiful, Easy Maps in Drupal using Views and Mapstraction

I've been asked about the Archdiocese of St. Louis's online parish search mapping functionality enough times that I finally made a quick video walkthrough of how it was done. The video below explains it all—basically, we use the Location module to attach addresses to nodes and geocode (get lat/lon) the addresses, and we use Views + Mapstraction to make the spiffy maps all over the site.

The functionality was originally set up by the kind folks at Palantir, and tweaked a bit over time by me to make what you see today.

You can watch the video in HD on Vimeo, to see fine details. (Recorded with iShowU HD).

Drupal 7 Released - Have You Tried Drupal Lately?

Get Started with Drupal 7

Today, January 5, Drupal version 7.0 was released (download Drupal here). Drupal 7 release parties will be held worldwide on January 7 (which also happens to be my birthday - yay!).

I'll be posting my experiences in upgrading to and extending Drupal 7 both here and on my blog at Midwestern Mac, LLC (see D7 stories).

Congratulations to the team of almost 1,000 developers who helped make Drupal 7 a reality, and congratulations to Dries Buytaert, the founder of Drupal, and webchick, the person who shepherded (and continues herding) the community as the Drupal 7 core maintainer!

This website is still running on Drupal 6 (on a multi-site installation with about 5 other sites), but I'm slowly beginning the process of redesigning and upgrading the rest of my sites (notably, so far, Midwestern Mac, LLC) to Drupal 7. The Archdiocesan website and St. Louis Review will take a bit longer, since there's a lot of custom code that needs to be refactored.

If you run a website, have you checked out Drupal before? It's a lot more extensible (in my experience) than Joomla or Wordpress, the two other top contenders. If it's good enough for large sites like the White House and Examiner.com, it's good enough for you ;-)

New minimalist theme released for Drupal 7 - MM

About a year-and-a-half after releasing my first contributed theme for Drupal, Airy Blue, I have finished and release my second contributed theme, MM - A Minimalist Theme.

Minimalist Theme Screenshot

MM is my first HTML5 theme, and my first for Drupal 7 (which, by the way, is awesome!). I have been working on refreshing my LLC website, Midwestern Mac, for the past few months since I scrapped my first hacked-together theme from about 2.5 years ago, and I finally decided to take the plunge and go Drupal 7 for the redesign.

MM is based on Boron, an HTML5 base theme that is still in beta for Drupal 7 (thus, I can't have a final release of my subtheme until Boron is final as well).

The theme has a few nice features:

  • No images whatsoever (cuts down on page load times, since there are less resources to load).
  • HTML5 markup (tested in IE7-9, FF 3+, Safari 4+, Chrome)
  • Progressive enhancement - we're using box-shadow, border radius, and some other CSS3 elements that only work in newer browsers at this point.

I figured I'd like to help get more themes on the docket for Drupal 7's release—right now there are very few, and I think it would be nice if people downloading D7 and wanting to tinker could have more than two or three themes to play with.

Plus, it's just a nice thing to do for an open source project that has given me a career.

Online Calendaring: FullCalendar.js

In my always-continuing quest to find the perfect online calendar display/management solution, I have found the next level of calendar display/management bliss.

Previously, I was pinning all my hopes on Drupal's very robust, but often complex and confusing, Calendar.module (in use by almost 50,000 websites—and for good reason—it's extremely adaptable). The module provides many different displays, and gives you the ability to link directly to a specific day/month/week... but it (a) is relatively slow to allow switching from month to month, (b) requires a rather complex view, with arguments, which can be confusing for first-time users, and (c) it takes patience to theme it well.

I love the Calendar module, and I still use it on a few sites where necessary, but I've found a new contender that has nothing to do but improve; that condender is the FullCalendar module, which is based on the great fullcalendar.js jQuery-based calendar library by Adam Shaw.

Fullcalendar Display
This is IE. It's easy enough, though, to add better styling to a fullcalendar.

FullCalendar is simply a views display that takes a list of event nodes (as long as your node has a date/time attached, it will work), and displays them in a beautiful calendar display that works across all modern browsers, and even most mobile browsers (I've tested Android, iOS 4, FF, Chrome, Safari, and IE so far).

I had a little trouble getting the calendar to display in IE6/7, but I supplied a quick patch to fix that issue.

One thing I have yet to test is the performance of fullcalendar when displaying large batches of calendar items (in this case, calendar.module might be better—if you need to show thousands of events on a calendar from many years prior). The biggest calendar I have right now displays about 200 items. As time goes on, I could either simply let the list build to the point where fullcalendar slows a bit, or limit the date range so events from only the past few months show.

Embedding a 'Related Content' block in your Drupal nodes

Many of my favorite websites offer a nice little feature, immediately following the body of the page, that highlights 3-5 "possibly related" stories or blog posts. I wanted to do this on OSC and some other sites, but found that it's difficult to add regions inside of nodes—the closest I could get with the default theme/block behavior is to have it appear after comment section, which is too far down the page to be relevant.

I decided to use the Featured Content module to create my blocks, as it offers a good amount of customization as to what kind of algorithms it uses to find related nodes... performance considerations aside. There are other ways to go about creating lists of related nodes, but this was quick and easy.

Adapting a solution I found here, I created a simple function inside my template.php file that allowed me to print a block from inside my node.tpl.php template.

Inside template.php:

<?php
/**
* Helper function for retrieving block code for insertion into templates.
*
* @see http://drupal.org/node/753516#comment-2769068
*/
function osc_block_retrieve($module, $delta) {
 
$block = (object) module_invoke($module, 'block', 'view', $delta);
 
$block->module = $module;
 
$block->delta = $delta;
  return
theme('block', $block);
}
?>

Inside node.tpl.php:

<?php
 
<?php if ($page): ?>

    <div class="block-in-node">
      <?php print osc_block_retrieve('featured_content', '1'); ?>
    </div>
  <?php endif; ?>
?>

I chose to rank related nodes first by similar taxonomy terms, then by how many views the node received (I'm using the statistics module on this site).

Alternatively, you could do one of the following to accomplish the same kind of thing:

  • Set up a region inside your nodes, in the node.tpl.php file. This seems to be a little burdensome, though, unless you're planning on doing many different things inside said region(s).
  • Use the Panels module to add blocks inside of nodes, or in a different kind of page layout.

Create a Podcast, Quick n' Easy, using Drupal with Views + FileField

Podcast LogoAfter having created a few different podcasts on different Drupal sites for different purposes, using a variety of methods, I can speak with a little authority on which methods are the best, easiest, etc. There is an Audio module, and an iTunes module, which help with more advanced podcasting needs... but most people just want a podcast which will allow visitors to either listen while on the website, or to be able to subscribe to the podcast in iTunes or another media player.

If your needs are relatively simple, it's quite easy to get a podcast up and running on your Drupal website:

Step 1 - Make a Podcast-ready Content Type

In one of your content types, add a filefield that allows the uploading of MP3 and/or M4A files, and create a podcast episode or two. Make sure you set the filefield's display to 'Generic Files' for the RSS display settings (at admin/content/node-type/[your-node-type]/display/rss).

(You can also use something like SWF Tools to display a player for the file for regular ("Basic") node views—so people can play the audio file without having to open your feed in iTunes. Otherwise files will just display as links to the downloadable file).

Step 2 - Make a View with a Page and Feed Display

Now, create a view, and in that view, create a list of all your podcast nodes (nodes that have the MP3/M4A files attached) on a Page display, then create a Feed display that shows a few episodes, and attach that Feed display to the Page display.

Step 3 - Avoid a Hassle by Burning Your Feed

FeedBurner LogoMany would recommend trying to get the feed working properly with iTunes by using the aforementioned iTunes module or some other hackery, but there's a much easier option: FeedBurner. You need to set up an account with FeedBurner. Then use FeedBurner to 'burn' one of your feeds—be sure to check the 'I am a podcaster!' checkbox. Fill out all the relevant details, and then look at what your FeedBurner URL is (mine, for example, is http://feeds.feedburner.com/reviewcast-podcast - this is for the ReviewCast).

Install the FeedBurner module on your Drupal site, and then go to its settings page. Click the 'Burn feed' tab to add your new feed - you'll need to know the path to the Feed display that you configured in your View earlier, and the FeedBurner URL (just use the part that's bolded above).

Step 4 - Profit?

Now, clear all your caches (in case the feed you had in your views was cached already), and you should have a podcast page which not only allows site visitors to play files directly, but also offers iTunes (or other service) subscriptions. You can submit your FeedBurner URL to iTunes' Podcast directory if you'd like to be included.

Nice!

How to Build a Drupal Module - for Beginners

DrupliconAt a recent St. Louis area Drupal meetup (details here), I presented a quick session on how to build a drupal module, geared towards beginning Drupal developers (I don't consider myself too advanced, but I have found that my experiences can often help others).

I have attached to this post the custom module (a .zip) file that I included for examples in the presentation, and I also uploaded the slideshow (quick and easy - just 12 slides!) to slideshare. I've embedded the slideshow below:

Twitter Module on OSC Updated to use OAuth

Post to Twitter

Since the beginning of this website, we've had a Twitter page that shows all tweets from Open Source Catholic members who choose to allow OSC to show their tweets.

In the past, we used a simple authentication system that worked great before Twitter switched to using OAuth only... after dragging our feet for a while, we finally took the time to get OAuth and Twitter working correctly on this site again.

This means that you can add your twitter account to your OSC account, by simply visiting your 'My account' page, clicking 'Edit,' then clicking on 'Twitter accounts.' Click the 'Add account' button to add your Twitter account, and voila! Your tweets will start showing up in the global Twitter page.

Also, you can choose to post any blog entry on this site to the @oscatholic Twitter account if you so choose—use this feature with discretion, though, as it's liable to be taken away if it's abused!

You can also authenticate to this site using Twitter, although that feature is in beta for now.

Syndicate content