Summary: Accommodating visitors who use mobile devices
Version: 1.0
Prerequisites: Skin Change recipe, multiple skins
Status: Stable
Maintainer: Ian MacGregor
Categories: Mobile PDA
Users: +1 (view / edit)
Discussion: MobileUsers-Talk?

Questions answered by this recipe

  • How can I detect which skin is being used?
  • How can I give visitors a choice of mobile or desktop layout?


Skin detection, allow visitors to change skins. This cookbook recipe provides a way for wiki administrators to detect which skin is being used and offer visitors a choice of skins. I decided to use this method because most browser detection scripts don't differentiate between the iPhone, iPad, and iPad mini. These are the only devices I own so I chose a method that would work with these devices. I also feel that it is better to give your visitors a choice of layout rather than force them into a layout that may not be suitable for them.

If you only want to be able to detect the current skin, follow Step 3, below, and use the page variable {$CurrentSkin}.


Step 1
Install the Skin Change recipe. The Skin Change recipe allows wiki visitors to change currently available skins using a link on a page.

Step 2
You will need to install two skins in your wiki; a skin with a desktop layout, and one with a mobile layout. Skins are available in the Skins collection. You can also make your own skin.


Step 3
Edit your local/config.php file and add a custom page variable. This step adds a new custom page variable {$CurrentSkin}. Copy the below lines and paste them into your local configuration to accomplish this:

## Defining a custom page variable to detect the current skin
$FmtPV['$CurrentSkin'] = '$GLOBALS["Skin"]';

Step 4
Add a link in your wiki to give visitors a choice of skin. The Skin Change recipe, installed in Step 1, provides actions for ?skin= and ?setskin=. The ?setskin= action, together with the custom page variable in Step 3, is used in a conditional statement to alow visitors to toggle between mobile and desktop skins which are available on your wiki.

(:if equal "{$CurrentSkin}" "desktopskin":)
[[{*$FullName}?setskin=mobileskin | Mobile]]
[[{*$FullName}?setskin=desktopskin | Desktop]]

Note: You will need to change the desktopskin and mobileskin, above, with the names of each of these skins as they appear in the pub/skins/ directory on your wiki.


Step 4, above, needs to be added to any page in which you want to give your visitors a choice of skins. A good suggestion for this is the site sidebar or a group header.

A wiki administrator will also be able to use the conditional statement, in Step 4, to adjust the page layout.

For example, I use a gallery recipe that allows me to specify the number of columns in a table. I have a table which has 5 cells per row when viewed on a large tablet or desktop computer, but this table only has two cells per row when viewed on a mobile phone. Otherwise the large table would run off the side of the screen on a mobile phone.

(:if equal "{$CurrentSkin}" "mobileskin":)
(:thumbgallery cols=2:)
(:thumbgallery cols=5:)

So, you can see how easy this new page variable makes it to adjust the page layout depending on which skin a visitor is using.


Change log / Release notes

If the recipe has multiple releases, then release notes can be placed here. Note that it's often easier for people to work with "release dates" instead of "version numbers". 2013-10-29 - v1.0, initial release. Tested on iPad 4, iPad mini, and iPhone 5.

See also



See discussion at MobileUsers-Talk?

User notes +1: If you use, used or reviewed this recipe, you can add your name. These statistics appear in the Cookbook listings and will help newcomers browsing through the wiki.