Feed Image Slider from CQWP – Part 2
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;OnClickForWebRenderingproperty> |
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.
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
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..
SP 2010 , our school policy won’t let us use responsive. All went well until the end, I get all slider parts and dots for the UL.
I have gone over step by step four times still no luck. Is responsive required, or can you re-code for use w/o?
Thanks,
Greg, of course you can force the slider not to be responsive and to stay at the same width/height using the CSS.
I meant to not using the ‘responsive’ theme, it appears to be required style for this to work. We have to have OOB SP 2010 (weeel mostly – grin).
Hi Luis,
Thanks for both part 1 and 2 tutorials. Question on part 2: if I will use multiple Content Query on the site, will modifying those xsl files affect all? Or it can be limited to home page slider only?
Thanks.
MTG
MTG, it will only affect the CQWP you chose.
I have gone through all the directions but my slider is still showing the stacked images (all images are showing). I noticed some of the line numbers on this (2nd page) did not match up exactly with my files, can I see the entire pages’ code (ItemStyle.xsl and ContentQueryMain.xsl) so I can determine if I have mis-placed some of the code snippets? thanks!
Actually where we need to add FlexSlider Plug-Ins? Im not getting idea.Please do help me.
Ramaya, if you would have followed the How To documentation for Responsive theme you would be fine:
“Place responsive folder under your site root. Your site root is located here: C:/inetpub/wwwroot/wss/VirtualDirectories/80 (or whatever port you’re using for the site). Make sure Network and Network Service accounts have read permissions for this folder.”
First of all, thanks for this wonderful article. I was trying to incorporate the steps above in SharePoint 2013. Despite going through all the steps, all my images are still stacked up rather than as a slider. Could you please give us your thoughts on this. Many Thanks!
I’m using SharePoint 2013 as well. We’re not using the responsive theme either. We’re trying to use just the Flexslider option. Do the Flexslider files need to sit at the Site Root? Please advise…seems like many people have posted the same question without a sufficient answer.
I am also having the problem of all the images showing. I am not using the Responsive theme ( per company rules ). I have been through the instructions and code several times and everything appears correct to me. I am not a developer but am pretty good at following instructions and I am at a loss. I know this is a fairly old post, but any help would certainly be appreciated!
Thanks!
hi i cannot see the style library nor the content query.. where can i find it.. or where can i use the codes that you give.. please help..
Any way to add thumbnails with the same caption under the slider that navigates the slides? so basically same slider image listed under as a box with a thumbnail of the image and a space for the same caption?
This is great. Thanks.
I got this working on SharePoint 2013 using the Flickity responsive banner (http://flickity.metafizzy.co)
I just modified that Item code snippet to match what classes were required for Flickity. Also the [CDATA snippet at the start.
Thanks for sharing.