I'm coming up with a huuuuge subject : rendering an image Slider in a CQWP (SP2013, but Standard Edition, so no CSWP)

So, i'm trying to create my "HomePage Slider" item template. I'm using FlexSlider to do so, with help from pena informatika and some other tutorials.

What i want to do : Create a slider wich displays the main Image (a "Image with publication..." column), and in the caption, display the Title (with a link to the page), the Sub-Title (a custom Text field). AND the caption has to be styled with a background image, which is a custom "image with publication..." column called Pictogramme.

So i've got several questions :

1 - How to say "hey, caption, get the Pictogramme to be your background image!" ? You can see in my code <div class="flex-caption" style="background-image:url({@SafePictoUrl})"> : that does not work.

2 - How can i have my main image displayed? When looking for the dom, my image's src is empty. so my <img src="{$SafeImageUrl}"/> does not work. Is there any problem rendering TWO images in the same item?

3 - How to display the title of my item in Image title? The question says it itself.

4 - How to modify the rendition id of the pictures? I would like to modify the rendition ids of the background image AND the main image. How can i achieve this in ItemStyle.xsl?

Here is my Item template (in ItemStyle.xsl) :

<xsl:template name="HomePage-Slider" match="Row[@Style='HomePage-Slider']" mode="itemstyle">

    <xsl:variable name="SafeLinkUrl"><xsl:call-template name="OuterTemplate.GetSafeLink"><xsl:with-param name="UrlColumnName" select="'LinkUrl'"/></xsl:call-template></xsl:variable>
    <xsl:variable name="SafeImageUrl"><xsl:call-template name="OuterTemplate.GetSafeStaticUrl"><xsl:with-param name="UrlColumnName" select="'ImageUrl'"/></xsl:call-template></xsl:variable>
    <xsl:variable name="DisplaySstitre"><xsl:value-of select="@Sous-titre"/></xsl:variable>
    <xsl:variable name="SafePictoUrl"><xsl:value-of select="@Pictogramme"/></xsl:variable>
    <xsl:variable name="Titre"><xsl:value-of select="@Title"/></xsl:variable>

        <a href="{$SafeLinkUrl}">
            <xsl:if test="$ItemsHaveStreams = 'True'"><xsl:attribute name="onclick"><xsl:value-of select="@OnClickForWebRendering"/></xsl:attribute></xsl:if>
            <xsl:if test="$ItemsHaveStreams != 'True' and @OpenInNewWindow = 'True'"><xsl:attribute name="onclick"><xsl:value-of disable-output-escaping="yes" select="$OnClickTargetAttribute"/></xsl:attribute></xsl:if>
            <img src="{$SafeImageUrl}" title="{@Titre}">
                <xsl:if test="$ImageWidth != ''"><xsl:attribute name="width"><xsl:value-of select="$ImageWidth" /></xsl:attribute></xsl:if>
                <xsl:if test="$ImageHeight != ''"><xsl:attribute name="height"><xsl:value-of select="$ImageHeight" /></xsl:attribute></xsl:if>
        <div class="flex-caption" style="background-image:url({@SafePictoUrl})">
            <xsl:call-template name="OuterTemplate.CallPresenceStatusIconTemplate"/>
            <p><b><xsl:value-of select="$Titre"/></b></p>
            <p><xsl:value-of select="$DisplaySstitre" disable-output-escaping="yes"/></p>
        <p><xsl:value-of select="$SafePictoUrl" disable-output-escaping="yes"/></p>


Thanks a lot everybody!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.