devot:eeDevoted to ExpressionEngine

Mobile allows you to serve up a completely different set of templates when your site is accessed on a mobile device. A simple and flexible solution without the need to redirect to a different URL.

It couldn’t be any simpeler to use Mobile. Just install it and you are ready to go.

Let’s say you have a page you’re accessing that’s using EE native routing:

http://devot-ee.com/add-ons/rangee

This will obviously load up the rangee template in the add-ons template group. And that’s where the magic start: if you create a template group called mobile__add-ons and within that group a template named rangee, that template will get served up when that page is visited on a mobile device. It’s that easy!

If no mobile equivalent of a template is found, the regular template is served up to the frontend.

I know what you’re thinking: “But wait… what about Pages and Structure URL’s?” I’ve obviously thought of that. Mobile also works with these two fantastic modules.

For the curious folk among us, here’s how that works: It checks if the current URL is in the site_pages array generated by both Pages and Structure and replaces the associated template with the mobile equivalent if it exists.

A basic example would look something like this:

Regular templates:
- homepage*
--- index
- add-ons
--- auto-expire
--- mobile
--- rangee
--- remember-me
- contact
--- index

Mobile templates:
- mobile__homepage
--- index
- mobile__add-ons
--- auto-expire
--- mobile
--- remember-me

The following will happen:
/
Loads mobile__homepage/index template because mobile also honors the default template_group setting.

/add-ons/remember-me
Loads mobile__add-ons/remember-me because that particular template has a mobile equivalent.

/add-ons/rangee
Loads add-ons/rangee. Even though there is a mobile__add-ons template group, there isn’t a rangee template present in that group. Therefore it just loads the regular template.

/contact
Loads contact/index because there is no mobile__contact template group.

Global Variables

 
• {is_mobile}
 
• {mobile_client}

These are pretty much self-explanatory.

As of version 0.8 there are two extra global variables:

 
• {mobile:switch_to_full}
 
• {mobile:switch_to_mobile}

These two tags output a link that allows you to switch the mobile check on or off.

They are used like this:

Switch to:
<a href="{mobile:switch_to_full}">Full</a> | <a href="{mobile:switch_to_mobile}">Mobile</a>

Settings

As of version 0.7 you can define a template_group prefix for each mobile client. Setting a prefix for each mobile client might be a bit much, but you might want to make a difference between mobile devices and tablets like the iPad.

Important!
Because of the lack of extension hooks during the stage where Mobile works its magic, I had to hack into the segment variables array to make this work. Because of that, when using native EE routing (not with Pages or Structure), {segment_1} will also be prefixed with mobile__ in the mobile templates.

Keep that in mind.

Download Mobile

Mobile Links

• Support
• Developer
• Twitter

This entry was created June 13, 2011, 1:43 pm.
This entry was last updated September 10, 2012, 10:22 am.

Disclaimer: Information about ExpressionEngine add-ons is provided as a service to you, the user, and every member of the ExpressionEngine community. devot:ee is not responsible if you hose, mangle, wreck, or otherwise destroy your EE website by installing an add-on that you found out about at this site, regardless of its rating, Favorites status, commercial or free status, or general popularity. Caveat EEmptor!