Different templates for iPhone

Different templates for iPhone, a forum discussion on Jojo CMS. Join us for more discussions on Different templates for iPhone on our Themes Support forum.

Back to Forum Index : Back to Themes Support   RSS
mikec

Lead Developer

mikec

18 Jun 2010
Posts: 67

Recently we wanted to serve different templates for users coming to our site if they were visiting with an iPhone. Here's how we did it:

iphone specific templates are in a folder called iphone in the normal templates folder eg: templates/iphone/template.tpl

Grab the latest copy of WURLF php and extract this into yourtheme/external/wurfl

Add this to yourtheme/api.php

if ($requestingDevice->getCapability("brand_name") == 'Apple' &&
$requestingDevice->getCapability("model_name") == 'iPhone')) {
/* Get existing template direcotires */
$template_dir = $smarty->template_dir;

/* See if there are iphone specific templates */
foreach ($template_dir as $k => $v) {
if (is_dir($v . '/iphone')) {
$template_dir[$k] = $v . '/iphone';
} else {
unset($template_dir[$k]);
}
}

/* Check the iphone specific ones first */
$smarty->template_dir = array_merge($template_dir, $smarty->template_dir);
$smarty->assign('ISMOBILE', true);
define('ISMOBILE', true);
} else {
$smarty->assign('ISMOBILE', false);
define('ISMOBILE', false);
}


Tweak the if statement to match the handsets the you're after. You could easily extend this to handle multiple templates for different target devices, eg Andriod, generic mobile browsers, HTML5 browsers etc.

If you need to do run different php code in a plugin is it's a mobile then wrap this in a
if (ISMOBILE) {
/* Mobile specific code */
} else {
/* Specifically not mobile code */
}


Similarly if you don't want to make a full copy of a template file then you can do
{if $ISMOBILE}
mobile html
{else}
desktop html
{/if}
mikec

Lead Developer

mikec

18 Jun 2010
Posts: 67

One thing to note is that Content Caching breaks this so turn it off. Content Caching assumes that the page getting returned doesn't change.
Jaijaz Jaijaz

19 Jun 2010
Posts: 215

Thanks for the post. I had been doing some research in this area and was going to just use @media screen and (min-width: 800px) style of thing for defining different CSS files for different device sizes. But this allows for so much more.
If you not living on the edge you taking up too much space.
mikec

Lead Developer

mikec

21 Jun 2010
Posts: 67

I totally replaced head.tpl and used a separate css/iphone.css and js/iphone.js so I didn't have all the junk that's accumulated in the normals styles.css and common.js.

<!DOCTYPE html>
<html>
<head>
<title>GardyneHOLT</title>
<base href="{if $issecure}{$SECUREURL}{else}{$SITEURL}{/if}/" />
<link rel="Shortcut icon" href="{if $issecure}{$SECUREURL}{else}{$SITEURL}{/if}/favicon.ico" />
<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable= no;" />

<meta http-equiv="content-Type" content="text/html; charset={if $charset}{$charset}{else}utf-8{/if}" />
<meta name="generator" content="Jojo CMS http://www.jojocms.org" />
<link rel="stylesheet" type="text/css" href="{cycle values=$NEXTASSET}css/iphone.css{if $DEBUG}?r={math equation='rand(1000,10000)'}{/if}" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="{cycle values=$NEXTASSET}js/iphone.js"></script>
{if $rssicon}{foreach from=$rssicon key=k item=v}
<link rel="alternate" type="application/rss+xml" title="{$k}" href="{$v}" />{/foreach}{elseif $rss} <link rel="alternate" type="application/rss+xml" title="{$sitetitle} RSS Feed" href="{$rss}" />{elseif !$templateoptions || $templateoptions.rss} <link rel="alternate" type="application/rss+xml" title="{$sitetitle} RSS Feed" href="{$SITEURL}/articles/rss/" />{/if}
</head>
Jaijaz Jaijaz

21 Jun 2010
Posts: 215

Nice.

I was thinking about this further over the weekend, in particular relation to the cache thing. My experience is that turning off the template cache can really slow things down.

To this end I'm thinking that the best implimentation is to use the {$ismobile} concept and then include whichever tpl's you need. So your theme's template.tpl would look more like this.

{if $isiphone}
{include file="iphone.tpl"}
{elseif $isotherdevice}
{include file="otherdevice.tpl"}
{else}
{include file="standard.tpl"}
{/if}
Then each tpl would be like a normal tpl but have calls to the right head.tpl for that particular senario.


If you not living on the edge you taking up too much space.
Rick Rick

21 Jun 2010
Posts: 336

It's also gotta be easy for plugins to support mobile versions too. Maybe make the iphone.css file similar to the current styles.css file in that it merges all applicable stylesheets?

The "@media screen and (min-width: 800px)" only works for iPad doesn't it? I thought iPhones required a bit more work.

I like your idea for updating all the directory paths for specific devices. What're your thoughts on expanding it further (maybe as a separate plugin to avoid duplicate code on mobile site development) that could set up constants and smarty vars for 'mobile', 'iphone', 'ipad', 'android' etc... so that plugins can use specific templates for all mobile devices, or specify templates specifically for certain devices?

Eg a plugin could have templates/article.tpl, templates/mobile/article.tpl and templates/iphone/article.tpl... These are shown to a visiting computer, any mobile device, and only iPhones respectively. This would let you have mobile versions of the template for all mobile devices but override it with a separate template with features specific to the iphone if needed. The more specific your needs and market, the more specific you can create your template and css files.

You could even end up with templates/ps3/article.tpl and templates/wii/article.tpl

Maybe ending up with two constants and smarty vars... platform (screen, mobile, sdtv, hdtv) and device (iphone, android, ps3, wii, samsung) as more and more devices or specifically types of devices become web browsers.

You could have the platform stylesheet loaded and then, if applicable and available, the device stylesheet.

Maybe I'm just over complicating it.
mikec

Lead Developer

mikec

21 Jun 2010
Posts: 67

Sorry, I wasn't meaning template caching, I was meaning content caching. Template caching works as normal in dwoo (I don't use smarty) as dwoo considers the fully path to the file.

There's no reason this couldn't be turned into a separate plugin that maintains appropriate head.tpl files for each platform too. I like the idea of plugins being able to provide device specific templates and css files.

Maybe something I'll look at integrating next time I'm motivated to work on Jojo2.
Back to Forum Index : Back to Themes Support   RSS
You must be logged in to post a reply



You need to Register or Log In before posting on these forums.