Login / Create an Account
If you don't like something change it; if you can't change it, change the way you think about it. ~Mary Engelbreit


Hi, my name is Steve Todd [more about me] and you've reached my website. Here, I plan to provide details regarding some of my development interests.  It will include a lot of "this is how I actually did it" items, as I've found these very useful.  The web is full of folks with loud opinions about how things "should" be done, but I'll go with actual experience every time.

Below, I list some of the sites I've created recently. All of them have a few things in common:

  • Drupal-6-based (with CCK, Views, TinyTinyMCE, IMCE, Backup/Migrate, Taxonomy....)
  • Selected themes should have Suckerfish or CSS-based dropdown menus
  • Configured for simple maintenance and addition of content pages and menus by non-technical content editors.
  • Automated daily backup of Drupal content and files using Backup/Migrate and Backup/Migrate Files, pointed to a separate server.
  • Carefully configured TinyTinyMCE and IMCE, plus my custom ´╗┐´╗┐Image_Caption_Lightbox module, to greatly simplify the insertion of images complete with auto-captions and Lightbox feature.  (such as the thumbnails on this site).  The user uploads an image using the wizard, checking the box for desired thumbnail size, then selects the correct class and the rest is automatic.
  • "Structural" items (themes, modules, custom code) are maintained by myself, lowering the entry point for the admins and content editors.
  • I pay careful attention to making these sites search engine friendly (SEO) by using PathAuto, XMLSiteMap, and by using Google's webmaster tools to verify Google "likes" the site, and to find searches that do NOT result in visits.
  • I use Google Analytics extensively to analyze the actual hits and traffic patterns (using the Google Analytics module).
  • I tweak the selected themes using a site and theme-specific custom module, which loads a custom stylesheet to override CSS as needed. For more about this, see my how-to page with actual code to use as an example.
  • I create a few key graphics (logo, buttons, etc.) using The Gimp.  I am not an artist, but I am able to recreate things seen on other sites effectively.
  • All colors on a site should work "together".  Here is a very useful site with color tools and theory.
  • When possible, I like to get a "real" artist to create a banner for a site.  I then pick colors from that banner to use throughout.
To setup a new Drupal site, I have a standard "template" site that I backup, then restore to the new site.  I then adjust the site name and setup a new theme and I'm in business.  I copy the custom sitehelper module and its associated override CSS and enable for the new site.
The template features a "Content Editor" role that allows those users to create and maintain all content pages, menus and blocks, without getting them involved in the "structure" of the site.  I create a required "Site Section" taxonomy and create a view for each section, that forms the primary menu.  The users just assign the appropriate category and the pages show up in the view.  Really simple but effective.
If you'd like more details, just contact me using the link at the bottom of this page.
If you're new to Drupal, here are some thoughts on getting started.
Note: this site features the Plutado Green theme, and is currently hosted on a "free tier" Amazon EC2 instance, created from a Bitnami EBS-backed image.

My family tree

I recently became very interested in learning about, and then sharing, information about my family's history.  I found a great research tool in Ancestry.com, and find the monthly fee a worthwhile investment.  In particular, their indexes (with images) over census records, death records, military records and hints from other member trees are extremely useful.  I also use their search over the FindAGrave.com database. Find A Grave is an ad-supported site where data and pictures of cemeteries and markers are crowd-sourced.

However, to view the details of my Ancestry.com tree, every visitor must also have a paid subscription, so it does not work for simple sharing of the information with friends and family.  I found the open source project webtrees to be an excellent tool for displaying my tree.  My tree can be found at webtrees.mstevetodd.com.  I use (and really like) the xeneo add-on theme.

Exporting from Ancestry.com into webtrees

Ancestry.com has a GEDCOM export, and webtrees has a GEDCOM import, so I planned to use Ancestry.com for research and maintaining my tree, then export+import into webtrees when needed. Unfortunately, the Ancestry.com export strips the rich content (images, links, etc.) and exports only links back to Ancestry.com pages.  Useless.  Another researcher/programmer pointed out that Family Tree Maker (a software package sold by Ancestry.com) does copy the images to a local PC.  The export from FTM includes local links to those images.

So, I wrote some PHP to process the FTM export and combine it with the links from the Ancestry.com export.  This code also creates direct links to the FindAGrave pages, normalizes common place names, categorizes images, and several other "cleanup" items to improve the generated GEDCOM.  I then import the generated GEDCOM into my webtrees site and copy any new images from my PC to my site.

webtrees enhancements

