Displaying Images from a SharePoint Picture Library with UniteGallery

A client was recently looking for options to improve on SharePoint’s OOB ability to display pictures.  One way to do this is to use jQuery and SharePoint’s REST API to connect a Picture Library to one of several jQuery gallery libraries that generally provide lots of display options (most of them are responsive as well which is very cool in this cloud-first, mobile-first world).

I did the following example using an image gallery plug-in called UniteGallery (http://unitegallery.net),  but a similar approach of dynamically getting the images from a SharePoint REST query should work with other gallery/lightboxes as well.  (For example, this one also looks promising but I haven’t had a chance to try it yet: http://andreknieriem.de/simple-lightbox/ ).

 

Picture Library Basics

Picture Libraries in SharePoint 2013 and SharePoint Online (Office 365) make it easy to drag and drop pictures into the library where they then can be tagged with metadata, sorted, filtered, versioned, etc. SharePoint Picture Libraries also provide some basic views of images including list views, and thumbnail views, and a basic slideshow capability.  To improve performance of SharePoint own UI components, SharePoint automatically creates a thumbnail and a midsize version for each uploaded picture and uses those in their UI.

Also for performance reasons, most of the image lightbox and gallery plug-ins I found had the option to specify a separate thumbnail file to render in the gallery view. Of course, this requires that separate, thumbnail-sized images have been created for each picture.  Doing it manually would be an extra amount of work for each image but the result is better performance.   If we take advantage of the automatically generated thumbnails that SharePoint generates, we can improve performance without adding any extra work for the person uploading the pictures.

Here’s a SharePoint Library I created in my Office 365 tenancy for this article. The library is called ‘Photos’ and it’s in a subsite called ‘Intranet’ at URL: https://futuretechnologygroup.sharepoint.com/intranet/Photos

[BTW, the FTG URL’s in this article are not publicly accessible … just meant to illustrate a real world example running in a typical O365 environment].

SharePointPictureLibrary

After uploading an image (or maybe during the upload?), SharePoint generates the additional thumbnail and midsize images. The thumbnails go in a subfolder named ‘_t’ that’s located directly under the picture library. The midsized images go in their own sub-folder called ‘_w’ (also a direct child folder of the picture library).

ThumbNail Image Folder: http://SiteURL/OptionalSubSites/PictureLibName/_t/

MidSize Image Folder:  http://SiteURL/OptionalSubSites/PictureLibName/_w/

Since the thumbnails and midsize images are stored in separate folders they can each be named the same, which is how SharePoint in fact does it.  The filename is constructed by taking the picture’s original file name without the extension, followed by an underscore, followed by the original file extension, followed by .jpg as shown here:

PictureFilenameNoExtension_OriginalFileExtension.jpg

For an example, the original flower picture in the library above is named IMG_1368.jpg and is 2592 x 1936px.

So the midsize image that SharePoint generates is named and located at:
https://futuretechnologygroup.sharepoint.com/intranet/Photos/_w/IMG_1368_JPG.jpg

IMG_1368_JPG_MidSize

And the following is the URL for the auto-generated thumbnail image: https://futuretechnologygroup.sharepoint.com/intranet/Photos/_t/IMG_1368_JPG.jpg

IMG_1368_JPG_Thumb

Here are a couple other things to keep in mind:

  • I uploaded both JPG and PNG files and the thumbnails and midsize images generated for both of them were in the JPG format. So SharePoint appears to generate JPG images regardless of initial image type.  For example, if you start with a .PNG file called Sample.png, the auto generated thumbnails and midsize images would be JPG images called Sample_PNG.jpg.
  • If you need to handle images files with 4-character extensions (e.g. JPEG) you’ll need to add a little extra logic to the javascript below to test for that case.   As an example, a image named Image01.JPEG would be named Image01_JPEG.jpg after conversion.  (I bumped into this once but eliminated that test to focus the code on getting the images and feeding them to UniteGallery).

UniteGallery Setup(http://unitegallery.net)

I used the free version of UniteGallery in this article, and they have a ton of paid “themes” that can style a gallery every which way. From their home page, you can display a test gallery in a variey of styles.

Start by clicking on the red DOWNLOAD button to get the unitegallery-master.zip file:

UniteGalleryHome

Unzip the contents and upload the folder united-master\package\unitegallery to your SharePoint site (in this article, I’m putting unitegallery in a document library called Scripts).

UniteGalleryFolder

In addition to the unitegallery folder, the ‘package’ folder also contains several .html files which each show one of the style samples that are shown on the UniteGallery home page. I liked the way that the “Tiles – Justified” example looks, so I reviewed the sample file to see what was required in the markup for each image.  (We’ll need to recreate this markup using jQuery).

Here’s a relevant excerpt from “tiles_justified.html”:


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unite Gallery - Tiles - Justified</title>

<script type='text/javascript' src='unitegallery/js/jquery-11.0.min.js'></script> 
  <script type='text/javascript' src='unitegallery/js/unitegallery.min.js'></script>
	<link rel='stylesheet' href='unitegallery/css/unite-gallery.css' type='text/css' />
<script type='text/javascript' src='unitegallery/themes/tiles/ug-theme-tiles.js'></script>
 
</head>

<body>
 

<h2>Tiles - Justified</h2>

 

<div id="gallery" style="display:none;">

  <a href="http://unitegallery.net">
  <img alt="Peppers"
       src="images/thumbs/tile2.jpg"
       data-image="images/big/tile2.jpg"
       data-description="Those are peppers"
       style="display:none">
  </a>

  /* ADD'L ANCHOR TAGS HERE ... ONE PER IMAGE */

  <a href="http://unitegallery.net">
  <img alt="Iphone Back"
       src="images/thumbs/tile10.jpg"
       data-image="images/big/tile10.jpg"
       data-description="This is iphone back"
       style="display:none">
  </a>
    
</div>

 
 <script type="text/javascript">

  jQuery(document).ready(function(){

   jQuery("#gallery").unitegallery({
    tiles_type:"justified"
   });

  });
  
 </script>

</body>
</html>

So we can see that each image in the above tiles-justified example is basically an anchor tag with optional properties that surrounds an image tag. I wanted to find the minimum that was required in the img tag and after some experimentation found that you could get away with a hashtag for the href and an empty string for the alt tag.  I also found that I could eliminate the description entirely.  You’ll need to add these back in if you want to support some of the more advanced features in UniteGallery, e.g. sliding image name and description.

So unlike the above example file in which the gallery and image DIV’s are hardwired in the HTML, the approach we’ll take is to create an empty gallery div and use jQuery and SharePoint REST API to grab the images and thumbnails from the image library to populate the gallery div. Once the div is created, then call the unitegallery function to do it’s magic and we’re done. Here’s the script I used (of course, you’ll need to replace https://futuretechnologygroup.sharepoint.com and make other changes to match your environment):

ImageGallery.txt


<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type='text/javascript' src='/scripts/unitegallery/js/unitegallery.min.js'></script>
	<link rel='stylesheet' href='/scripts/unitegallery/css/unite-gallery.css' type='text/css' />
<script type='text/javascript' src='/scripts/unitegallery/themes/tiles/ug-theme-tiles.js'></script>


<div id="gallery" style="display:none;"></div>


<script type="text/javascript">

$(document).ready(function() {

 //use the getJSON method of Jquery
 $.getJSON("/intranet/_vti_bin/listdata.svc/Photos",function(data) {
 
  //iterate through all returned list items, i.e. images, and add them to the gallery div:
  
  $.each(data.d.results, function(i,result) {
  
   //get basic item properties
   var Name = result.Name;  // this is the image filename, with the extension.
   var Path = result.Path;  // this the the site collection relative path to the image (minus the image name). 
   
   // extract relevant image filename sections
   var ShortName = Name.slice(0,-4);    // image filename without the extension (we need this to build the url to the SharePoint-generated thumbnail.
   var ImageExt = Name.substr(Name.length - 3); // image file extension, also used in building thumbnail url. 
   
   // construct url's to image and thumbnail
   var ImageBig = '' + Path + '/' + Name;  // url to the full image.
   var ImageThumb = '' + Path + '/_w/'  + ShortName + '_' + ImageExt + '.jpg'; // url to image thumbnail.
 
   // construct element to add to the gallery div.  this output designed to feed the tiles theme of unitegallery. adjust this to suit your gallery of choice.  
   var ImageStructure = '<a href="#"><img alt="" src="' + ImageThumb + '" data-image="' + ImageBig + '" style="display:none"></a>'; 
   
   $("#gallery").append(ImageStructure);  // add this image element to the gallery div.

  });
  
  $("#gallery").unitegallery({  // invoke the unitegallery function, passing array of options.
   gallery_theme: "tiles",
   tiles_type: "justified"
  });

 });

});

</script>

Adding The Gallery To A Page

Once you’re done adjusting the URL’s in the text file above, save it to the Scripts library (or wherever you want). Then add a Content Editor Web Part to a page and reference the script file as the source. After saving the web part settings, the image library is displayed like so:

FinishedGallery01

Unite Gallery is responsive so that if you shrink the browser window it dynamically resizes and repositions the images like so:

FinishedGallery02

And when you click on an image it shows it in a full browser overlay with next/prev arrows:

EmmaCloseUp

And that’s it! Now you can display the images in your Picture Library in a customizable, responsive, gallery and lightbox.  Pretty good for a half page of code … gotta love jQuery and REST!

Best regards,

DaveSigInformal

David Remillard

Advertisements

Author: David Remillard

Our best projects are those which become a partnership between our client and FTG. I enjoy learning the details about our client's businesses and what each client wants to achieve with Office 365. Also enjoy brainstorming about client's pain points and business challenges and different ways that SharePoint might be used to help achieve your goals. We help you understand what is easy and what is hard in SharePoint and how to design solutions for maximum value. We create a shared vision, and build it out in increments with frequent project touch points, ensuring high-value business solutions that are closely aligned with your specific business environment (size, culture, budget constraints, tech comfort level, remote offices, etc). We live on repeat business and grow our business with clients who value practical business insight as well as technical skill.

5 thoughts on “Displaying Images from a SharePoint Picture Library with UniteGallery”

  1. Hello, this is great. Is it somehow also possible to make folders work with this solution. Currently, this solution does not display any pictures if there are folders in the library.

    Ideally, i would click on a folder and be directed to the contents of the folder then.

    Do you maybe have a suggestion?

    1. Hi Richard,

      I did this a while ago, so not really sure what would be involved for folders. From what I remember, the script gets images into a format that the Jquery utility can display. So it might be that you need to do what you want in 2 steps: the first would display the folders only and then when you click on the folder you could query for those images and pass those to the jquery utility? Something like that?

      Sorry I don’t have more time to play with it today, but hopefully that will help.

      Best regards,
      Dave

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s