Just a follow up on the previous post. I updated the xslt to have a very generic approach to the iphone alternative page and wrapped it up in a package.

With the package you can have an iphone alternative page up in a couple of second. Just install the package and insert the javascript snippet into your master template. This works on every umbraco site so it doesn’t mather if you are using runway or just have a completely custom implementation.

Here’s a small demo:

What the package installs:

After installation you’ll need to specify wich fields will be used to display on the iphone pages (default this is set to bodytext and content). You can do this on the IPhone template, just look for the IPhoneContent macro and setup the displayFields parameter.

 <umbraco:Macro displayFields=”bodyText,content” Alias=”IPhoneContent” runat=”server”></umbraco:Macro>

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.

While working on the upcoming site for umlaut (umbraco solution provider run by fellow umbraco addict / MVP Dirk De Grave and me), I needed to add a blog section to the site.

And since umbraco makes it super easy to package up your work. I thought I would spend some time into resurrection the umbraco blog package.

So here you go, a blog package for umbraco 4.

Current Features:

• Posts with paging and filter on category
• Comments (custom usercontrol)
• Datefolder (using the eventmodel)
• Categories (using tag datatype)
• Archive (collapsable, only showing lastest months)
• Latest comments
• Blogroll (using related links)
• Rss Feed
• Gravatar

A small demo screencast:

Download package and sourcode on codeplex (also submitted this to the umbraco repo, so expect to see it there soon).