A small photograph of me, Tom W. Hartung.

LAMP CMS Customizations

I have been writing customizations — extensions, modules, plugins, templates, and themes — for a few of the most popular LAMP CMSes, keeping the code on github. I have been doing this off-and-on for many years, since the PHP Nuke days, in fact.1

Most recently I have written customizations that utilize device detection for each of the most popular LAMP CMSes, Joomla, WordPress, and Drupal. This page contains an overview of that work.

Back Top

AWD & RESS Using Device Detection

This work involves using the idMyGadget adapter API to provide the CMS with the ability to detect which device a visitor is using, supporting implementation of Adaptive Web Design, or, more specifically, Responsive Design with Server Side Components (RESS).

Integrating idMyGadget with a CMS makes the results of the device detection available to all of the CMS's extensions — all of its components, modules, plugins, templates, and themes.

This enables all of the extensions to call functions like isPhone(), isTablet() and isDesktop(), and adjust the content served as appropriate.

Back Top

Project Goals

As soon as I learned that there is software enabling a site to determine what device the visitor is using when they connect, I was immediately curious about how it works and what it is capable of detecting.2

I did some googling and noticed that very few people were doing this - integrating Device Detection with LAMP CMSes - so it seemed like an opportunity to do something unique. This increased my curiosity!

In addition to satisfying my curiosity, the goals in pursuing this project include:

Picture of Ben Franklin with the quote 'An investment in knowledge pays the best interest.'

Once I got the idea, though, the major goal became satisfying my curiosity about how difficult this would be and what the results might look like. Additionally, I have been looking for an excuse to dive into Drupal development for many years.

As Ben Franklin once said, For the best return on your money, pour your purse into your head.

Fast forward to now and, having spent the better part of a year playing around with this idea, and having thoroughly satisfied my curiosity about LAMP CMSes in general and how they might use device detection in particular, I have a confession to make:

It would be nice to tell more people that device detection is possible, teach them a bit about how it works, and perhaps even make some money off of some of this work and all that I have learned. (There, I said it.)

For what it's worth, I have been giving presentations at some meetups around town. Of course, I am not much of a sales and marketing person, but I suppose that could always change ...!

If I may be so bold as to try some marketing, let me say that, if you or someone you know is interested in learning how their LAMP CMS can be enhanced to customize as much or as little of the content it serves to specific types of devices, please Contact Me!

Back Top

Joomla AWD and RESS Customizations

Because I was already somewhat familiar with joomla, before starting on this project, I decided to that version first.

jmws_idMyGadget_for_joomla
The Joomla library in jmws_idMyGadget_for_joomla integrates the idMyGadget device detection adapter API with Joomla.
jmws_mod_menu_idMyGadget
The Joomla module in jmws_mod_menu_idMyGadget allows administrators to create menus that display only on specific device types.

Note that device-dependent menus enable administrators to serve — or not serve — specific (types of) content to specific device types. Explanation of how this works is a bit complicated and well beyond the scope of this annotated list of repos.

Joomla + IdMyGadget Template Repos

The following repos contain Joomla templates that use idMyGadget device detection:

jmws_beez3_idMyGadget
The template in jmws_beez3_idMyGadget combines the beez3 default joomla template and code using idMyGadget. For this project, I made as few changes as possible to the template when implementing the features listed below.
jmws_protostar_idMyGadget
The template in jmws_protostar_idMyGadget combines the protostar default joomla template and code using idMyGadget. For this project, I again made as few changes as possible to the template when implementing the features listed below.
jmws_protostar_tomh_idMyGadget
The template in jmws_protostar_tomh_idMyGadget combines the protostar default joomla template with code using idMyGadget. In addition to the changes needed to implement the features listed below, this template also contains some changes I felt like making while I was working on the project.

The template currently active on joomoowebsites.com is jmws_protostar_tomh_idMyGadget.

IdMyGadget Administrator Options

Each of these templates has the following options tabs in the CMS's administration panel allowing administrators to:

