MobileUsers
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?
Description
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}.
Installation
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.
Configuration
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]]
(:else:)
[[{*$FullName}?setskin=desktopskin | Desktop]]
(:ifend:)
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.
Usage
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:)
(:else:)
(:thumbgallery cols=5:)
(:ifend:)
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.
Notes
Change log / Release notes
2013-10-29 - v1.0, initial release. Tested on iPad 4, iPad mini, and iPhone 5.
See also
Contributors
- Ian MacGregor - Recipe maintainer
- Petko - Custom page variable explanation
Comments
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.