This is the second part of the tutorial on how to feed an image slider from a picture library using Content Query Web Part. In the first part we’ve covered the slider setup, how to create a custom content type for your picture library and how to link the CQWP to the picture library to pull only what the slider needs.
At this time you should be able to see all the images from the picture library displayed in the “MySlider” web part. That is because there is no markup associated with the slider.
So, for this to happen, we need to modify ItemStyle.xsl and ContentQueryMain.xsl files.
Open your site in SharePoint Designer and on the left navigation click on “All Files” and then “Style Library” next click on “XSL Style Sheet”.
Right-click on ContentQueryMain.xsl and Check Out >> “Edit File in Advanced Mode”. On line 35, right after
<xsl:variable name="EndListItem" select="string('</li>')" /> |
Copy & Paste this code:
<!-- Start Slider Variable --> <xsl:variable name="slideStart"> <![CDATA[<div class="leftPromo"><div class="flexslider"><ul class="slides">]]> </xsl:variable> <xsl:variable name="slideEnd"> <![CDATA[</ul></div></div>]]> </xsl:variable> <!-- End Slider Variable --> |
Next, look for line 103, and replace the code
<xsl:value-of disable-output-escaping="yes" select="$BeginColumn" /> |
with the following:
<!-- Start Customized Slider --> <xsl:choose> <xsl:when test="@Style='HomePage-Slider'"> <xsl:value-of disable-output-escaping="yes" select="$slideStart" /> </xsl:when> <xsl:otherwise> <!-- original code --> <xsl:value-of disable-output-escaping="yes" select="$BeginColumn" /> </xsl:otherwise> </xsl:choose> <!-- End Customized Slider --> |
Next, go to line 153, and replace the code
<xsl:value-of disable-output-escaping="yes" select="$EndColumn" /> |
with the following:
<!-- Start Customized Slider --> <xsl:choose> <xsl:when test="@Style='HomePage-Slider'"> <xsl:value-of disable-output-escaping="yes" select="$slideEnd" /> </xsl:when> <xsl:otherwise> <!-- original code --> <xsl:value-of disable-output-escaping="yes" select="$EndColumn" /> </xsl:otherwise> </xsl:choose> <!-- End Customized Slider --> |
Next, go to line 176, and replace the code
<xsl:value-of disable-output-escaping="yes" select="$BeginListItem" /> |
with the following:
<!-- Start Customized Slider --> <xsl:choose> <xsl:when test="@Style='HomePage-Slider'" /> <xsl:otherwise> <!-- original code --> <xsl:value-of disable-output-escaping="yes" select="$BeginListItem" /> </xsl:otherwise> </xsl:choose> <!-- End Customized Slider --> |
Next, go to line 206, and replace the code
<xsl:value-of disable-output-escaping="yes" select="$EndListItem" /> |
with the following:
<!-- Start Customized Slider --> <xsl:choose> <xsl:when test="@Style='HomePage-Slider'" /> <xsl:otherwise> <!-- original code --> <xsl:value-of disable-output-escaping="yes" select="$EndListItem" /> </xsl:otherwise> </xsl:choose> <!-- End Customized Slider --> |
Check In ContentQueryMain.xsl and Publish a major version and the click OK.
Now, let’s modify ItemStyle.xsl. Right click on ItemStyle.xsl and Check Out >> “Edit File in Advanced Mode”. Scroll all the way to bottom and right after line 644 or the last closing tag for xsl:template, just before the closing tag for xsl:stylesheet, add the following code:
<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="DisplayTitle"><xsl:call-template name="OuterTemplate.GetTitle"><xsl:with-param name="Title" select="@Title"/><xsl:with-param name="UrlColumnName" select="'LinkUrl'"/></xsl:call-template></xsl:variable> <li> <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="{@ImageUrlAltText}"> <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> </img> </a> <p class="flex-caption"> <xsl:call-template name="OuterTemplate.CallPresenceStatusIconTemplate"/> <xsl:value-of select="$DisplayTitle"/> </p> </li> </xsl:template> |
Go back to the homepage and edit the page. Next, edit the slider web part, click on Presentation and change the “Item style” to “HomePage-Slider” and click OK.
Now your homepage slider should pull the content automatically from CQWP.
If you didn’t upgrade your SharePoint 2010 server to SP1, anonymous users might get a Correlation ID error for the slider: “Unable to display this Web Part”.
To fix this issue you have two choices: Update your SharePoint 2010 or follow these simple steps.
Go to homepage, edit the page and on the slider web part settings click Export.
Go to MySlider.webpart you just download, and open it in NotePad. Look for CommonViewFields property and replace it with the following:
<property name="CommonViewFields" type="string">DocumentIconImageUrl;OnClickForWebRendering</property> |
Back on the homepage, delete the original slider web part. (Yes, delete it). Go to Site Settings >> Galleries >> and click on “Web parts”. On the web parts page click on the Documents tab under “Library Tool” and click on “Upload Document” to upload the slider web part you just modified.
Go back to the homepage and add the slider web part back to the page. And that’s all.
You should now have an image slider fed automatically from a custom Content Query Web Part.
Hi Luis,
Don’t bother with description issue. Title works better!
Is there a way to add Play and Pause buttons on the slider?
Again THANKS ALOT!
Ad
hi
this is very good article. but in the Fields to display section give this error:
The site or list column “Slider-Image-Link” does not exist or is not valid.
What is the problem?
can any one help me?
thank you.
excuse me this error:
The site or list column “Slide-Image-Link” does not exist or is not valid.
thank u again..
Loading ...
Hi Luis,
Thanks alot for sharing this!
One thing I missed or not working properly is the Slide-Image-Link shows in the caption not the description.
Any idea?
Ad