The IdMyGadget Options Tab allows site admins to specify:
  • Which device detection library to use
  • Which header (logo) image is served — if any — on phones, tablets, and desktops
  • Whether to use the Fluid Layout on phones, tablets, and/or desktops
  • Whether to show the site name on phones, tablets, and/or desktops
  • The site title — if any — and the html element to use for it on phones, tablets, and/or desktops
  • The tag line — if any — and the html element to use for it on phones, tablets, and/or desktops
The Hamburger Nav Options Tab allows site admins to specify:
  • Whether to show the Left Side Hamburger Menu Icon on phones, tablets, and/or desktops
  • Whether to show the Right Side Hamburger Menu Icon on phones, tablets, and/or desktops
  • The Left Side Hamburger Menu Icon size and color
  • The Right Side Hamburger Menu Icon size and color
  • The line cap and line size of the Left Side Hamburger Menu Icon
  • The line cap and line size of the Right Side Hamburger Menu Icon
The Phone Nav Options Tab allows site admins to specify:
  • Which jQuery Mobile Menu Theme to use
  • Whether to show the Phone Nav Menu on phones, tablets, and/or desktops
Adding the Phone Nav Menu causes the template to include jQuery Mobile, which is what makes the Phone Nav Menu display mobile-friendly app-like menu options in the page header or footer or both. The Phone Nav Menu does not look good on tablets and desktops, but the option to use it on those clients is available so that you can judge for yourself.

For more information about these options, see the Joomla Demos articles on joomoowebsites.com.

Back Top

WordPress AWD and RESS Customizations

Because I had a little experience with WordPress before starting on this project, I did it second.

jmws_idMyGadget_for_wordpress
The WordPress plugin in jmws_idMyGadget_for_wordpress integrates the idMyGadget device detection adapter API with WordPress.

Enabling the IdMyGadget plugin adds the following options under Plugins -> IdMyGadget.

The Plugins -> IdMyGadget Options allow site admins to specify:
  • Which logo image is served — if any — on phones, tablets, and desktops
  • Whether to show the site name, and the html element to use for it, on phones, tablets, and/or desktops
  • The site title — if any — and the html element to use for it, on phones, tablets, and/or desktops
  • The tag line — if any — and the html element to use for it, on phones, tablets, and/or desktops

These options function only when the active theme is one that also uses idMyGadget device detection.

WordPress + IdMyGadget Theme Repos

The following repos contain WordPress themes that use idMyGadget device detection:

jmws_wp_idmygadget_vqsg_ot
I got the theme in jmws_wp_idmygadget_vqsg_ot WordPress Visual Quickstart Guide. It is a very simple theme so it was very easy to add device detction to it.
jmws_wp_idmygadget_twentythirteen
The theme in jmws_wp_idmygadget_twentythirteen is the twentythirteen default wordpress theme with device detection provided by idMyGadget.
jmws_wp_idmygadget_twentyfifteen
The theme in jmws_wp_idmygadget_twentyfifteen is the twentyfifteen default wordpress theme with device detection provided by idMyGadget.

The theme currently active on tomwhartung.com is jmws_wp_idmygadget_twentythirteen.

IdMyGadget Administrator Options

Each of these themes has the following groups of options in the CMS's administration panel:

The IdMyGadget Detector group of options allows site admins to set:
  • Which device detection library to use
The IdMyGadget Header/Footer Menus group of options allows site admins to specify:
  • Which jQuery Mobile Menu Theme to use
  • Whether to show the Phone Nav Menu on phones, tablets, and/or desktops

Enabling either the Header or Footer Menu causes the template to include jQuery Mobile, which is what makes the Phone Nav Menu display mobile-friendly app-like menu options in the page header or footer or both. The Phone Nav Menu does not look good on tablets and desktops, but the option to use it on those clients is available so that you can judge for yourself.

The IdMyGadget Left Hamburger Menu Icon group of options allows site admins to specify:
  • Whether to show the Left Side Hamburger Menu Icon on phones, tablets, and/or desktops
  • The Left Side Hamburger Menu Icon size and color
  • The line cap and line size of the Left Side Hamburger Menu Icon