webtrees is a great package, but not perfect for my specific needs.  Since it is open source, I can modify and extend it to work better with my tree.  Here are the enhancements I've made (so far):

  1. photo piles - I love pictures, so my site has plenty (and will have lots more).  I wrote a new jQuery-based module for webtrees that I call PhotoPiles, as a replacement for the provided image gallery.  It features a more "fun" interface where the user can sort through "piles" of images.  See example [here].  
    NOTE - temporarily disabled after webtrees update.
  2. thumbnail generator - webtrees attempts to create thumbnails when needed, but it doesn't handle large images well, returning a very unfriendly blank page on failure.  After importing an updated GEDCOM, I run a PHP script to generate any new thumbnails needed, using a more memory-friendly method.
  3. relationship to me - One of my favorite features of my Ancestry.com site is the ability to see how each person is related to me (the signed-in user).  webtrees has the basic functionality to calculate/view a relationship, but I have now added the relationship name to individual's pages and to search lists.  For example, I can enter a cemetery name and see how I'm related to everyone there.  My tool uses ajax and database caching to offload the time-consuming calculation.  I also added a "batch" update (again using ajax) to pre-calculate the relationship for each user/individual combination.
  4. links column - I added a column to the individual search lists with any external links for that individual.  In my tree, that means findagrave and ancestry links are a single click from the list.  This is very useful when adding to or cleaning up the data.
  5. tweaks to xeneo theme - I modified the css for the xeneo theme slightly to provide a "thinner" header, leaving more room for the site content.  I also increased the size of the Search box to make it a bit more visible.
    NOTE: the base xeneo has not yet been upgraded to match webtrees 1,7,x, so this theme is inactive for now.  Using JustCarmen's JustLight theme.

To-do list

  1. photo piles - I need to improve the navigation from the selected image to the full-size image and details.  This may also require replacing the webtrees image viewer.
  2. photo piles block - I plan to create a new "block" for use on the site's main page, to replace the current slideshow.  It should only display "photos" from the site, not documents or headstones.  (some categorization work to do there)
  3. image links to picasaweb - I'm a fan of Google's Picasa image editing software and their associated Picasa Web Albums.  Their face-recognition software works well, allowing me to attach names to pictures quickly and easily.  I use these albums to collect and share photos of my family.  See example [here].  My plan is to programmatically link each of my Picasaweb pictures with the corresponding individual(s) in my tree.
  4. external image thumbnails - For #2 to work well, I need to enhance webtrees to support local thumbnails for externally-linked images, and then pre-fetch thumbnails as needed.


From the DogTagArt.com About page:

Dog Tag Art is a website for pet lovers, artists, and fans to show off their creativity with cool ID tags and pet photos. We print user-submitted art on classy, durable ID tags. We're making pets look cool with functional art. It's fun. Will you join us?

My participation in this site is limited to a couple of specific areas (see below).  I did not design the site nor do I maintain the graphics or content.  The site is a highly-customized Drupal 6 site with UberCart, plus a number of custom modules.  The coolest thing about this site is it uses "crowd-sourced" artwork as the basis for all of their products.

Custom Tag Creator

My first task for DogTagArt was to simplify and improve the upload process, by creating a new Custom Tag Creator function.  This tool allows a customer to upload their own artwork or photos to the site, then zoom, position and crop the image to fit the tag shape.  It includes a real-time viewer so the user can immediately see what the end result will look like.

Prior to writing the Custom Tag Creator, potential artwork contributors had to create and submit 2 carefully-sized and shaped images based on a specific .PSD template.  This had limited the target audience significantly, so this new tool greatly expanded the business.

High Performance Drupal site

My second task was to address performance issues as the site grew by moving the site from a normal Drupal install on Dreamhost VPS to a Pantheon Mercury 1.0 image running on Amazon's EC2 "cloud".  This image features the Pressflow Drupal 6 distribution with a Varnish 3.0 front end serving as a reverse proxy.  This combination provides for spectacular speed (for anonymous users), plus the awesome flexibility and configurability of Drupal's database-driven content.

However, to get the full benefit of Varnish, the site MUST be built carefully, especially regarding sessions and cookies in general.  The original DogTagArt.com did not adhere to these practices, so I had to work to remove these after-the-fact.  I go into details of this process here.

I also installed Munin and configured key charts so we could analyze the actual performance history of the DogTagArt.com site.  This is an invaluable tool to insure you are working on the proper performance issues, and to evaluate the effectiveness of each change.

Riegel Linen

This site is another of Mount Vernon's divisions.  It is currently a "brochure" site presenting full-color images of their varied product line, together with detailed descriptions and useful pages for their customers' use.  The site is designed to help one of our product designers quickly and easily upload the images and text that define a product, in the same workflow she uses to produce high quality print catalogs using Adobe InDesign.

I've created a custom CCK content type for the product details, with fields like primary image, secondary image, subtitle, etc.  I used FileField for each of the image elements.  

Since the product details pages are the key to the site, I wanted full control of its display, including overlapping the images and great css shadows.  I used Content Template to manipulate the output, setting css classes for most everything written.  I highly recommend Content Template, together with a custom css page, for quick and easy adjustment of output.

I then created one View with a Taxonomy argument.  This allowed me to easily link to views for each product category but only create/maintain a single view.  These views were attached to the primary menu, with 3-level dropdowns for the product pages.  I also used Views Slideshow to create a page-flipper at the top of each of the teaser lists.

This site uses a great theme called Magazeen.  Magazeen has a ton of areas for adding blocks, plus the 3-level dropdown (superfish) menu.

Northgate Baptist Church

