homepage slider image path xpath xslt help - XSLT

Paul Griffiths 370 posts 1021 karma points

Jun 20, 2014 @ 13:24

Homepage slider image path XPath, xslt help

Hi all Im trying to create a dynamic slider on my home page using the following slider http://www.slidesjs.com/. The slider identifies each slide using an number id so I have the following xslt which is rendering the slider heading and the slider teaser text but im struggling to think of the path that would be required to target the images (highlighted bold). I would love to do this dynamic so the user can add as many sildes as they want but i think the jquery i have decided to use is limited becuaus eit targets id's.

Could someone please help me? My content tree is the same as the one used in uMedia and im using umbrac v6.2.0.

Content
  Home
    About
  Slider
    SliderContent

<xsl:output method="xml" omit-xml-declaration="yes"/>

<xsl:param name="currentPage"/>

<xsl:template match="/">

<!-- start writing XSLT -->

    <xsl:variable name="sliderNode" select="$currentPage/parent::*/child::*[@level=1]"/>
    <section class="slider-container"> 
<!--<h2 class="hidden">slider container heading</h2>-->
    <article id="slider-content1">
        <h3><xsl:value-of select="$sliderNode/child::SlideContent/slideHeading"/></h3>
        <p><xsl:value-of select="$sliderNode/child::SlideContent/teaserText"/> </p>
    </article>
    <article id="slider-content2">
      <h3>Weddings</h3>
      <p>What better way to arrive in luxury style for this special wedding occasion than by chauffeur driven . As always, your Wedding Chauffeurs are here to help make that day a very memorable one.</p>
    </article>
    <article id="slider-content3">
      <h3>Away Days</h3>
      <p>Whether you wish to travel to Chamonix via a private or shared airport transfer, need in-resort transfers or want to plan a day away trip, let us take care of your travel requirements.</p>
    </article>
**<xsl:if test="current()/umbracoMediaFile != ''">
    <xsl:variable name="umbracoMediaFile" select="umbraco.library:GetMedia(current()/umbracoMediaFile, 'false')" />
                <div id="slides">
                  <img src="{$umbracoMediaFile/umbracoFile}" width="500" height="332" alt="Slider Image"/>
                </div>
  </xsl:if>**

 </section>
</xsl:template>

</xsl:stylesheet>

Cheers paul

Copy Link

Dennis Aaen 4500 posts 18255 karma points admin hq c-trib

Jun 22, 2014 @ 19:50

Hi Paul

As I see you content structure, your slider. is side by side with the homepage and underneed your slider you have the content for your slider. If I am right on your content structure, I think that one way you could do it, is by uing the library method called GetXmlNodeById, by usig this method you can get XML from a specific node.The documentation for using the GetXmlNodeById can you find here: http://our.umbraco.org/wiki/reference/umbracolibrary/getxmlnodebyid

I your case you will have to get the XML from the slider an it´s children. I think something like this will get you a good start. The documentation for the GetMedia library can be found here: http://our.umbraco.org/wiki/reference/umbracolibrary/getmedia

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
<xsl:stylesheet 
    version="1.0" 
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
    xmlns:msxml="urn:schemas-microsoft-com:xslt" 
    xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets" xmlns:Examine="urn:Examine" xmlns:umbraco.contour="urn:umbraco.contour" 
    exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets Examine umbraco.contour ">


<xsl:output method="xml" omit-xml-declaration="yes" />

<xsl:param name="currentPage"/>

    <xsl:variable name="locationsRoot" select="umbraco.library:GetXmlNodeById(1243)" />
    
    <section class="slider-container">
    <!--<h2 class="hidden">slider container heading</h2>-->
        <xsl:for-each select="$locationsRoot/*[@isDoc]">
            <article id="slider-content{position()}">
             <h3><xsl:value-of select="slideHeading"/></h3>
             <p><xsl:value-of select="teaserText"/> </p>
            </article>
            <xsl:if test="./umbracoMediaFile != ''">
            <xsl:variable name="umbracoMediaFile" select="umbraco.library:GetMedia(./umbracoMediaFile, 'false')" />
            <xsl:variable name="altText" select="umbraco.library:GetMedia(./umbracoMediaFile, 'false')/@nodeName"/>
                <div id="slides">
                  <img src="{$umbracoMediaFile/umbracoFile}" width="500" height="332" alt="$altText"/>
                </div>
            </xsl:if>
      
        </xsl:for-each>
    </section>
</xsl:template>

</xsl:stylesheet>

Remember to update the Id, so it fetch your case, you will have to enter the id for node called slider.

Hope this helps you in the right direction

/Dennis

Copy Link

Paul Griffiths 370 posts 1021 karma points

Jun 25, 2014 @ 11:47

Hi Dennis,

Thanks for taking the time out to respond to my query. You are spot on with how you are understanding my content structure :).

I will try working with your solution and get back to you when I have some Joy!

Thanks again mate

Paul

Copy Link

is working on a reply...

Flag this post as spam?

Homepage slider image path XPath, xslt help