QR Codes Save Cats

Well, it finally happened. I've been building websites for nearly twenty years now. I thought I really got past that period when it would make even the slightest bit of sense.

I made a webpage for my cat. Or rather, a webpage for each of my two cats: Bruce and Cathy.

I'm not concerned about maintaining my cats' social presence online. What I am concerned about is that they escape frequently. One time, Cathy was missing for four days. The purpose of this project was to create a low-cost solution for pet tracking, similar to commercial services like PetHub and FurCode.

To build this project, I used my standard Swiss Army knife of website tools, Drupal, along with some simple plastic ID tags from the neighbourhood pet store.

I created a custom subtheme based on the Bootstrap 3 theme, a project that includes an example starter subtheme. Then I created a custom content type called pet, which had a photo image field accepting multiple field entries. I installed and activated as much as possible using drush.

As for the Drupal 7 modules, I used many common ones: views, token, webform, pathauto, imce, ckeditor, entity, date, ctools, jquery update, captcha and hiddencaptcha. I also added a few others, such as Google Analytics and xmlsitemap. I created content for each cat and uploaded two images each. I then created a pretty basic webform and set it to be available as a block, which is visible in the footer for the pet content type.

In order to get the images displaying nice and responsively, I added a short line of code to my template.php file. What this does is adds the default bootstrap responsive class to all images. 

function themename_preprocess_image_style(&$vars) {
   $vars['attributes']['class'][] = 'img-responsive';
}

Another problem I encountered was the default layout used by the webform module. I found another snippet online that was helpful in wrapping form-group classes around the webform elements, and adding responsive classes to the fields. First I created a webform-form.tpl.php file and added this code.

foreach($form['submitted'] as $key=>$value){
    if(substr($key, 0, 1)<>'#'){
        $prefix = '<div class="form-group form-group-' . $key . '">';
        $prefix .= '<label for="edit-submitted-'.$key.'" class="col-sm-6 col-md-2 control-label text-right">'.$value['#title'].'</label>';
        $prefix .= '<div class="col-sm-6 col-md-10 control-label">';

        $suffix = '</div></div>';


        $form['submitted'][$key]['#prefix'] = $prefix;
        $form['submitted'][$key]['#suffix'] = $suffix;
        unset($form['submitted'][$key]['#title']);
    }
}

print drupal_render($form['submitted']);
print drupal_render_children($form);
To help with generating the QR codes, I also installed the Google QR Code module. I restricted the QR code block display to pets/* and limited to the administrator role. Using the live site, I saved the QR code image for each cat. Once I was done, I deactivated the block but it's still there for when I need it in the future.

I measured the tags I purchased at 7/8". I then created two images in GIMP that were 0.875" x 0.875". I copied the QR code image and scaled it down to 0.65". I then placed the cat's name above the code and my phone number below. I created the two images, one for each cat.

To help lay out the two images as circles, I created a new Scribus document. Scribus is a desktop publishing application. Because of my experience in desktop publishing, I knew I could quickly create two circles with a really thin outline or "stroke", insert the QR code image and print it out. This solution worked well for me because I've had experience with older desktop publishing software. A simpler alternative would be to print them out right from GIMP and then trace the shape using a nickel, which is approximately the same diametre.

And that was it! I had a tag for each cat, a customizable webpage for each cat, and a little bit of piece of mind. When a cat loses a tag, it's only a small cost and effort to replace it.