News - showing pictures and defining the number of items
Hi,
I am setting up a news system for a news site, and i have the structure in place, and i can make a list to show the news.
However, i have run into a couple of problems:
1. Showing only the 4 newest news articles 2. Showing every second news article photo differently (1st photo floated left, 2nd photo floated right, 3rd photo floated left etc.)
I have tried following the "Creating a news list" video on umbraco.org, with regards to my question no. 1 - but can seem to get it to work.
My Xslt looks like this - and i have set up a parameter in the macro with an alias of maxItems, which on my template is set to 4 - just like shown in the video mentioned above.
<!-- ============================================================= For Each child node of the currentpage ============================================================= --> <xsl:for-each select="$currentPage/descendant-or-self::node [@level=$level]/node [string(data [@alias='umbracoNaviHide']) != '1']">
Dirk: I should have seen that - you know, when you just stare blind at something! But thanks a bunch, of course it works like a charm now. As regards the mod operator, i'm not good enough at Xslt to really get going on this - would appreciate help, if its not extremily difficult to help out with. The Xslt i wrote before, was a mixture of trial and error, and a good deal of Warren's Creative Website starter, because i'm still learning this.
Ove: That sounds interesting, could you elaborate? I'm not that good at Xslt or for that matter jQuery.
I'd go with Dirk's suggestion on the xslt, as it will work without javascript turned on. Dirk's snippet is exactly what you need, so e.g. if you had a list of items and wanted every second item to have a class of "alt"
<xsl:param name="currentPage"/> <xsl:variable name="maxItems" select="/macro/maxItems"/> <xsl:param name="MaxNoChars" select="120" /> <!-- NUMBER OF SIGNS TO SHOW IN THE SUMMARY --> <xsl:variable name="level" select="5"/> <!-- CHOOSING THE LEVELS IT SHOULD ITERATE - HOW DEEP --> <xsl:template match="/">
<!-- ============================================================= For Each child node of the currentpage ============================================================= --> <xsl:for-each select="$currentPage/descendant-or-self::node [@level=$level]/node [string(data [@alias='umbracoNaviHide']) != '1']">
<!-- THE IF, WILL TEST HOW MANY ITEMS TO SHOW --> <xsl:if test="position() <= $maxItems">
<!-- MAKING SURE EACH SECOND PHOTO IS FLOATED --> <li> <xsl:if test="position() mod 2 = 1"> <xsl:attribute name="class">photofloat</xsl:attribute> </xsl:if> <!-- THE PHOTO FOR EACH ARTICLE --> <div id="newsPhoto"> <img src="{data [@alias ='articlePhoto']}" alt="{@nodeName}"/> </div> </li>
<li> <!-- MAKING SURE EACH SECOND SUMMARY IS FLOATED --> <xsl:if test="position() mod 2 = 1"> <xsl:attribute name="class">headlinefloat</xsl:attribute> </xsl:if>
<!-- THIS IS THE HEADLINE OF THE NEWS ARTICLE --> <div id="newsHeadline"> <a href="{umbraco.library:NiceUrl(@id)}"> <xsl:value-of select="@nodeName" /> </a> </div>
<!-- SHOWING THE DATE OF THE NEWS ARTICLE --> <div id="newsDate">Published on <xsl:value-of select="umbraco.library:FormatDateTime(data [@alias='eventDate'], 'dd.MM.yy')"/></div>
<!-- SHOWING THE NEWS ARTICLE SUMMARY TEXT - NUMBER OF CHARACTERS IS SET AT THE TOP --> <div id="newsSummary"> <xsl:value-of select="umbraco.library:TruncateString(umbraco.library:StripHtml(data [@alias = 'bodyText']), $MaxNoChars, '...')" /> </div> </li> </xsl:if> </xsl:for-each> </xsl:template> </xsl:stylesheet>
A big THANKS to both Dirk and Dan - i gave the solution to dan, as this helped me the last way onto the final code!
News - showing pictures and defining the number of items
Hi,
I am setting up a news system for a news site, and i have the structure in place, and i can make a list to show the news.
However, i have run into a couple of problems:
1. Showing only the 4 newest news articles
2. Showing every second news article photo differently (1st photo floated left, 2nd photo floated right, 3rd photo floated left etc.)
I have tried following the "Creating a news list" video on umbraco.org, with regards to my question no. 1 - but can seem to get it to work.
My Xslt looks like this - and i have set up a parameter in the macro with an alias of maxItems, which on my template is set to 4 - just like shown in the video mentioned above.
I hope anyone can steer me in the right direction.
Thanks in advance,
hundebol
Just a couple of things I noticed:
Have to use parameter syntax correctly
should be
And to find out whether to float left or right, use xslt math function mod (here's an overview of all math functions)
And for sorting, take a look at this, as you might need to include datatype info when doing the sort.
Cheers,
/Dirk
Or you can use jQuery to apply a "odd" class to every second element.
Then you can use simple CSS to float the images.
Hi,
Dirk: I should have seen that - you know, when you just stare blind at something! But thanks a bunch, of course it works like a charm now.
As regards the mod operator, i'm not good enough at Xslt to really get going on this - would appreciate help, if its not extremily difficult to help out with. The Xslt i wrote before, was a mixture of trial and error, and a good deal of Warren's Creative Website starter, because i'm still learning this.
Ove: That sounds interesting, could you elaborate? I'm not that good at Xslt or for that matter jQuery.
Thanks for all the help i can get.
regards,
hundebol
I'd go with Dirk's suggestion on the xslt, as it will work without javascript turned on. Dirk's snippet is exactly what you need, so e.g. if you had a list of items and wanted every second item to have a class of "alt"
would give
(untested code!)
Dan
I found a solution, but did not ever post it here! But here it goes:
A big THANKS to both Dirk and Dan - i gave the solution to dan, as this helped me the last way onto the final code!
Best regards,
Brian
This is super helpful, it pointed me in the right direction to truncate news descriptions for an RSS Feed.
Thank you!
Amir
is working on a reply...