« Homepage
Create an alternative version of your ExpressionEngine website
17/06/09
Jamie Pittock
We announced the launch of the iPhone version of the Erskine Design website on Tuesday. This alternative version of the site is located in a subdomain of the main erskinedesign.com domain, but both versions run on the same ExpressionEngine install. I thought there’d be a number of people out there who might be interested how I did it. So here you go…
In our case we created an alternative version of our site specially optimised for the iPhone but there are multiple use-cases for the technique I’m about to describe. For instance, perhaps you want to offer a ‘lite’ version of your site for people on slow web connections, or maybe multiple versions of the same site using different languages, or even geographic-specific versions of the same site. Think about an international news website with alternative versions where the content becomes country specific by using subdomains.
I’ve heard a few people say they’d use the Multiple Site Manager for this kind of thing. I think this is over kill at best, and just plain wrong at worst. In my eyes we’re not dealing with multiple websites here; instead we have two versions of the same website. This is an important difference.
To create an alternative version we’ll have to assume that you have an existing ExpressionEngine website installed on a web server somewhere. The first thing we’ll do is open that installation’s path.php file in a text-editor. Within that file you’ll see the following line:
$global_vars = array();Global path.php variables are described in the EE docs so I won’t go into them here. Anyone who came to my FOWD workshop will know how useful I find them, and if you weren’t at the workshop, don’t worry I plan to talk about them more in the near future.
Underneath that line you want to add the following:
$global_vars['pv_site_version'] = 'full';What we’ve done is create new global path.php variable called ‘pv_site_version’ with the value of ‘full’. At Erskine we prefix the various different types of variables available in EE so that they are easily identifiable in our templates. In the case of path variables we prefix them ‘pv_’. This variable will be available in your templates by using {pv_site_version}.
Our next job is to create the subdomain where our alternative version will live. How you do this depends on your server setup so go off and do that, and in the meantime we’ll have an intermission.
Everyone created their subdomain? OK let’s carry on.
What you need to do next is copy the index.php and path.php files from your existing EE install to your new subdomain. Once you’ve done that open the subdomain’s new path.php in your text-editor, and change the ‘pv_site_version’ variable value from ‘full’ to ‘iphone’.
$global_vars['pv_site_version'] = 'iphone';At the top of your copied path.php you also need to alter the $system_path variable value to point to your existing EE installation’s system folder. Currently it will say something like this:
$system_path = "./system/";You’ll need to alter that value so it still points to the same system folder. It might be something like this:
$system_path = "/var/www/html/system/";We now have two versions of the same website!
If you load your subdomain in your web browser now you’ll see your existing website (how perfectly images and CSS display may depend on whether you’re using absolute or relative paths on your templates). If you add the {pv_site_version} variable into one of your templates and view the output in your browser you’ll see that we do actually have two versions of the same website. One version outputs the word ‘full’ and the other version outputs the word ‘iphone’.
So how do we use this to serve different templates?
Lets say for example we have a template group called ‘home’ and this group’s index template is used for our website’s homepage. We want to create two different versions of this index template, one for our full version and another for our iphone version. Once you’ve done this you may have 3 templates that look like this:
- home/index
- home/_full_index
- home/_iphone_index
In the _full_index template add the HTML needed for the full version homepage, and in the _iphone_index template add the HTML needed for the iphone version. Then open the home/index template and add the following:
{embed="home/_{pv_site_version}_index"}As we know, our {pv_site_version} variable will output a different value depending on which version of the site you’re browsing and therefore, using the code above, the template that we embed will depend on that value.
And that’s pretty much the long and short of it. Depending on your requirements you may need to vary the method you use to choose which template is displayed. For example, sometimes you may have pages that exist on the full version of the site but not on the alternative. For those cases you might do something like this:
{if pv_site_version == "iphone"}
{redirect="404"}
{/if}
{if pv_site_version == "full"}
{embed="casestudies/_full_index"}
{/if}The above assumes you have a template called ‘casestudies/index’ which should appear on the full site but not on the iphone version. If you don’t want to use embeds you could just put the actual template code between the conditionals I suppose.
And that’s that. If you’re interested in some of the actual design decisions that were made in the process of creating our iPhone site stay tuned as Greg will be including the details as part of his “behind the scenes” series.
I hope I’ve sparked some ideas in you for how path variables can be used to create multiple versions of the same ExpressionEngine website.
Jamie Pittock published this at 18:35 on 17/06/09
