Alternative page for IPhone on your umbraco site
Since umbraco allows you to have full control over the output it’s dead simple to create an alternative page for IPhone on your umbraco site. I used this isite template (download) by Joe Hewitt (many others around like here and here) and had a page up in 20 minutes (for the blog package, it lists the posts and also features a search).
After importing the files from the isite template the first step is to create a new template (that will be our iphone page).
To redirect iphone visitors I used this javasscript snippet. My blog is located at /blog.aspx and the template is called iphone so I just call that page with the new template by using /blog/iphone.aspx (some info on alternative templates).
<script language=javascript>
if((navigator.userAgent.match(/iPhone/i))||
(navigator.userAgent.match(/iPod/i)))
{
document.location.href=‘/blog/iphone.aspx’;
}
</script>
On the template I replaced the static content from the isite and placed an xslt macro that will list all blog posts.
<ul id=“blog” title=“Umlaut.be” selected=“true”>
<xsl:for-each select=“$currentPage/ancestor-or-self::node [@nodeTypeAlias = ‘Blog’]//node [@nodeTypeAlias = ‘BlogPost’]”>
<xsl:sort select=“@createDate” order=“descending” />
<li><a href=“#{@id}”><xsl:value-of select=“@nodeName”/></a></li>
</xsl:for-each>
</ul>
<xsl:for-each select=“$currentPage/ancestor-or-self::node [@nodeTypeAlias = ‘Blog’]//node [@nodeTypeAlias = ‘BlogPost’]”>
<xsl:sort select=“@createDate” order=“descending” />
<div id=“{@id}” class=“panel” title=“Umlaut.be”>
<h2><xsl:value-of select=“@nodeName”/></h2>
<xsl:value-of select=“data [@alias = ‘bodyText’]” disable-output-escaping=“yes”/>
</div>
</xsl:for-each>
And that’s it, it should be in the next version of the blog package.
Love it. In a coming core iteration we’ll support alternative masters by headers, so you could do this without javascript. Even better!
Very nice!
We did this on http://www.yelladworks.com/en/iphone.aspx and it has been well recieved, using iui. Recently http://www.iwebkit.net/ has come to my attention, which seems to look a lot more polished but requires a bit more fiddling to intergrate into umbraco. I found with iui that we only had to come up with a few new small xslt sheets and templates and boom! iPhone site.
A followup post on adding ‘full screen mode’ when bookmarked, along with a 57px icon might help people add a bit of extra polish.
Take care,
Dan
I download the iphone package and it does not work. First of all the css file in your zip file is missing. Seconldy it did not created runway master template.
Will you please guide me how to install it on umbraco v3?
Thank a lot
zarpot
@Zarpot, the package is for umbraco v4.
Can you help me with any available or easy way to setup a iphone navigation in umbraco v3?
Did you try doing the steps in this blogpost ?
So first download the isite template and place the images , css , js in your v3 site.
Then create a new template and put the contents of the isite html page in there
Then create a new xslt with macro (download the package and take a look at the xslt file in there)
then replace the static content by the macro
thats how my template looks like but he page comes empty??
pleasehelp
Zainab Organization
Albums
Search
The Beatles
Belle & Sebastian
Crowded House
John Mayer
Zero 7
Abbey Road
Help!
Rubber Soul
Sgt. Pepper’s
White Album
Boy With The Arab Strap
Dear Catastrophe Waitress
The Life Pursuit
Crowded House
Temple of Low Men
Together Alone
Woodface
Continuum
Heavier Things
Room for Squares
The Garden
Simple Things
When it Falls
Song 1
Song 2
Song 3
Song 4
Song 5
Song 6
Song 7
Song 8
Song 9
Song 10
Song 11
If this weren’t just a demo, you might be hearing a song…
Search results go here…
here is the code
<!–
Iphone page
<!—->
Albums
Search
The Beatles
Belle & Sebastian
Crowded House
John Mayer
Zero 7
If this weren’t just a demo, you might be hearing a song…
Search results go here…
–>
I know this was written like 2 years ago, but is there a way to sent the person back to the normal site if they choose? The detection is great and all, but would like the user to have the ability to view the full site if they choose.
Швейцарские Часы Ковер:
Наручные Часы Какие В Моде Часы Наручные Смешные [url=http://swiiss-chasi.phone-price.com/post28.html] Cartier Аромат[/url] - Самые Дорогие Женские Часы Мире . Часы Наручные Швейцарские Оригинал .Часы Guess Купить В Москве. Breitling Genuine Leather.