A plugin for Phile to expose browser user-agent data to the template.
php composer.phar require phile/user-agent:*
- Install the latest version of Phile
- Clone this repo into
plugins/phile/userAgent
After you have installed the plugin. You need to add the following line to your config.php file:
$config['plugins']['phile\\userAgent'] = array('active' => true);
This plugin will create a new variable in your template called {{ useragent }}.
You can use this varaible to load conditional content, add special classes, or even modify your javascript.
Here is an example (from my laptop) of the full useragent array:
array(
'useragent' => 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1700.6 Safari/537.36', // full useragent string
'name' => 'Google Chrome', // name of the browser
'browser' => 'google-chrome', // css safe browser name
'version' => '32.0.1700.6', // browser version number
'type' => 'desktop', // form factor browser || mobile
'platform' => 'mac', // Operating System
'pattern' => '#(?<browser>Version|Chrome|other)[/ ]+(?<version>[0-9.|a-zA-Z.]*)#' // regex pattern that matched
);{% if useragent.type == 'desktop' %}
<div class="desktop-header-image">
<img src="images/desktop.jpg" alt="desktop screenshot">
</div>
{% else %}
<div class="mobile-header-image">
<img src="images/mobile.jpg" alt="mobile screenshot">
</div>
{% endif %}<body class="{{ useragent.platform }} {{ useragent.type }}">
<div class="content">
{{ content }}
</div>
</body>If we put this code in the head of our document, we can encode the {{ useragent }} array as json and use it in our javascript:
<script type="text/javascript">
window.Phile.useragent = {{ useragent|json_encode() }};
</script>Now Phile.useragent.browser would return the CSS safe browser name in our javascript.