Knowledgebase
This document contains guidelines on how to create a XML news feed within a <sitekit> site.
Firstly, you need to create a XSL file. The XSL file allows you to define how the news is to be layed out, which elements you want to display (picture, headline, etc.) and apply CSS formatting.
Once you have created your file you must send it to us at support@sitekit.net and we shall host it on one of our servers for you. XSL is a volatile language. Wrongly coded it has the ability to crash the server it is hosted on, so one of our technicians must go over it before uploading it to a server.
Breakdown of XSL and HTML
What follows is a breakdown of the XSL and HTML used on the HIE homepage.
Their are four primary elements to be displayed: The news headline, the article summary, the article picture and the 'Posted on' date. How these are used is up to you. You may wish to display all of them, as done by HIE, or you may wish to just show the headlines in a small box to the side of your website. The below is a breakdown to help you understand how these elements are seperated and layed out.
| Regular text | XSL code (for calling elements) |
| Light orange text | Essential XSL code |
| Regular bold text | HTML code (for the layout) |
| Blue bold | Editable elements (note all those preceeded by class=" are CSS calls) |
| Red bold | Comments/Instructions |
| Green text | Image call |
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html"/>
<xsl:template match="channel">
<div class="newsheader">Latest News</div> (This line defines the heading)
<br/>
<xsl:for-each select="item[position() <= 4]"> (This line defines how many news items will be displayed)
<table border="0" cellspacing="0" cellpadding="0" width="100%" class="newstable" summary="This Table contains latest news items">
<tr>
<td class="news-item-title" valign="top" width="100%" colspan="2">
<xsl:element name="a"> (This line opens the link to the news article)
<xsl:attribute name="href"> (This line allows the below (URL) line to be inserted)
<xsl:value-of select="link"/> (This line calls the URL of the full news article)
</xsl:attribute> (This line closes the URL)
<xsl:attribute name="target">_blank</xsl:attribute> (This line defines the target frame of the link)
<xsl:value-of select="title"/> (This line calls the news article title)
</xsl:element> (This line closes the link to the article)
</td>
</tr>
<tr valign="top">
<td width="1%" class="newspic"> (This line calls the class applied to the summary image)
<xsl:apply-templates select="enclosure"/> (This line calls script in green, below)
</td>
<td width="99%" class="newscontent"> (This line calls the class applied to the news article summary)
<xsl:value-of select="description"/> (This line calls the news article summary)
</td>
</tr>
<tr valign="top">
<td colspan="2">
<span class="posted">Posted on (This line defines the text that preceeds the date which the article was added, and the class applied to it)
<xsl:value-of select="pubDate"/> (This line calls the news article publish date)
</span>
</td>
</tr>
</table>
<br/>
<br/>
</xsl:for-each>
</xsl:template>
| (The below script calls the article image, linking it to the full article) | |
| <xsl:template match="enclosure"> <xsl:element name="a"> <xsl:attribute name="href"><xsl:value-of select="../link"/></xsl:attribute> <xsl:element name="img"> <xsl:attribute name="src"><xsl:value-of select="@url"/></xsl:attribute> <xsl:attribute name="border">0</xsl:attribute> <xsl:attribute name="alt"><xsl:value-of select="../title"/></xsl:attribute> </xsl:element> </xsl:element> </xsl:template> |
Opens the script Opens the link Defines the link destination Opens the image Defines the image source Defines the image border Defines the alt (mouse-over text) tag Closes the image tag Closes the link Closes the script |
</xsl:stylesheet>
Untouched code
This is the original, untouched code, with one change (so that upon clicking on the links to the news items they open in a new window). Use this alongside the above guidelines.
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html"/>
<xsl:template match="channel">
<div class="newsheader">Latest News</div>
<br/>
<xsl:for-each select="item[position() <= 4]">
<table border="0" cellspacing="0" cellpadding="0" width="100%" class="newstable" summary="This Table contains latest news items">
<tr>
<td class="news-item-title" valign="top" width="100%" colspan="2">
<xsl:element name="a">
<xsl:attribute name="href">
<xsl:value-of select="link"/>
</xsl:attribute>
<xsl:attribute name="target">_blank</xsl:attribute>
<xsl:value-of select="title"/>
</xsl:element>
</td>
</tr>
<tr valign="top">
<td width="1%" class="newspic">
<xsl:apply-templates select="enclosure"/>
</td>
<td width="99%" class="newscontent">
<xsl:value-of select="description"/>
</td>
</tr>
<tr valign="top">
<td colspan="2">
<span class="posted">Posted on
<xsl:value-of select="pubDate"/></span>
</td>
</tr>
</table>
<br/>
<br/>
</xsl:for-each>
</xsl:template>
<xsl:template match="enclosure">
<xsl:element name="a">
<xsl:attribute name="href"><xsl:value-of select="../link"/></xsl:attribute>
<xsl:element name="img">
<xsl:attribute name="src">
<xsl:value-of select="@url"/>
</xsl:attribute>
<xsl:attribute name="border">0</xsl:attribute>
<xsl:attribute name="alt">
<xsl:value-of select="../title"/>
</xsl:attribute>
</xsl:element>
</xsl:element>
</xsl:template>
</xsl:stylesheet>
Example
You may wish to keep the code as it is. In which case it shall be layed out as follows (note that this example is without CSS applied, so the formatting is not ideal. You can see an example with CSS formatting applied on the HIE Homepage):
Latest News
|
Shetland Renewable Energy Forum (SREF) has been awarded funding from Shetland Enterprise and Shetland Islands Council to employ IPA Energy Consulting to carry out a feasibility study for a Hydrogen Study Centre in Shetland |
Posted on Mon, 19 Jul 2004 00:00:00 GMT |
|
Shetland Enterprise has appointed a new deputy chief executive. Gail Mohamed took up the post on June 28th. |
|
Posted on Mon, 19 Jul 2004 00:00:00 GMT |
|