Smarter Business Solutions Logo
SMARTER Business Solutions
SharePoint Entwicklung

Transform SharePoint Image Libraries into Galleries

Learn how to prep Style Library assets, tune the image library view, and configure web parts so SharePoint delivers an intuitive, lightweight gallery experience.

5 Min Read

A customer recently asked for a more user-friendly way to browse images in SharePoint. The classic list view felt clunky, so I tested a lightweight gallery approach that needs only a few files and works reliably (verified with SharePoint 2013).

A clean gallery keeps people from scrolling through endless rows and instead lets them click through visual previews. All items continue to live in the SharePoint image library, so you still benefit from permissions, versioning, and search.

Step-by-step guide

Prepare the files

  1. Create a folder inside the Style Library, for example Siteurl/StyleLibrary/ImageGallery, and store all assets there.

  2. Download the Galleria library or, alternatively, my ZIP package. You will need the following files:

    jquery-1.11.0.min.js
    galleria-1.3.5.min.js
    classic.min.js
    classic.css
    classic-map.png
    classic-loader.gif
  3. Upload every file to the new folder and add a DisplayGallery.txt file that will later hold the script.

Build the library and view

  1. Create the image library that should surface the gallery.
  2. Add a new view based on All Pictures, but show only the Name column.

View configuration for the SharePoint gallery experience

Configure the page and web parts

  1. Create a page, add the image library web part, and set the freshly built view as the default.

Standard view in the SharePoint image library web part

  1. Insert a Content Editor Web Part and link it to the DisplayGallery.txt file.

Content Editor Web Part referencing DisplayGallery.txt

  1. If you stored the folder under a different path, update each of the four path references inside DisplayGallery.txt so the scripts and CSS load correctly.

Resulting SharePoint gallery powered by Galleria

Follow-up tip

Want to enrich the gallery with metadata? Learn how to import EXIF information automatically in Import EXIF Data into SharePoint Image Libraries.

Happy coding!
Best, Stefan

Tags

#Image library #Image management #Navigation #SharePoint

Ready to transform your SharePoint?

Let our experts help you implement the solutions discussed in this article.