Click here to Skip to main content
Click here to Skip to main content

Picture Thumbnails Web Part (SharePoint 2010)

By , 1 May 2010
Rate this:
Please Sign up or sign in to vote.

Figure 1

Figure 1

Figure 2

Figure 2

Introduction

For use in Microsoft SharePoint Foundation 2010 and SharePoint Server 2010, this Picture Thumbnails Web Part displays images from a SharePoint Picture Library in a widget-like thumbnail layout (see Figure 1). When a user clicks on a thumbnail, the original image opens up Lightbox style on top of the darkened page (see Figure 2). This is adapted from my WSS 3.0 version for SharePoint 2010.

Background

For images stored in a SharePoint Picture Library, thumbnails are generated by referencing the URL /<Picture Library Url>/_t/<Image Name>_<Image Extension>.jpg. This URL is stored in field EncodedAbsThumbnailUrl. However the thumbnails are too big for my liking. Instead of using some custom HTTP handler to generate thumbnails of smaller size, I decided to use the thumbnails as they are but use them as CSS background images. This way, I can control the "apparent" thumbnail size by sizing the block element associated with the background image, thereby avoiding any aspect ratio issue of just resizing the thumbnail images directly.

Next, I would like to have some Dynamic HTML or Ajax functionality to view the original image when user clicks on a thumbnail. Lightbox style preview looks very cool to me. There are many implementations or variations of Lightbox and I settled on using Litebox because of its compact size and relatively small number of supporting files.

Description

PictureThumbnailsWebPart functions as a wrapper by calling custom web control PictureThumbnails. This design allows the developer the option to add the web control directly to a master page or a publishing page layout where Web Parts are not allowed. The Web Part has the following public properties:

  • SiteUrl - (Site URL) Server relative URL of the site. If left blank, current site is used.
  • ListName - (Picture Library Name) Name of a Picture Library in the current site.
  • SortField - (Sorting Field) Available options are Name, Title, Created and Modified.
  • SortOrder - (Sorting Order) Available options are Ascending, Descending and Random. When Random is selected, SortField will be ignored.
  • RowLimit - (Maximum Number of Pictures) Default is 0, which means no limit.
  • ShowAsImageSet - (Group Images into a Single Set) Default is false. If set to true, all images will be treated as part of an image set in Litebox, allowing previous and next navigation during preview.
  • CssClassPictureThumbnails - (CSS class)

The Lightbox functionality is provided by Litebox and requires a number of supporting files:

  • litebox-1.0.js, moo.fx.js, prototype.lite.js.

    These JavaScript files are treated as Embedded Resources in Visual Studio 2010. In code, they are referenced using Page.ClientScript.GetWebResourceUrl, passing in the files in the form of [Default namespace].[Folder containing resource].[Filename of resource]. In AssemblyInfo.cs, include each of these files in the same format. For example:

    [assembly: System.Web.UI.WebResource
       ("QuestechSystems.SharePoint.ClientScripts.litebox-1.0.js", "text/javascript")]
  • blank.gif, closelabel.gif, loading.gif, nextlabel.gif, prevlabel.gif

    These images are treated as Class Resources. In code, the path to Class Resource files is obtained by calling SPWebPartManager.GetClassResourcePath. Since the project assembly is deployed to GAC, the deployment path will be something like /_wpresources/QuestechSystems.SharePoint.Thumbnails/1.0.0.0__ce574b585167cfb8/. To package Class Resource files for deployment, a SharePoint 2010 Empty Element is created in Visual Studio 2010. These images are added under the newly created folder with Deployment Type set to ClassResource.

  • lightbox.css, picturethumbnails.css

    You can find them in the Styles directory. lightbox.css is customized from the original Litebox module to reflect the directory path of Class Resource images. If you recompile the supplied Visual Studio project with your own strong name key file, you would need to update these paths. picturethumbnails.css is not part of Litebox but is required for the widget/thumbnail look and feel as shown in the screenshots above.

The Web Part also uses a resource file to store all messages and property attribute UI strings. It demonstrates how to develop a custom class that inherits WebDescriptionAttribute, WebDisplayNameAttribute or CategoryAttribute and returns a localized string from your own Resource Manager.