The IdMyGadget Right Hamburger Menu Icon group of options allows site admins to specify:
  • Whether to show the Right Side Hamburger Menu Icon on phones, tablets, and/or desktops
  • The Right Side Hamburger Menu Icon size and color
  • The line cap and line size of the Right Side Hamburger Menu Icon

The phone navigation options work well, but the hamburger menu icons can be a bit flakey on some devices, so it is best to avoid using those at this time.

Back Top

Drupal AWD and RESS Customizations

Because I had absolutely no experience with Drupal before starting on this project, I did it last.

jmws_idMyGadget_for_drupal-d8
The Drupal service in jmws_idMyGadget_for_drupal-d8 integrate the idMyGadget device detection adapter API with Drupal 8.
jmws_idMyGadget_for_drupal-d7
The Drupal module in jmws_idMyGadget_for_drupal-d7 integrates the idMyGadget device detection adapter API with Drupal 7. 3

The jmws_idMyGadget_for_drupal-d8 repo contains the code I am currently using and maintaining. The jmws_idMyGadget_for_drupal-d7 repo is obsolete, but may be useful for a site still running Drupal 7.

Here is how this happened: I got idMyGadget integrated with Drupal 7, but discovered that the version of jQuery used by Drupal 7 was incompatible with the version of jQuery Mobile I was using.

There are ways to fix this, but when it comes to dog food I like to eat only my own. By this time it was early November 2015, so I decided to wait until Drupal 8 was released.

And that is we have two repos for Drupal!

Drupal + IdMyGadget Theme Repos

The following repos contain Drupal themes that use idMyGadget device detection:

jmws_drupal_idMyGadget_stark-d8
The theme in jmws_drupal_idMyGadget_stark-d8 is based on the Drupal 8 version of the stark theme. It has access to the parameters set by the module, but at this time does not do anything with those values.
jmws_drupal_idMyGadget_bartik-d8
The theme in jmws_drupal_idMyGadget_bartik-d8 is based on the Drupal 8 version of the bartik theme. It has access to the parameters set by the module, but at this time does not do anything with those values.

If you poke around on my account, you will see quite a few other themes, such as jmws_drupal_idMyGadget_bartik-d8-exp, jmws_drupal_stark_idMyGadget-d8-first_try, and jmws_drupal_bartik_idMyGadget-d8-second_try. Drupal really is quite a bit more complicated than Joomla and WordPress, so it took me a few tries to get this working!

The theme currently active on tomhartung.com is jmws_drupal_idMyGadget_bartik-d8.

IdMyGadget Administrator Options

Installing the jmws_idMyGadget_for_drupal-d8 module adds following groups of options in the CMS's administration panel under Configuration -> System:

The IdMyGadget — Gadget Detector group of options allows site admins to set:
  • Which device detection library to use
The IdMyGadget — Hamburger Menu Icon group of options allows site admins to specify:
  • Whether to show the Left Side Hamburger Menu Icon on phones, tablets, and/or desktops
  • The Left Side Hamburger Menu Icon size and color
  • The line cap and line size of the Left Side Hamburger Menu Icon
  • Whether to show the Right Side Hamburger Menu Icon on phones, tablets, and/or desktops
  • The Right Side Hamburger Menu Icon size and color
  • The line cap and line size of the Right Side Hamburger Menu Icon
The IdMyGadget — Options for Desktops group of options allows site admins to specify:
  • Which logo image is served — if any — on desktops
  • Whether to show the site name, and the html element to use for it, on desktops
  • The site title — if any — and the html element to use for it, on desktops
  • The tag line — if any — and the html element to use for it, on desktops
The IdMyGadget — Options for Phones group of options allows site admins to specify:
  • Which logo image is served — if any — on phones.
  • Whether to show the site name, and the html element to use for it, on phones.
  • The site title — if any — and the html element to use for it, on phones.
  • The tag line — if any — and the html element to use for it, on phones.
The IdMyGadget — Options for Tablets group of options allows site admins to specify:
  • Which logo image is served — if any — on tablets.
  • Whether to show the site name, and the html element to use for it on tablets.
  • The site title — if any — and the html element to use for it on tablets.
  • The tag line — if any — and the html element to use for it on tablets.
The IdMyGadget — Phone Nav Options group of options allows site admins to specify:
  • Which jQuery Mobile Menu Theme to use
  • Whether to show the Phone Nav Menu on phones, tablets, and/or desktops

With the integration of Symfony, setting up these options in Drupal 8 is quite a bit different than it is in Drupal 7. Specifically, it is much more Object-Oriented, and OO Programming is something I greatly enjoy!

YouTube Saves the Day!

Not only was this my first experience with Drupal, it was also my first experience with the fresh release of a new major version of a major CMS. At the time, I was somewhat surprised at the lack of up-to-date documentation, but in retrospect, this is not surprising at all.

As it turned out, I found some very important information on youtube.com of all places. This was not what I expected, but in hindsight it makes perfect sense: the informative video was from DrupalCon 2015 in Barcelona, and done shortly after they finalized the changes that were going into D8.

Having found one video with essential information not available elsewhere, I wanted to watch all the videos; the sense of FOMO suddenly became very strong! Of course watching them all is out of the question, there are too many. 4

First Time for Everything

There's a first time for everything, and this turned out to be a huge learning experience. Now I know where to go first for leading-edge information such as this!

At one point during this advanture I actually found one of the answers I needed on twitter!5. Wonders never cease!

Back Top

All Goals Met!

Looking at the goals of the project, I have achieved all of them except the last two — both of which entail making some money off this work.

To accomplish these last two goals I need your help!

If you, or some one you know has, or wants a LAMP CMS site and is interested in learning how to serve different content 6 to different devices, please Contact Me and see if we can get to work on that.

Time Spent

I always feel like, once something like this done, it looks easy. However, I assure you that doing all this was not a walk in the park!

These pie charts show how I spent my time on this project.

Pie chart showing most time was spent learning, with time also spent on coding, experimenting, and maintenance
Time Spent by Activity

As far as activities go, most of my time was spent learning, and most of that time was spent learning how to work with the individual CMSes. Although they are similar, each has a different organizational structure and different sets of functions and methods for accomplishing things.

Coding and experimenting go right along with that, related but distinct activities. The maintenance includes getting all three CMSes running on three different hosts: development, backup, and production.

Half the time was spent on Drupal, mostly Drupal 8, and about a fourth of it was spent each on Joomla and WP
Time Spent by CMS

And as far as time spent on the various CMSes, I spent about the same amount of time learning and working with the two versions of Drupal as I did with Joomla and WordPress combined.

Drupal is complex, and is well-known for having a steep learning curve7. But I was still surprised by its complexity, the number of changes made between versions 7 and 8, and especially the lack of documentation when Drupal 8 was released. It is a bit ironic though that despite spending all this time on Drupal, and learned a ton, I don't have much to show for the effort.

Of course, now that I have done it for my demo use cases, I could follow the same process to satisfy more practical goals — much more quickly the second time. And to be honest, I think it would be great to do something like this in JavaScript with Node or in Python with Django or Flask.

So this work is still in progress! I look forward to getting back to it if and when I find some customers with specific LAMP CMS needs, or some time to try it with one of the other languages mentioned previously.

LAMP CMS Agnostic

I have been going to a lot of meetups lately, and at first was a little suprised that there is not more cross-pollination — that there are not many people who work on more than one of these CMSes.

This experience taught me that a degree of specialization is necessary if one wants to build websites, rather than create a tool for website builders to use. This is especially true if one wants to work with Drupal.

This experience has also made me lamp-cms-agnostic. Each of these CMSes has its strong and weak points. Choosing the right tool can go a long way towards making the job easier.

If you are thinking about using a LAMP CMS to create a website, are uncertain which one to use, and would like an impartial opinion, please contact me.

Back Top

Notes