Wallogit.com
2017 © Pedro Peláez
A plugin for Phile to expose browser user-agent data to the template.
A plugin for Phile to expose browser user-agent data to the template., (*1)
php composer.phar require phile/user-agent:*
plugins/phile/userAgent
After you have installed the plugin. You need to add the following line to your config.php file:, (*2)
$config['plugins']['phile\\userAgent'] = array('active' => true);
This plugin will create a new variable in your template called {{ useragent }}., (*3)
You can use this varaible to load conditional content, add special classes, or even modify your javascript., (*4)
Here is an example (from my laptop) of the full useragent array:, (*5)
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:, (*6)
<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., (*7)
A plugin for Phile to expose browser user-agent data to the template.
MIT
cms content phile