Oliver Ker Design

iPhone site version using Textpattern

UPDATE: I have written a new post of a newer and slightly more complicated method to display a mobile version – please use this one if it suits you better.

If you use Textpattern and wanted to create an alternative iPhone version for faster and slimed down browsing, then I think I’ve finally done it!

I have been on the quest for this on and off for the last month or two ever since I read(skimmed) over the alternative site version article by the Erskine boys which set me thinking how to replicate this in Textpattern. I am no php programer but know how to copy and paste, and have been searching for the piece of code to serve up a different site for iPhones.

I came across the javascript snippets that detect the browser and give a different stylesheet, this was ok, but I still wanted to build a second website that used the same textpattern database, so that when I ever updated the site it would update the iPhone version without any thought.

Multiple sites are available in textpattern, and even though I did not try this method, what I read about it, I couldn’t see how it would show a different site template for the same database – Maybe I missed that?

How I did it

I came across this article that uses php to detect the browser and shows a specific stylesheet.

I took this code to for the basis of my iPhone version of my site. I have simplified this below to make it easier to follow as I use many different forms in my install to get the desired output.

I placed this code at the top of a page template.

<?php
if (ereg('iPhone',$_SERVER['HTTP_USER_AGENT'])) {
$iphone = 1;
} 
elseif (ereg('iPod',$_SERVER['HTTP_USER_AGENT'])) {
$iphone = 1;
} 
else {
$iphone = 0;
}
?>
<?php if ($iphone == '1'): ?>
<![if !IE]>
<txp:output_form form="iphone-head" />
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<link rel="stylesheet" type="text/css" href="iphone.css" media="only screen and (max-device-width: 480px)"
charset="utf-8" />
<txp:output_form form="iphone" />
<![endif]>
<!-- If it's NOT an iPhone, show the normal CSS and no Viewport Meta tag -->
<?php else: ?>
<txp:output_form form="head" />
<txp:output_form form="browser" />
<?php endif; ?>

I normally build my sites in one page template using if_section statement to display section specific content, so all I have to do was copy and paste all that information in to a form which I called browser and just call that in with output_form tag.

So you can see that by building a separate site in the iphone form (just like you normally would in the pages area) that it will output a different site and style but uses the same database of information in textpattern.

I have started to build the iPhone version of my site, so you can see how I’m getting on by viewing http://www.oliverker.co.uk on your iPhone.