SharePoint Image Gallery that doesn’t suck in 7 easy steps

[Update]

I got an e-mail from Robert, who has refined the solution. Thank you for sharing Robert.


Hi Ulrich,
first I want to thank Ulrich for his great work and sharing it with us! I also don’t have the problem with more than 40 pictures in a picture gallery after using galleria-1.4.2.min.js and also galleria.classic.min.js from an actual galleria-version.

Also I did some changes in the “DisplayGallery.txt” file because when you have a lot of pictures in the gallery you will get a performance issue and a memory leak using always the pictures in original quality/size from actual digital cameras. SharePoint itself creats two differen thumbnail pictures of each uploaded picture gallery in an image library automatically (the folders “_w” and “_t” you can see if you open the picture library with windows-explorer). So I changed “DisplayGallery.txt” that these two tumbnail pictures will be used for the image and also for the minithumbnail below the image. The picture in original quality is only used when clicking on the picture itself and using the lighbox function of Galleria.

To do this I had to replace the following paragraph in the “DisplayGallery.txt”-file:


// Some advise: Keep folders and images seperate. The makes for the best views
jQuery('#onetidDoclibViewTbl0 a.ms-listlink:not([onmousedown^="javascript"])').each(function() { 

var imagepath = jQuery(this).attr("href").substring(1,jQuery(this).attr("href").lastIndexOf('/')+1) + "<em>w/" + jQuery(this).attr("href").substring(jQuery(this).attr("href").lastIndexOf('/')+1,jQuery(this).attr("href").lastIndexOf('.')) + "</em>" + jQuery(this).attr("href").substring(jQuery(this).attr("href").lastIndexOf('.')+1) + ".jpg"; 

var thumbnailpath = jQuery(this).attr("href").substring(1,jQuery(this).attr("href").lastIndexOf('/')+1) + "<em>t/" + jQuery(this).attr("href").substring(jQuery(this).attr("href").lastIndexOf('/')+1,jQuery(this).attr("href").lastIndexOf('.')) + "</em>" + jQuery(this).attr("href").substring(jQuery(this).attr("href").lastIndexOf('.')+1) + ".jpg"; 

jQuery("#galleria").append(""); });

Now I’m able to use the ImageGallery also for image libaries with a lot of pictures without any problems.

Regards, Robert.


I’ve been asked by a client to come up with a more presentable way of displaying a SharePoint image gallery. And since the default way that SharePoint does that, is bu no means user-friendly at all, I dug around and found some code that just needed needs a little editing in order to work in SharePoint 2013.

Disclaimer: This solution is tested on SharePoint 2013 only

//Ranting
Lets be honest. Nobody ever accused SharePoint of being the most modern platform for things like Wiki’s, blogging, discussions and image galleries. It doesn’t seem to me that Microsoft are doing other than keeping those functions alive, but they haven’t developed all that much since 2007. Image galleries way have developed a little. But if you’ve ever toyed with WordPress, you have a good idea of how cool Image galleries can look and how easy it is to set up.

After searching high and low I found a solution that is working in a SharePoint 2010 environment. So I just had to re-code it for 2013. It’s not that big a deal, but since Microsoft has made a lot of changes to Picture Libraries, it still needs some work, in order to work.

Sidenote: Picture-, Image or Photo-Gallery? I call them Image-Galleries, because I cannot really tell the difference. Feel free to enlighten me on the subject, if I use the term in a wrong way.

Videoguide for building a SharePoint image gallery

Textguide for building a SharePoint image gallery

  1. Create a folder for your code. I prefer the Masterpage library, where I have all my stuff, but that for you to decide.
  2. Download the Galleria Library or download my collection of files and update them as needed.
    You only need these files:  
    • jquery-1.11.0.min.js
    • galleria-1.3.5.min.js
    • galleria.classic.min.js
    • galleria.classic.css
    • classic-map.png
    • classic-loader.gif
  3. Edit the “DisplayGallery.txt” file to suit your needs
  4. Create a new Image Library
  5. Create a view, based on the “All Pictures” view, which only shows [Name], [Required] and [Preview]. The last two are mandatory.
  6. Create a page and insert the app-part for your ImageGallery
  7. Insert a ContentEditor webpart and link to the “DisplayGallery.txt” file from the Masterpage library.

Here is the full code of the “DisplayGallery.txt” file:


<script type="text/javascript"> 
    jQuery(function () {

     }); 
