Releace of my own Umbraco based webpage.

For little bit more then the past month time I’ve been working on designing and developing my own webpage. For this task I’ve chosen Umbraco CMS engine, beacouse of it’s similarities with Sitecore, but allso because it is free to use. I’ve was pleasantly surprised on the helpfulness of the Umbraco community, and i like to contribute my knowledge to further Umbraco development by posting articles about it on my blog.

To differ my self from all the other mass-produced templated webpages outhere, I’ve designed and implemented my own look and feed for my webpage.
my webpage design
The main idea behind this webpage is to make a content driven webpage not a blog. I’ve written an article about how this webpage came to being and i am going to write further articles in the future on how i did it. More about the nuts and bolts of it all. (c: So sign up for an RSS feed, so you can keep up.

here are some highlights of the implementation.

  • youtube integration
  • Custom developed tag based article system
  • Lucene index search results
  • Tag and Related articles lists.
  • Umbraco based contact form(creates nodes in umbraco, so i can see a feed of all new items when logged in)

If you have any comment’s pleas tell me i wood like to hear your opinion.

My Sitecore 6 twitter module

For a couple of weeks ago I had fun making a twitter module for Sitecore 6.   The main goal of this module was to show of some of my skills as a Sitecore developer, and i want to share this with you (c:. Her are some of the highlights.

  1. Sitecore scheduled twitter updater task, that manages import of twits from a given Twitter user
  2. All twits are saved as Sitecore Items.
  3. All twits are displayed with a XSLT rendering.
  4. Download the package and the source files(at the end of the article)

Short description of the Sitecore Setup.

The Sitecore Scheduled task is setup to call the twitter manager webform witch gets all new twits from a twitter account which is defined by name in Sitecore. Here you can see it running on my machine
The webform called by the Sitecore scheduled task stores all the new twits as Items in the master database and publishes them to web database. These items are purely meant as data items,  so they have no renderings or layout attached to their template.  All the twit items are placed under the “global” folder item so they can be separated from all the other nondata items like my Twitter page item(described below).

An example off twits items generated by my twitter manager. Every Item is named so it will allays have a unique name.

Twitter manager webform called by the Sitecore, gets it’s twitter username from the Twitter page item, which in my example can be found under the Home root item.

Here you can see the twitter item based on the TwitterManagerPage template. Items based on this template are meant to display all twits from a given user in this case me (c:

Items based on the TwitterManagerPage template has its own icon and device setup.  So they can be used to show a list of twits items stored within the sitecore in the front-end.

Here you can see the setup of device for the TwitterManagerPage template.

To display a list of twits, I’ve made a simple layout with a placeholder, that in my case  is used to display a rendering, which renders all the twit items in the global folder as a sorted list.

her you can see the layout and rendering associated with twitter manager.

I like to keep my things neat so i’ve added a TwitterManager folder to layouts rendering and templates folders (c:
If you want to try this twitter module you can download the package that i have made here.  Remember to read the readme file which explaines in further detail the content of the pakadge and the install procidure.

When the twitter module is installed and up  runing on your Sitecore solution, you should be able to se a list with twitter entries like this one (c:

Download

TwitterManager Package[33kb],   TwitterManager source code [3mb]

if you have any questions to the source code or the description above, fill free and ask (c:

How XSLT macro can be used inside an umbraco richtext editor

I’ve been trying to make a simple XSLT macro, that can be used from the macro dropdown in Umbraco rich text editor. And this has proved somewhat more interesting that i have anticipated.

Making macroes in Umbraco is pretty simple and strait forward, just go under Development in Seactions and right click “XSLT files” folder in the tree menu. Choose create from the menu and type in the name of the XSLT, press ok and you are in business. If you haven’t unchecked Create macro, you’ll find your macro in the “Macros” folder, under the same name as your XSLT. Easy as eating pancakes right.. (c:

So her’s where the fun begins ,.. to make this usable from the reachtext editor, you must check the “Use in editor” chekerbox under “macro properties” tab. This is the easy setup part.

You can use your XSLT macro as it is in your .Net code by calling it like this

<umbraco:Item field="macroNameHere" runat="server"></umbraco:Item>

but here is the dangerous bit,.. If you are reading it in through XSLT,  from your richtext field,  like this

<xsl:value-of select="$currentPage/data[@alias = 'bodyText']" />

the Macro will never be rendered and the only thing you will get is this bit of code rendered as common text, Bummer )c:

<?UMBRACO_MACRO  macroAlias="macroNameHere" />

Now befour you will start tearing hair from your head, this is what you could do,.. (c:

<xsl:variable name="content" select="$currentPage/data[@alias='bodyText']"/>
<xsl:value-of select="umbraco.library:RenderMacroContent($content, $currentPage/@id)" disable-output-escaping="yes"/>

By using the RenderMacroContent you are forcing umbraco to render your macro which is allready represented by its tag in the reachtext field.

another apprach is to use the folowing code snipped witch will enchure to render our XSLT Macro automatically

<xsl:value-of select="umbraco.library:Item($currentPage/@id,'bodytext')" />

It’s less code compared to the other method, and as another small bonus the Item-extension makes sure that you can edit the content i canvas-mode as well. That option is normally not possible when rendering the content through XSLT  (c:

happy days,..

XSLT bug, xslt removes html tags by it self

And this is a fact,.. I often use  HTML  when i make my renderings for Sitecore.  If yore not care-full,.. you can end up with a site which is not W3C compliant or even worse if it messes up your design,..

So her’s the problem,. if you type something like this in your XSLT
<div class=”separator”></div>

XSLT will only render the start tag, like so
<div class=”separator” >
Bummer,..

the only solution for this is to place some kind of content inside your empty tag
like a white space,.. But be careful to put &nbsp; inside your XSLT it will result in error. Use &#160 ; in stead (c:

happy coding

EDIT:
Another solution for this was proposed by Richard Willis, thanx body
change your <xsl:output method=”xml“>  to <xsl:output method=”html“>
that will instruct the render to format your output like HTML, like we want to..

How to get image src from an Image field

I was wondering how to get at src atribute of an Image field in Sitecore,.. her’s an exsample of what data you can find in the Image field..

<image showineditor=”1″ mediaid=”{6WB581DF-395F-400B-A8F2-98690D18AD10}” mediapath=”/Images/yourImage” src=”~/media/Images/yourImage.ashx” />

so if you do a xsl value-of you’ll get this in stead of the image src,.. and that is just not what i wanted ,.. so to solve this you can do folowing

<xsl:value-of select=”sc:fld(‘imageFieldName’, . , ‘src’ )”/>

and thats it (c:

How to populate dropdown with numbered values like years

Dude,.. I was playing arund with some xsl and was wondering how can you populate a dropdown menu with xsl,.. well it is no biggy,. this is how i did it ,..

first we have to calculate the number span lets say from this year to  50 years back ,..  with a recurcive template. Something like this:

<xsl:template name="yearList">
  <xsl:param name="year" />
  <xsl:variable name="lastYear" select="sc:year() - 50" />

  <option><xsl:value-of select="$year"/></option>

  <xsl:if test="$lastYear &lt; $year"><br />
    <xsl:call-template name="yearList"><br />
      <xsl:with-param name="year" select="$year - 1"/>
    </xsl:call-template>
  </xsl:if>
</xsl:template>

now we have to call the template with initial parameters.


<select>
  <xsl:call-template name="yearList">
    <xsl:with-param name="year">2009</xsl:with-param>
  </xsl:call-template>
</select>

thats it ,.. (c:

Split pipe separated string width XSLT ,..

Split pipe separated
string width XSL ,..

 

Ohh,. Boy that’s
the thing ,.. XSL does not include any method for this kind string operation ,..
So how would you solve getting items from a pipe separated string in sitecore,..
a pipe separated string looks something like this ,.. {Q2DCC7A2-DBB3-4A5F-BA84-56DL63C1C77F}|{DA493AD7-FD18-41AC-B14C-419D15AD101A}
so this is what I did and it works, I made a recursive iterator for this string.

 

<xsl:template name="split">

 

<xsl:param name="list" />

<xsl:variable name="newlist" select="concat(normalize-space($list), ' ')" />

<xsl:variable name="first" select="substring-before($newlist, '|')" />

<xsl:variable name="remaining" select="substring-after($newlist, '|')" />

 

<xsl:if test="$first = ''">


<xsl:value-of select="$newlist" /> Do your stuff …

</xsl:if>

<xsl:if test="$first != ''">


<xsl:value-of select="$first" /> Do your stuff …

</xsl:if>

 

<xsl:if test="$remaining">

<xsl:call-template name="split">

<xsl:with-param name="list" select="$remaining" />

</xsl:call-template>

 

</xsl:if>

</xsl:template>

 

Get your list and
you are done ,..

 

<xsl:call-template
name="split">

<xsl:with-param name="list" select="$LatestGUIDs"></xsl:with-param>

</xsl:call-template>

 

 

 

So this is the funny
part ,.. all of this can be done in a matter og seconds by using sc:Split(string,
XPathNodeIterator) , where string is a field name(which holds the pipe separated
string) and XPathNodeIterator is your node ,..

 

<xsl:for-each
select="sc:Split(‘field name ',.)">

Do your stuff…

</xsl:for-each>