Bruce The Cat

I have always loved cats. I come from a family of cat people. I've drawn cartoons about cats, I've written stories about cats, I've been obsessed with cats. 

My friend and ex-roommate Jeremy taught me an important lesson about cats. The best ones are giant, orange and long-haired, like his cat Colby Cheese. Like all of our cats, Bruce came from my mother-in-law's place on the outskirts of town. Even these days, many people unfortunately think it is acceptable to drop cats and kittens out in the country.

Meet Bruce

Bruce decided to take a nap with Pikachu from the Pokémon series. I tucked him in.

Bruce Loves Mondays

Or really any day that I'm working. Since starting TamiasTech with Eric, that's most days. Bruce likes to hang out with me when I'm working. The great thing about working with computers is that you stay very still for a long time. This gives the cat the chance to have several naps but it makes it tough to get up to get more coffee.

He Puts It All Out There

Bruce is extremely friendly and affectionate. People who don't like cats probably think that all are stand-offish and temperamental. Environment and stability has a huge impact, but so does breed. My first cat was a Siamese — nice to look at but not a good pet. Bruce's attitude is demonstrated below.

Big Furry and Orange

Do you have a furry orange cat? Do you find that he or she is incredibly laid back? I'd like to hear.

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;

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.