iPhone site version using Textpattern:Extra
After some further ideas, testing and help from Marty I now have a method that lets iPhone/mobile users to view the full site if they wish.
Things you’ll need
- Detect Mobile User Agents & Browsers Script php script
- chs_cookie Textpattern plugin
- iPhone for testing
First things first
- Upload the mobile_device_detect.php file to your root file on server (you can put anywhere but just need to direct the script to it’s path later.)
- Install the chs_cookie script in the plugin area of textpattern – and remember to turn it on! Seems daft, but I did spend about 20mins wondering why it wasn’t working!
Create a page template and two new sections
I created a page template and called it setmobile, paste this code into into it and save.
<txp:if_section name="mobile">
<txp:chs_set_cookie cookie="mobile" value="on" />
<txp:php>
header( 'Location: /' ) ;
</txp:php>
</txp:if_section>
<txp:if_section name="mobileoff">
<txp:chs_set_cookie cookie="mobile" value="off" />
<txp:php>
header( 'Location: /' ) ;
</txp:php>
</txp:if_section>
New Sections
As you can see from the code above it references two sections, mobile and mobileoff, create these two sections and set their template as setmobile.
Default page template
I use just one page temple for my websites and will be using just one here. This is what the basic default page template looks like.
<?php
include('mobile_device_detect.php');
$mobile = mobile_device_detect();
// simple true or false test
?>
<html>
<?php if($mobile==true): ?>
<txp:chs_if_cookie cookie="mobile" value="off">
<head><txp:output_form form="head" /></head>
<body>
<h1 class="tryiphone"><a href="/mobile">Try the iPhone specific site?</a></h1>
<txp:output_form form="browser" />
</body>
</txp:chs_if_cookie>
<txp:chs_if_cookie cookie="mobile" value="on">
<head><txp:output_form form="head-mobile" /></head>
<body><txp:output_form form="mobile" /></body>
</txp:chs_if_cookie>
<txp:chs_if_cookie cookie="mobile" value="">
<head><txp:output_form form="head" /></head>
<body>
<h1 class="tryiphone"><a href="/mobile">Try the iPhone specific site?</a></h1>
<txp:output_form form="browser" />
</body>
</txp:chs_if_cookie>
<?php else: ?>
<head><txp:output_form form="head" /></head>
<body><txp:output_form form="browser" /></body>
<?php endif; ?>
</html>
The break down
<?php
include('mobile_device_detect.php');
$mobile = mobile_device_detect();
// simple true or false test
?>
At the top of the document include the mobile_device_detect.php
<html>
Just starts the document
<?php if($mobile==true): ?>
As it says, if the device is a mobile phone then this is what will be shown after here.
<txp:chs_if_cookie cookie="mobile" value="off">
<head><txp:output_form form="head" /></head>
<body>
<h1 class="tryiphone"><a href="/mobile">Try the iPhone specific site?</a></h1>
<txp:output_form form="browser" />
</body>
</txp:chs_if_cookie>
This is the first part of using the cookies plugin. It defaults to cookie OFF when you first visit the site, so we need to tell it what to show if the cookie is turned off.
Notice I have created some forms that contain all the head information that I want to use and introduce that by using the output_form tag. I have done the same with the body of the website.
The h1 link goes to the mobile section we created earlier which when visited will turn on the cookie and redirect back to the home page. When clicked the cookie will be ON and then related to the next part of code
<txp:chs_if_cookie cookie="mobile" value="on">
<head><txp:output_form form="head-mobile" /></head>
<body><txp:output_form form="mobile" /></body>
</txp:chs_if_cookie>
Now all I have to do include the two forms for the mobile which I have created and saves as head-mobile and mobile. In there is a slimmed down version of the site using all the same articles and information.
<txp:chs_if_cookie cookie="mobile" value="">
<head><txp:output_form form="head" /></head>
<body>
<h1 class="tryiphone"><a href="/mobile">Try the iPhone specific site?</a></h1>
<txp:output_form form="browser" />
</body>
</txp:chs_if_cookie>
I have found that if you are revisiting the site again then it forgets what it should be viewing, so in that case there is a fail safe by adding the ON cookie again but removing the value and adding either the iphone version or normal browser version should kick it back into gear.
<?php else: ?>
This else referes to whether it is a mobile device, so we’ve just told it what to display if it is a mobile device and whether the cookies are on or off.
Now to just add what the desktop browser will see.
<head><txp:output_form form="head" /></head>
<body><txp:output_form form="browser" /></body>
<?php endif; ?>
</html>
Thats it! and closing of the html document.
Go back to the full site?
If you are on the mobile site but want to view the full site again then include this link in your mobile form
<a href="/mobileoff">Standard Site</a>
Glitches.
I am still finding a few bugs, one is when going from the mobile version back to the full site it sometimes remembers the previous view port and no scrolling leaving just the top left of your web page in actual full size.
Comments