</script> 
<script> 
jQuery(function() {
    //Find the beginning of the webpart and replace it all with the new header 
    
jQuery("#onetidDoclibViewTbl0").before("</pre> <div id="galleries"> <h2>ImageGallery</h2 > </div > <div id="galleria" ></div > <pre >").hide();

// Include any image from the current folder in the gallery div 
// Some advise: Keep folders and images seperate. The makes for the best views 
jQuery('#onetidDoclibViewTbl0 a.ms-listlink:not([onmousedown^="javascript"])').each(function() { 
    jQuery("#galleria").append("<img src="&quot; + jQuery(this).attr(&quot;href&quot;) + &quot;" alt="" / >"); 
}); 
    
// displays all folders as albumlinks 
jQuery('#onetidDoclibViewTbl0 a.ms-listlink[onmousedown^="javascript"]').each(function() { 
    var album = jQuery(this); 
    var gallery = album.text(); 
    jQuery("#galleries").append(album.html("<img src='/_catalogs/masterpage/GITS/ImageGallery/btn_gallery.png' alt='Gallery' / >" + gallery + ""));
}); 

jQuery('#galleries').has('a').show(); 

// Load Galleria with configurations 
// Take a look at the documentation for Galleria for additional configurations 

if(jQuery('#galleria').has("img").length) { 
    jQuery('#galleria').show(); 
    Galleria.loadTheme('/_catalogs/masterpage/GITS/ImageGallery/galleria.classic.min.js'); 
        Galleria.configure({ lightbox: true, 
            // Opens the image in a lightbox, when clicked height: 0.5625 
            // Sets the dimensions for the image, this is true 16:9 ratio 
        }); 

    Galleria.run('#galleria'); 
} 
}); 
</script > 

<style> 
    a img { border: 0; } 
    #galleries { display: none; margin-bottom: 10px; margin-left: 10px; min-height:50px; } 
    #galleries  > a { display: inline-block; height: 50px; margin-right: 20px; text-align: center; } 
    #galleries img { border: 1px solid #DBDDDE; display: block; height: 40px; margin: 0 auto 5px; max-height: 40px; padding: 3px; } 
    #galleria { display: none; width:100%; } 
</style> 

