Et SharePoint-billedgalleri, der ikke er noget skrammel, i 7 nemme trin

[Opdatering]

Jeg fik en e-mail fra Robert, som har forfinet løsningen. Tak til Robert for at dele den.

Hej Ulrich,

først vil jeg takke Ulrich for hans flotte arbejde og for at dele det med os! Jeg har heller ikke længere problemet med mere end 40 billeder i et billedgalleri, efter at jeg har taget galleria-1.4.2.min.js og galleria.classic.min.js fra en aktuel Galleria-version i brug.

Jeg har også lavet nogle ændringer i filen “DisplayGallery.txt”, for når man har mange billeder i galleriet, får man et ydelsesproblem og en hukommelseslækage ved altid at bruge billederne i original kvalitet og størrelse fra nutidens digitalkameraer. SharePoint laver selv automatisk to forskellige thumbnail-billeder af hvert billede, der uploades til et billedbibliotek (mapperne “_w” og “_t”, som man kan se, hvis man åbner billedbiblioteket med Stifinder). Så jeg har ændret “DisplayGallery.txt”, så de to tumbnail-billeder bruges til billedet og til den lille thumbnail under billedet. Billedet i original kvalitet bruges kun, når man klikker på selve billedet og bruger Gallerias lighbox-funktion.

For at gøre det måtte jeg erstatte følgende afsnit i filen “DisplayGallery.txt”:

1// Some advise: Keep folders and images seperate. The makes for the best views
2jQuery('#onetidDoclibViewTbl0 a.ms-listlink:not([onmousedown^="javascript"])').each(function() { 
3
4var 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"; 
5
6var thumbnailpath = jQuery(this).attr("href").substring(1,jQuery(this).attr("href").lastIndexOf('/')+1) + "_t/" + 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"; 
7
8jQuery("#galleria").append(""); });

Nu kan jeg også bruge ImageGallery til billedbiblioteker med mange billeder uden problemer.

Venlig hilsen, Robert.

Jeg er blevet bedt af en kunde om at finde på en mere præsentabel måde at vise et SharePoint-billedgalleri på. Og da SharePoints standardmåde at gøre det på på ingen måde er brugervenlig, gravede jeg rundt og fandt noget kode, som bare havde brug for trænger til lidt redigering for at virke i SharePoint 2013.

Disclaimer: Denne løsning er kun testet på SharePoint 2013

//Brok

Lad os være ærlige. Ingen har nogensinde beskyldt SharePoint for at være den mest moderne platform til ting som Wiki’s, blogging, diskussioner og billedgallerier. Det virker ikke på mig, som om Microsoft gør andet end at holde de funktioner i live, men de har ikke udviklet sig ret meget siden 2007. Billedgallerier har måske udviklet sig en smule. Men har man nogensinde leget med WordPress, har man en god idé om, hvor fede billedgallerier kan se ud, og hvor nemt det er at sætte dem op.

Efter at have søgt højt og lavt fandt jeg en løsning, der virker i et SharePoint 2010-miljø. Så jeg skulle bare kode den om til 2013. Det er ikke det helt store, men da Microsoft har lavet mange ændringer i billedbibliotekerne, kræver det stadig noget arbejde at få den til at virke.

Sidebemærkning: Picture-, Image- eller Photo-Gallery? Jeg kalder dem Image-Galleries, fordi jeg ikke rigtig kan se forskel. Man er velkommen til at oplyse mig om emnet, hvis jeg bruger betegnelsen forkert.

Videoguide til at bygge et SharePoint-billedgalleri#

Se videoen på YouTube

Tekstguide til at bygge et SharePoint-billedgalleri#

1. Opret en mappe til koden. Jeg foretrækker Masterpage-biblioteket, hvor jeg har alle mine ting, men det op til en selv at bestemme.
2. Download Galleria-biblioteket eller download min samling af filer, og opdater dem efter behov. Man har kun brug for disse filer:
   • 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. Rediger filen “DisplayGallery.txt”, så den passer til ens behov
4. Opret et nyt billedbibliotek
5. Opret en visning baseret på visningen “All Pictures”, som kun viser [Name], [Required] og [Preview]. De to sidste er obligatoriske.
6. Opret en side, og indsæt app-parten til ens ImageGallery
7. Indsæt en ContentEditor-webpart, og link til filen “DisplayGallery.txt” fra Masterpage-biblioteket.

Her er den fulde kode til filen “DisplayGallery.txt”:

 1<script type="text/javascript"> 
 2    jQuery(function () {
 3
 4     }); 
 5</script> 
 6<script> 
 7jQuery(function() {
 8    //Find the beginning of the webpart and replace it all with the new header 
 9    
10jQuery("#onetidDoclibViewTbl0").before("</pre> <div id="galleries"> <h2>ImageGallery</h2 > </div > <div id="galleria" ></div > <pre >").hide();
11
12// Include any image from the current folder in the gallery div 
13// Some advise: Keep folders and images seperate. The makes for the best views 
14jQuery('#onetidDoclibViewTbl0 a.ms-listlink:not([onmousedown^="javascript"])').each(function() { 
15    jQuery("#galleria").append("<img src="" + jQuery(this).attr("href") + "" alt="" / >"); 
16}); 
17    
18// displays all folders as albumlinks 
19jQuery('#onetidDoclibViewTbl0 a.ms-listlink[onmousedown^="javascript"]').each(function() { 
20    var album = jQuery(this); 
21    var gallery = album.text(); 
22    jQuery("#galleries").append(album.html("<img src='/_catalogs/masterpage/GITS/ImageGallery/btn_gallery.png' alt='Gallery' / >" + gallery + ""));
23}); 
24
25jQuery('#galleries').has('a').show(); 
26
27// Load Galleria with configurations 
28// Take a look at the documentation for Galleria for additional configurations 
29
30if(jQuery('#galleria').has("img").length) { 
31    jQuery('#galleria').show(); 
32    Galleria.loadTheme('/_catalogs/masterpage/GITS/ImageGallery/galleria.classic.min.js'); 
33        Galleria.configure({ lightbox: true, 
34            // Opens the image in a lightbox, when clicked height: 0.5625 
35            // Sets the dimensions for the image, this is true 16:9 ratio 
36        }); 
37
38    Galleria.run('#galleria'); 
39} 
40}); 
41</script > 
42
43<style> 
44    a img { border: 0; } 
45    #galleries { display: none; margin-bottom: 10px; margin-left: 10px; min-height:50px; } 
46    #galleries  > a { display: inline-block; height: 50px; margin-right: 20px; text-align: center; } 
47    #galleries img { border: 1px solid #DBDDDE; display: block; height: 40px; margin: 0 auto 5px; max-height: 40px; padding: 3px; } 
48    #galleria { display: none; width:100%; } 
49</style>