BlueMobi Theme

This article covers the basics of the bluemobi theme that is now available for Drupal Version 6. This is a very basic theme, a stripped down version on bluemarine, and shows some of the modifications the original theme files and the additional functions and variables used to execute the theme successfully.

Updated!!

The first thing to note about the theme is that, unlike the accessibility module it make no attempt to detect the device used to browse the web site. There is basic UA, or user agent sniffing and the theme then tries to send the correct headers within the phptemplate_preprocess_page function that is new to Drupal version 6. If an admin page is selected then all styles and scripts are loaded. However, when browsing the normal site only the basic mobi.css is loaded.

template.php

<?php
   
$mime_types = array 
    (
    'application/vnd.wap.xhtml+xml',
    'application/xhtml+xml',
    'text/html'
    );
       
$mime_dtds = array
    (
    '<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" 
    "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd"> '."\n",
    '<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">'."\n",
    '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" 
    "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">'
    );
   
if ( !isset($_SERVER["HTTP_ACCEPT"]) OR empty($_SERVER["HTTP_ACCEPT"]) OR 
stripos($_SERVER['REQUEST_URI'], 'admin') !== FALSE ) {
    $my_dtd = 2;
} elseif ( stristr($_SERVER["HTTP_ACCEPT"], $mime_types[0]) ) {
    $my_dtd = 0;
} elseif ( stristr($_SERVER["HTTP_ACCEPT"], $mime_types[1]) ) {
    $my_dtd = 1;
} else {
    $my_dtd = 2;
}
    
$vars['dtd']     = $mime_dtds[$my_dtd];
$vars['head']    = ($my_dtd != 2 ) ? str_replace('text/html', $mime_types[$my_dtd], $vars['head']) : 
$vars['head'];
$vars['styles']  = ( stripos($_SERVER['REQUEST_URI'], 'admin') !== FALSE ) ? $vars['styles'] : 
 '<link type="text/css" rel="stylesheet" media="all" href="'. base_path() . 
path_to_theme() .'/mobi.css" />'."\n";
$vars['head_extra'] = '<link rel="alternate" media="handheld" href="http://'. 
$_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'] .'" />'."\n";
$vars['scripts'] = ( stripos($_SERVER['REQUEST_URI'], 'admin') !== FALSE ) ? $vars['scripts'] : '';

page.tpl.php

A couple of new variables are now available for your page.tpl.php. There is additional an extra region available, $pre_content and a hash-up of the $primary_links variable called $mobi_links. This variable adds accesskeys to $primary_links and thus makes it more accessible to mobile devices. This variable will be described at a later date in more detail as adding accesskeys seems to be a bit of an issue with Drupal and it deserves a bit more attention. Stay tuned for that.

drupal_set_header

Additional headers are sent within the phptemplate_preprocess_page function. These headers are for content type and expiry. This can be modified or removed according to your own wishes. Current setting is one week.

<?php
  
  drupal_set_header('Content-Type: '. $mime_types[$my_dtd] .'; charset=utf-8');
  drupal_set_header("Expires: " . date("D, d M Y H:i:s", time() + 60 * 60 * 24 * 7) . " GMT");
  drupal_set_header("Cache-Control: Public");

Custom Functions in template.php

There is a custom pager function that limits only includes next and previous links - thus reducing space and also adds accesskeys to the links. Additionally there is a mobi_fix function that is a straight take on the html_corrector module by Steven Wittens. The latter function is only called from node.tpl.php in attempt to fix the HTML when using splitting the content into smaller pieces.

node.tpl.php

Due to the nature of mobile browsing, much of the functionality of the site is not needed on a hand-held device. To this end a few of the normal variables available have not been included in the node.tpl.php file. One additional feature is an attempt to reduce file size and to actually break the content into smaller, more manageable pieces. This is based, somewhat, on the accessibility module and it can be removed if you do not want this feature implemented.

<?php
    
if ($page != 0 ) {
  
$chunk_splitter = '<br class="mobi" />';
   
/* IF YOU DO NOT WISH PAGING, DELETE ALL PHP BELOW */
$page_content = spliti($chunk_splitter, $content );
$nums         = count($page_content);
  
$offset  = ( isset($_GET['p']) AND is_numeric($_GET['p']) AND $_GET['p'] < $nums ) ? $_GET['p'] : 0; 
  
$content  = "\n". mobi_fix($page_content[$offset]) ."\n";
$content .= '<p>'. t('Page ') . ($offset+1) . t(' of ') . $nums .'</p>';
  
if ( $offset+1 < $nums ) {
$content .= '<p>'. 
    l(t('Next'), 
'node/'.$node->nid, 
array('query' => 'p='. ($offset+1), 'attributes' => array('accesskey' => 6)) )
     .'</p>';
}
  
}
// REMOVE EVERYTHING ABOVE
?>

The above code looks for a certain string, in this case <br class="mobi" />, checks what has been passed through the URL, ie: p=?? and deals with it accordingly. An accesskey is also added in this very simple pagination snippet.

mobi.css

The theme file is very light. In fact it only really contains link and text colors and some styling for the head replacing the logo.png image that is default in the usual bluemarine theme.

That is about it. I hope you find this article useful and that theme at least sets you off in the right "mobile" direction. I will be uploading this shortly to CVS but until then, please feel free to use, comment whatever on this site.

Note: This theme has only been checked on an emulator. I have no Drupal v6 production sites yet. Also, with regards to the $chunk_splitter variable in the above snippet - the actual uploaded file looks slightly different, but you should get the idea.