Site for my church.  I've successfully handed off most of the content maintenance to the staff members responsbile for that area, either by directly editing the content, or by placing documents in folders which are then automatically added to the site (see below).

Key features:

  • Two columns of teasers on front page to maximize the number that can be seen at once.
  • Picture Gallery page with custom PHP interface to PicasaWeb folders to provide auto-thumbnail links to the folders while leaving all pictures in PicasaWeb, where church members can easily upload and share.
  • Custom PHP to retrieve and reformat our church calendar sidebar from our Google calendar.  This was needed to condense the list to fit in a much smaller space.  This occurs on-demand when someone hits the Northgate page.  [TODO: publish this code] 
  • Newsletter page with custom PHP so church secretary just drops properly-named .pdfs onto a desktop shortcut (FTP link) and they are automatically discovered and listed on the page.
  • Hosted on DreamHost, since they provide lots of disk space and free hosting for non-profits.  Of course, we can't find our IRS 501(c)3 letter yet, so we're still paying for it.  :)
  • Media page (custom PHP and javascript) that features an embedded mediaplayer for one-click selection of audio or video to play.  There are also direct links to each week's scripture passage (using BibleGateway.com).  All links and buttons are built by the PHP.  I just enter the new title and scripture passage each week and the rest is automatic.  [TODO: publish this code] 
  • Pixture Reloaded theme but I added clickable "buttons" to accent the node headers (using css only).

Engine Driver - JMRI Throttle for your Android phone

This site supports my Android application, Engine Driver [View on Android Market].  This is a native Android app which runs as a network "client" to a JMRI server, utilizing multiple threads to keep UI responsive while handling communications in background.  It communicates via TCP/IP sockets, and uses the Bonjour protocol to "discover" JMRI servers.  Runs on all versions, from 1.6 up to the latest "pad" versions.  Full source is available on sourceforge.net [view source].

This app provides full control of a model railroad, multiple locos, powered routes and turnouts etc.  It serves as a fully-featured replacement for expensive proprietary hardware throttles (both wired and wireless).

Piedmont 'N Southern Model Railroad Club

Home page of the N Scale oriented Piedmont 'N Southern Model Railroad Club. This site features photo galleries, layout diagrams and information about upcoming shows.  Plans are to include how-to articles, and pages for members to showcase their home layout or modules.

Since much of the site is devoted to photos, I spent some time researching various methods of solving two somewhat related problems, how to best display "collections" of pictures, and how to best get those pictures to the site (by non-geek members).

I created a CCK content type called "Photo", which contains a single FileField for an image.  I create a new taxonomy item for each "gallery", or group of pictures.  I then use ImageField Import to import a batch of photos, setting the taxonomy and any individual descriptions, etc. at that time.  Each photo is a separate node.  Anywhere I want to show a photo, I use ImageCache to size the output dynamically.

Finally, I created two views over the Photo content type, each with an argument-based filter on taxonomy.  One of the views was setup as a Views Slideshow, the other in columns for a photo gallery.  I used Insert View as a quick and easy way to drop copies of the slideshow into various pages, passing the appropriate argument.  The slideshow view was configured to link to the slideshow when clicked (for the same taxonomy).  The gallery was setup so clicking on a picture opened that picture in Lightbox2.  This arrangement provided a LOT of functionality with just 2 views.  To add a new gallery and slideshow, I just create a taxonomy entry and import the photos.

This site uses a great new theme called A Cold Day, with a new background and tweaks using my custom css module.

Mount Vernon Mills

This is the home page for Mount Vernon Mills, where I am VP/CIO (and part-time web designer/developer).  This site features extensive use of my custom Drupal module for simplifying Lightbox links and captioning for images.  [TODO: post module code]

It also features numerous graphics I created for the site using the Gimp, an excellent open-source image editing program.  The buttons were generated using this script.  The theme is the excellent Zero Point.

SC Occupational Therapy Association

Membership-oriented site that features:

  • Online WebForms and payment for placing job listings, continuing education activities, conferences, and membership renewals.
  • Use of PayPal site for credit card payments, and UberCart module for handling the orders.
  • Custom-written Continuing Education tracker where members can store hours and details of their CEU progress.  Includes summary and notifications when CEU hours need to be updated.
  • Slightly customized Mass Contact email-sending module allows admin to send emails to various groups (officers, all members, members needing renewal)
  • Pixture Reloaded theme (key users liked the rounded corners).
  • Secured (members-only) content as well as public content.  (using NodeAccess)  Most of site is visible only to members.
  • Numerous members-only forums (using Advanced Forums)

UberCart has a ton of great functionality, but I found out it was really overkill for this site.  For the latest offerings, I'm now using PayPal's Pay Now button wizard for each product, passing along enough info to identify the purchase from PayPal's notification email they send back to the merchant.  Much simpler.

Mount Vernon Human Resources

The Mount Vernon Human Resources site is an intranet site with the content fully controlled by members of that department.  I used my template, then added NodeAccess to allow tighter security of individual pages.  The HR users utilize the attachments functionality of Drupal extensively for listing forms, manuals, etc.

The theme is Summertime.