Picture gallery with Galleria and Content Query Web part

by Robi 13. August 2012 09:56


Following E. Struyf 's Blog for making a picture gallery from the assets library:

I thought that it has to be a way to get pictures from picture gallery with the Content Query Web Part and modify the results so that it can work for the galleria.

So, the first step of course would be to download all the necessary files. To download files go to the galleria we page and extract the zip file. You can copy all files to the Style library, where I made the JS folder to save the jQuery library file, downloaded from the www.jQuery.com web site.

Galleria files


Download Galleria



Screen shot of the Style library\JS folder.

For the galleria to work, you will need:

  • Jquery library
  • Galleria.classic.css
  • Galleria.classic.min.js
  • Galleria-1.2.7.min.js
  • Classic-loader.gif
  • Classic-map.png.

XSL files

Next thing to do is to modify the ContentQueryMain.xsl and ItemStyle.xsl. In ContentQueryMain you need to modify the div in which pictures will be displayed. In order to do that just add the class gallery to the div id=''{concat('cbqwp',$ClientId)}''. You will specify the branding later on for the .gallery class.



In ItemStyle.xsl you need to add a new xsl:template, which will be used for rendering pictures in CQWP. Important part here is to change the variable SafeLinkUrl. So to get the full picture not just the picture thumbnail you need to select the LinkUrl column for the UrlColumnName.


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


    <xsl:variable name="SafeLinkUrl">

        <xsl:call-template name="OuterTemplate.GetSafeLink">

         <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>




    <img src="{@LinkUrl}"/>



Gallery page

Next thing to do is to create and modify the web part page where the gallery will be shown. Edit the file in advanced mode in SharePoint Designer 2010 and just after the PlaceHolderMain opening tag add the following code (modify reference to your script files if needed):

<link type="text/css" rel="stylesheet" href="../../Style Library/js/galleria.classic.css"/>

<script type="text/javascript" src="../../Style Library/js/jquery-1.7.2.min.js"></script>

<script type="text/javascript" src="../../Style Library/js/galleria.classic.min.js"></script>

<script type="text/javascript" src="../../Style Library/js/galleria-1.2.7.min.js"></script>

<script type="text/javascript">


    $(".gallery img").unwrap().unwrap();



    width: 700,

    height: 467 });

    Galleria.loadTheme('../../Style Library/js/galleria.classic.min.js');





This code will add reference to the files in Style library, JavaScript, CSS,… $(".gallery img").unwrap().unwrap(); unwraps the pictures form the <li> tag and <ul> tag which CQWP adds when it displays the pictures and needs to be done so that galleria can step in action and create the actual gallery.

Galleria.loadTheme and Galleria.run just runs the galleria to create the picture gallery.


At the end of the page, just after the </asp:content> add the style tag, which will apply background, height and width to the gallery div of the Content Query Web Part. This was set in ContentQueryMain.xsl


<style type="text/css">



    height: 472px;

    background: #000;





Content Query web part

On the page add the CQWP and Edit Web part. For the picture source select the picture gallery where your pictures are saved.

You can also specify filter for the pictures.

What is important in the CQWP settings is that you apply the ItemStyle you previously created in ItemStyle.xsl called ImageGallery.

Save the CQWP settings, save the page and refresh it.

And the final result is:

Robert Vončina

Kompas Xnet d.o.o.





SharePoint | SharePoint 2010 | Development

Add comment


<<  September 2018  >>

View posts in large calendar

Page List

Month List