Here is a JSfiddle of the working solution including CSS ( for anyone that wants to reuse: http://jsfiddle.net6j4cT/30/ )
My scenario: A user creates a "Featured Article" and the nav & feature image is automatically populated which is good however...
There will be more than "4" featured articles created within the umbraco UI but the slider must only display 4 featured articles. The 4 featured articles will be "selected" on each "article" to populate the slider ( if that makes sense ).
I had the idea of using an if statement like this for each nav item and each featured image:
If I understand you have everything working but want to make sure you limit your XSLT to only showing 4 articles.
The best way is probably to use Multi Node Tree Picker from uComponents (or in the core if you're using v4.8+). With this you can give your editors a nice interface to "pick" articles and can also set minimum and maximum requirements (ie min 4 max 4).
You can also add a limit in your XSLT, but I think the above is the best solution from a editors perspective.
Yes, if you're using 4.7.2 just install the uComponents package to use MNTP. Some of the uComponents datatypes were migrated into the core in v4.8 which is why I mentioned that.
Custom Jquery Slider
Hi Guys,
I have a custom jquery slider which is populated using XSLT - Here is my code for you guys to have a look and feel free to reuse:
<div id="news-feature-wrap" class="clearfix">
<ul id="news-feature-img-wrap">
<xsl:for-each select="$currentPage/FeaturedArticle">
<li>
<xsl:if test="featuredArticleImage > 0">
<xsl:variable name="img" select="umbraco.library:GetMedia(featuredArticleImage, 0)" />
<xsl:variable name="imgPath" select="concat(substring-before($img/umbracoFile,'.'), '.jpg')" />
<img class="person-image" src="/ImageGen.ashx?image={$imgPath}&width=550&" alt="{@nodeName}" />
</xsl:if>
<div class="news-item-brief">
<span>
<xsl:value-of select="featuredBrief" />
</span>
<a href="{umbraco.library:NiceUrl(@id)}">Read More</a>
</div>
</li>
</xsl:for-each>
</ul>
<ul id="news-items">
<xsl:for-each select="$currentPage/FeaturedArticle">
<li>
<a href="#">
<xsl:value-of select="@nodeName" />
</a>
</li>
</xsl:for-each>
</ul>
</div>
Here is a JSfiddle of the working solution including CSS ( for anyone that wants to reuse: http://jsfiddle.net6j4cT/30/ )
My scenario: A user creates a "Featured Article" and the nav & feature image is automatically populated which is good however...
There will be more than "4" featured articles created within the umbraco UI but the slider must only display 4 featured articles. The 4 featured articles will be "selected" on each "article" to populate the slider ( if that makes sense ).
I had the idea of using an if statement like this for each nav item and each featured image:
<xsl:if test="$currentPage/showInNewsSlider = '1'">
I added the correct property to the corresponding doc type "featured article" and came into some issues.
I've got the feeling I'm on the right track, just having a hard time getting the code to function!
Any ideas?
Jordy
Here is the correct js fiddle link: here
Can anyone help me on this?
Hi Jordy,
If I understand you have everything working but want to make sure you limit your XSLT to only showing 4 articles.
The best way is probably to use Multi Node Tree Picker from uComponents (or in the core if you're using v4.8+). With this you can give your editors a nice interface to "pick" articles and can also set minimum and maximum requirements (ie min 4 max 4).
You can also add a limit in your XSLT, but I think the above is the best solution from a editors perspective.
-Tom
Hi Tom,
Thanks for your post - really appreciate it!
Will the solution you've provided accommodate umbraco version 4.7.2? That is the current version the site is running.
If not - would you have an alternative?
Yes, if you're using 4.7.2 just install the uComponents package to use MNTP. Some of the uComponents datatypes were migrated into the core in v4.8 which is why I mentioned that.
-Tom
is working on a reply...