41 thoughts on “SharePoint Image Gallery that doesn’t suck in 7 easy steps”

  1. Nice piece of work, simple and effective. I might use it myself. One question. How might you go about including captions with the pictures?

    • Hi Jon.. sorry.. Haven’t got any solution for you there. I would use some exstra columns in the library and the adjust the script to read from that column.. If if ever get time I will post something.

      • Which script? JavaScript isn’t a strong point of mine, but this functionality would be worth some effort, and knowing where to start would help. I’ll post back if I get it to work.

        • Hi howwood. Thank your for your question. I think you should take a look at “DisplayGallery.txt”, and see if you can get that to display the extra captions column, if you add such one.

    • Not sure why, but SP kept rendering a view ith pagination….once I got the right view to take, the pagination disappeared and all the images showed.
      So this is resolved!

        • Hi! You can put any value you want. In the new view that you create, open the + signal that says “limit item”. That standart for Sharepoint is 40. But you can put any value you need.

    • Just as a followup, I did replace the files in the “My collection” link with the latest files found at “Galleria Library” link. I replaced the galleria js file with galleria-1.4.2.min.js, and I also replaced galleria.classic.min.js. I do not see any changes I could make in the DisplayGallery.txt that will fix this problem.

  2. Hi Joe

    I can’t really say what or why you experience this issue. I have never tested it with that many images. If I fund a solution I will let you know, but odds are that I don’t have time to look into it before later this year. If you find a solution, please post it to share with others.

  3. Has this 40 image limit problem been resolved? I have replaced the galleria-1.4.2.min and galleria.classic.min from Galleria1.4.2 with no success. I am still getting multiple “file not found” error after uploading more than 40 images. It seems that Robert has resolved this issue above. Can we ask Robert to zip up the new updated files and post it for public? Thanks in advance and please advise.

      • Dear Ulrich, we have tried Robert’s solution in red by replacing the two min.js files and changing the code with no success. We replaced the file name call to galleria-1.4.2.min.js in the code. We still getting file not found errors. After changing the code as per Robert instructions it stopped working completely. Is there something to address this 40 image limit issue?

  4. Robert’s modification is incomplete. It creates the URLs for the images, but does nothing with them. Where your code appends an image tag, his just inserts an empty string.

    I got it working today with the following modifications. I tested it with a library containing 59 images and had no “file not found” errors.

    // Some advise: Keep folders and images seperate. The makes for the best views
    jQuery(‘#onetidDoclibViewTbl0 a.ms-listlink:not([onmousedown^=”javascript”])’).each(function () {
    var imagepath = ‘/’ + jQuery(this).attr(“href”).substring(1, jQuery(this).attr(“href”).lastIndexOf(‘/’) + 1) + “_w/” + jQuery(this).attr(“href”).substring(jQuery(this).attr(“href”).lastIndexOf(‘/’) + 1, jQuery(this).attr(“href”).lastIndexOf(‘.’)) + “_” + jQuery(this).attr(“href”).substring(jQuery(this).attr(“href”).lastIndexOf(‘.’) + 1) + “.jpg”;
    jQuery(“#galleria”).append(“”);
    });

    • Thank so much Ulrich for your instruction and great work.
      I’ve modified the code and there is not any problems such as “image not found” , performance issue with more than 40 pictures.

      // Some advise: Keep folders and images seperate. The makes for the best views
      jQuery(‘#onetidDoclibViewTbl0 a.ms-listlink:not([onmousedown^=”javascript”])’).each(function() {
      var thumbnailpath = ‘/’ + jQuery(this).attr(“href”).substring(1, jQuery(this).attr(“href”).lastIndexOf(‘/’) + 1) +
      “_w/” + jQuery(this).attr(“href”).substring(jQuery(this).attr(“href”).lastIndexOf(‘/’) + 1,
      jQuery(this).attr(“href”).lastIndexOf(‘.’)) + “_” +
      jQuery(this).attr(“href”).substring(jQuery(this).attr(“href”).lastIndexOf(‘.’) + 1) + “.jpg”;
      var imagepath = jQuery(this).attr(“href”);

      var ImageStructure = ‘‘;
      jQuery(“#galleria”).append(ImageStructure); });

      Does anyone know how to code that the first image will be used for the folder?

  5. Hello all after going through many of the same frustrations the rest of you have had I did some digging of my own. Turns out that I just had to edit the webpart with the below: then I modified the display gallery text file using Steve’s suggestion above and I am now able to add as many images as I want:

    edit current view of webpart ImageGallery
    go down to Item Limit you will see that its set to 40 and to display in batches..

    then just modify it to whatever number you want and select the radio button:
    “Limit the total number of items returned to the specified amount”

    after saving everything worked fine

  6. Is there a way to dynamically retrieve the first photo to replace btn_gallery.png? We have several photo albums and don’t want to display the button over and over. Thank you in advance.

  7. The gallery looks awesome in your demo. Nice work.
    I have followed all your steps in creating the gallery. Howerver, I can’t even get the folders to show up as an albumlink like the one in your demo. Would you know the what caused the problem?

    thank you in advance.

  8. Does anyone have an example of Code up and running. I added the code written above but all I get is an error message (Unable to get property ‘substring’ of undefined or null reference). I think it has to do with the attr(“href”) part of the whole thing. Anyone have any advice for me? Do you have to edit any of the code written above, for example?

    Thanks in advance.

  9. I have the error “Image not found : …” when the images folder contains a simple quote.The path is trunkated at the quote.
    Example :
    Image path : “/viepratique/Photos/2017/Soir d’été”
    Trunkated path : “/viepratique/Photos/2017/Soir d”

    Thanks in advance

  10. I followed this video step by step and this doesn’t work in the end.

    I don’t get the ImageGallery title on that web part. It it is just showing the Image folder names, when I click the folder I just get the image file names and when I click the file name it just opens the picture.

    I went back and checked step by step that everything was correct and there was nothing out of place.

    The things I did differently from your combination of video and blog text (they don’t agree BTW).
    1. I used galleria 1.5.7 not 1.3.7.
    2. I used jquery 3.2.1 not 1.11.0.
    3. I did not remove the “Get started with your site” component.
    Once I saw it didn’t work I tried the following:
    4. I edited the DisplayGallery.txt to add the top two rows that were in your file in the video that were missing from the text in the blog post.
    5. I also made all the edits to the DisplayGallary.txt file that I could see on screen that were different than the text in the blog post (there were several), as the bottom part of the script is not shown in the video, I can can’t confirm the rest.
    6. Also you wrote in the blog post “these are the only files you need”, which is not true. You are using a file called btn_gallery.png in the script and that is NOT one of the files in your list of needed ones. So I added a small random.png file and renamed it to btn_gallery.png.

    I have SharePoint 2013

    Please let me know if any of these things you can see would cause an issue.

  11. Hello everyone,

    Working fine without any issues.

    Here’s the summary what i have used so far.

    1. Used jquery-3.3.1.min.js
    2. Used galleria-1.5.7.min.js
    3. galleria.classic.min.js (found in galleria\themes\calssic folder)
    4. galleria.classic.css (found in galleria\themes\calssic folder).
    5. DisplayGallery.txt
    6. classic-map.png (found in galleria\themes\calssic folder)
    7. classic-loader.gif (found in galleria\themes\calssic folder)
    8. btn_gallery.png

    Created a folder called galleria under SiteAssets and stored all the above 8 files in it.
    Created a Picture Gallery library from Picture Gallery Library template.
    Uploaded 2 folders one with 46 and other with 18 images.
    Inserted the Picture Gallery web part on to the landing page of the SharePoint Online site.
    Modified DisplayGallery.txt to reflect the new path for the files 1, 2, 3 & 8.

    ——————————————————————————————————————–

    For auto rotating images i modified the line
    Galleria.run(‘#galleria’);
    to
    Galleria.run(‘#galleria’, {autoplay: 5000});

  12. Hi. Thanks for this solution. I want to know if someone could put 2 different galleries in the same page using this codes??

Comments are closed.