Advanced MeetPro Customization: Mobile Version

Willamette hosted the 2013 Northwest Conference Championships this past weekend and I wanted a mobile version of the live results. I am not a true web developer. I figure out what I want, and then I make it work. It’s not always the best solution, but it usually gets the job done.

This is not meant to be a step-by-step tutorial. It will explain how I have things set up and hopefully get you started on your own customization’s. You can take a look at the live results page to see what I ended up with. If you view the page on a mobile phone you should see a more friendly version.

To get a mobile version of the live results I decided to use a different stylesheet if the page was viewed on a mobile browser. I found a php script online that will detect a mobile browser. As I described in my previous post my default page is index.php. I simply added the following php code to the top of the page.

<?php 
require_once('includes/mobile_device_detect.php');
$mobile = mobile_device_detect(true,false,true,true,true,true,true,false,false);
if ($mobile)
  echo '<link rel="stylesheet" type="text/css" href="/css/mobile.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">';
else
  echo '<link rel="stylesheet" type="text/css" href="/css/style.css" />';
?>

If the script detects a mobile browser it uses mobile.css and disables pinch to zoom. Otherwise it uses the default style sheet.

This works great for the index page, but when you go to a results page you still have the desktop version regardless of browsers. To make the detection script work on the results pages I had to set the server to parse .html as php. This requires one line of code in the .htaccess file.

AddHandler x-httpd-php5 .html

With this in the .htaccess file any file with a .html extension will be processed as php. So now I can use my mobile detection script on the results pages. Since all the pages are being processed as php I figured this would be a good time to rewrite the templates and make use of php includes.

The three template files you need to worry about (other thant index.html) are: event_entries.html, event_heat_sheets.html and event_results.html. They should all be essentially the same, with just a couple variations. I added this code to the top of each page.

<?php
$title = "[$title]";
$event_name = "[$event_name]";
$name = "[$name]";
$timestamp = "[$timestamp]";
$type = 'results';
?>

This will store the MeetPro data into php variable so we can use them later. This is what the the event_results.htm file looks like. As you can see it is very basic but has several php include statements. Because the php includes are procesed when the page is loaded I can make changes to the the include files and all the results files will be updated. This also allows me to make changes to the template without actually changing the template files.

<?php
$title = "[$title]";
$event_name = "[$event_name]";
$name = "[$name]";
$timestamp = "[$timestamp]";
$type = 'results';
?&gt

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-stric.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <? include('includes/inc.head.php'); ?>
</head>

<body>
<div id="container">
  <!-- event_results.html -->

  <? include('includes/inc.header.php'); ?>

  <h2>[$event_name] Results</h2> 

  <div id="eventResults">
    [$results_tables]
  </div>

  <div class="clearfix"></div>
  <? include('includes/inc.footer.php'); ?>
</div>
<? include('includes/inc.code.php'); ?>

</body>
</html>

Now I can edit the includes/inc.head.php file with the following code. This is everything that goes inside the <head> tag including the css stylesheet declaration.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><? echo $title; ?></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="shortcut icon" href="http://images.tfmeetpro.com/icon-16x16.png"/>
<? 
   require_once('includes/mobile_device_detect.php');
   $mobile = mobile_device_detect(true,false,true,true,true,true,true,false,false);

   if ($mobile)
      echo '<link rel="stylesheet" type="text/css" href="/css/mobile.css" />
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">';
   else
      echo '<link rel="stylesheet" type="text/css" href="/css/style.css" />';
?>

The includes/inc.header.php and includes/inc.footer.php files are for structure and let me modify the template in one place. The includes/inc.code.php file is where I put any code that needs to be executed like some jquery to alter the html that MeetPro writes or for tracking and analytics.

If you are interested, all of the files I used for the Northwest Conference Championships are on GitHub.

Advanced MeetPro Customization: Mobile Version
Tagged on:                     
Highslide for Wordpress Plugin