Nibble

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>

 

umbracoiphone1 

umbracoiphone2

umbracoiphone3

And that’s it, it should be in the next version of the blog package.

10 Comments so far

  1. Hartvig on February 15th, 2009

    Love it. In a coming core iteration we’ll support alternative masters by headers, so you could do this without javascript. Even better!

  2. Dan on February 19th, 2009

    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

  3. zarpot on March 1st, 2009

    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

  4. Tim Geyssens on March 1st, 2009

    @Zarpot, the package is for umbraco v4.

  5. zarpot on March 1st, 2009

    Can you help me with any available or easy way to setup a iphone navigation in umbraco v3?

  6. Tim Geyssens on March 1st, 2009

    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

  7. zarpot on March 1st, 2009
  8. carlos on February 3rd, 2011

    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.

  9. nepaxornend on May 25th, 2012

    Швейцарские Часы Ковер:
    Наручные Часы Какие В Моде Часы Наручные Смешные [url=http://swiiss-chasi.phone-price.com/post28.html] Cartier Аромат[/url] - Самые Дорогие Женские Часы Мире . Часы Наручные Швейцарские Оригинал .Часы Guess Купить В Москве. Breitling Genuine Leather.

  10. When I initially commented I clicked the “Notify me when new comments are added” checkbox and now each time
    a comment is added I get three emails with the same comment.
    Is there any way you can remove people from that service?
    Cheers!

    My web page - Hay Day Cheats|hay day astuce|Hay Day Hack|

Leave a Reply