The supplied Visual Studio 2010 solution includes all the support files you need to build and deploy this Web Part, minus the strong name key file (key.snk). It makes full use of the built-in SharePoint integration. No more third party tools or custom pre and post build scripts are needed to build the SharePoint solution file. 

Installation

Open SharePoint 2010 Management Shell, add solution file QuestechPictureThumbnails.wsp using Add-SPSolution like:

Add-SPSolution "C:\QuestechSystems.PictureThumbnails\bin\Release\
QuestechPictureThumbnails.wsp"

Or using stsadm, add solution file QuestechPictureThumbnails.wsp like:

stsadm -o addsolution -filename "C:\QuestechSystems.PictureThumbnails\bin\
Release\QuestechPictureThumbnails.wsp"

Go to SharePoint 2010 Central Administration/System Settings/Manage farm solutions. Deploy the installed solution to selected web applications. In the site collection where the solution is deployed, activate the Site Collection Feature Questech Systems Picture Thumbnail Web Part. After that, the Picture Thumbnails Web Part (listed under Questech Systems) should be available for you to add to pages.

As mentioned, the Lightbox functionality depends on lightbox.css and picturethumbnails.css. If you have a custom CSS file for your site already, you could just copy the content out from the two files and paste it into your custom CSS. If you do not have a custom CSS file, you would need to either add it through the SharePoint UI Site Settings interface or insert it in your custom master page or page layout (for SharePoint Server 2010).
Tips: You can control the number of thumbnails shown per line by adjusting the width of the Web Part.

Please note that though this web part is licensed under The Code Project Open License, Litebox is licensed separately under Creative Commons Attribution 2.5.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Stephen Huen
Web Developer Questech Systems
Canada Canada
No Biography provided

Comments and Discussions

 
GeneralMy vote of 5 PinmemberGab2k18-Oct-12 11:47 
XD
QuestionAdding Page Navigation PinmemberRatan11325-Sep-12 6:41 
QuestionJavascript error after creating web parts - cannot add further webparts PinmemberEibhlin Ni Chleirigh11-Jul-12 1:39 
BugRe: Javascript error after creating web parts - cannot add further webparts PinmemberB Whitley21-Sep-12 17:10 
GeneralRe: Javascript error after creating web parts - cannot add further webparts PinmemberMember 84336731-Mar-13 3:38 
GeneralRe: Javascript error after creating web parts - cannot add further webparts PinmemberEibhlin Ni Chleirigh24-Nov-13 23:43 
QuestionHow to insert the css file PinmemberMember 816610115-Nov-11 20:47 
Buggot problem with this Gallery Picture web part Pinmemberspiderkzn23-Aug-11 3:19 
GeneralRe: got problem with this Gallery Picture web part PinmemberIgor Demjanov3-Jan-12 2:13 
GeneralRe: got problem with this Gallery Picture web part PinmemberStephen Huen3-Jan-12 8:17 
GeneralLightbox Overflow Pinmembercandice solomons27-Mar-11 23:16 
GeneralRe: Lightbox Overflow PinmemberMember 816610115-Nov-11 21:56 
GeneralSize of litebox image PinmemberRicardo.António.Leal17-Mar-11 1:00 
GeneralRe: Size of litebox image PinmemberMember 924654212-Jul-12 7:36 
GeneralRe: Size of litebox image PinmemberB Whitley30-Sep-12 9:31 
GeneralInstallation Pinmemberterrencejun32114-Nov-10 21:00 
GeneralProblem Pinmemberwavinitaly25-Oct-10 4:20 
GeneralRe: Problem PinmemberStephen Huen26-Oct-10 7:01 
GeneralRe: Problem Pinmemberwavinitaly27-Oct-10 21:43 
GeneralRe: Problem Pinmemberspiderkzn23-Aug-11 3:20 
GeneralRe: Problem PinmemberMember 816610115-Nov-11 22:01 
GeneralPaging Pinmemberjules_anime22-Jun-10 22:26 
GeneralRe: Paging PinmemberMember 816610116-Nov-11 1:39 
GeneralMy vote of 2 PinmvpMark Nischalke30-Apr-10 8:18 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140415.2 | Last Updated 1 May 2010
Article Copyright 2010 by Stephen Huen
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid