Adding support for iPhone with GraffitiCMS

This blog uses GraffitiCMS as the blogging engine. This software has now been open-sourced by the original developers, Telligent, and is available on CodePlex. Although it’s pretty full-featured and does most of what I want and need from a blogging engine (and has lots of features I don’t use) there is no built-in support as yet for providing a special view for mobile devices.

Consequently, when you view the site on an iPhone, say (since this is what I use as a mobile phone), it displays the wide full look (currently 3 columns across) in a much shrunken form. Better would be to display the site in a single column and — even better — to not display the full text of the usual 10 articles shown on the front page. So, this week, after helping sort out some Medium Trust issues one of the patches had introduced (and that had left my site in a bit of a fragile state), I set out trying to find a way to create a special view of the site for the iPhone.

The first hint was a package called Graffiti Extras. It’s available on CodePlex at version 1.3, but hasn’t been updated for about 18 months. It contains a plug-in called Mobile Theme Selector. Put simply, this plug-in installs itself into GraffitCMS and, when a request is detected and the user agent string passed by the browser indicates a mobile device, the code switches the theme for the request. The theme switched to is one you write in the normal manner — views and CSS files — but that is optimized for a mobile device.

Sounds simple enough, and I set it up, but it didn’t work. I’d connect with my iPhone and still got the usual full view. Meh.

I looked at the code: in essence, in order to identify a mobile device, all that happens is that the user agent string is tested to contain “IEMobile” (presumably for Windows Mobile devices) or that the Browser object’s IsMobileDevice returns true. Well, I knew the first would fail, but the second?

  if ((HttpContext.Current.Request.UserAgent.IndexOf("IEMobile") > -1) ||
      (HttpContext.Current.Request.Browser.IsMobileDevice))
  {
    GraffitiContext.Current.Theme = MOBILETHEMENAME;
    ...
  }

Time to investigate IsMobileDevice; surely it should recognize the iPhone?

It turns out, apart from some default behavior, IsMobileDevice uses an external definitions file in order to decide whether the user agent string identifies a mobile device. And, lo, that definitions file is also on CodePlex (here).

Once you download it, you should extract the mobile.browser file and place it in the /App_Browsers/Devices folder of your web application (if the folder doesn’t exist yet, create it). Restart your application (in my case, that’s GraffitiCMS) and you should find that the iPhone is recognized as a mobile device.

Next time, I’ll talk about what needs to be done in order to display a page optimized for the iPhone.

  Loading links to posts on similar topics...