Click here to Skip to main content
15,861,172 members
Articles / Productivity Apps and Services / Sharepoint / SharePoint 2010

Picture Thumbnails Web Part (SharePoint 2010)

Rate me:
Please Sign up or sign in to vote.
4.44/5 (8 votes)
5 Jul 2014CPOL3 min read 113.5K   2.7K   22   27
Displays images from a SharePoint Picture Library in a widget-like thumbnail layout

Figure 1

Figure 1

Figure 2

Figure 2

Introduction

[A SharePoint 2013 version of the web part is available here.]

For use in Microsoft SharePoint 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 (see Figure 2).

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 added lightbox functionality to view the original image when user clicks on a thumbnail. There are many implementations or variations of Lightbox and I settled on using Lokesh Dhakar's Lightbox2 because of its compact size and relatively small number of supporting files.

Description

PictureThumbnailsWebPart has the following public properties:

  • SiteUrl - (Site URL) Server relative URL of the site. If left blank, current site is used.
  • ListTitle - (Picture Library Name) Name of a Picture Library.
  • 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 Lightbox2, allowing previous and next navigation.
  • IncludeJQuery - (Include jQuery?) Should web part include its own jQuery file? Default is true. Set it to false to use your custom master page's jQuery JavaScript file.

The Web Part 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. 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

If you are upgrading from a previous version, please refer to Version History for any special upgrade instructions.

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

Add-SPSolution "C:\_deployment\QuestechSystems.SharePoint.PTWebPart.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.

To control the number of thumbnails per row, specify a fixed width to the web part in the web part properties under Appearance.

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

History

  • V2.0 - 2014.07.05
    • Upgrade instructions from V1.0
      1. Delete all instances of old web parts.
      2. Retract old solution using PowerShell or via SharePoint 2010 Central Administration.
      3. Follow installation instructions as described in Installation section.
    • Switched to Lokesh Dhakar's Lightbox2 for lightbox functionality.
    • Support viewing of images bigger than your monitor size.
    • Built-in CSS styling so no more dependency on external CSS.
  • V1.0 - 2010.04.30 - Initial version

License

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


Written By
Software Developer (Senior)
Canada Canada
A Microsoft Certified Professional Developer and Technology Specialist.

Experience and expertise in SharePoint 2016 / 2013 / 2010 / 2007.

Role ranges from a developer in a multi-person team to a solution consultant with expert-level skills, leading a project to completion status.

Proven experience working effectively in a team environment and a self-managed environment.

Comments and Discussions

 
QuestionSize of thumbnail Pin
pablock817-Jul-15 22:57
pablock817-Jul-15 22:57 
Questionfile not found error Pin
Member 1103550425-Aug-14 20:09
Member 1103550425-Aug-14 20:09 
GeneralMy vote of 5 Pin
Volynsky Alex5-Jul-14 23:49
professionalVolynsky Alex5-Jul-14 23:49 
GeneralMy vote of 5 Pin
Gab2k18-Oct-12 11:47
Gab2k18-Oct-12 11:47 
QuestionAdding Page Navigation Pin
Ratan11325-Sep-12 6:41
Ratan11325-Sep-12 6:41 
QuestionJavascript error after creating web parts - cannot add further webparts Pin
Eibhlin Ni Chleirigh11-Jul-12 1:39
Eibhlin Ni Chleirigh11-Jul-12 1:39 
BugRe: Javascript error after creating web parts - cannot add further webparts Pin
BrianWhitley21-Sep-12 17:10
BrianWhitley21-Sep-12 17:10 
GeneralRe: Javascript error after creating web parts - cannot add further webparts Pin
Member 84336731-Mar-13 3:38
Member 84336731-Mar-13 3:38 
GeneralRe: Javascript error after creating web parts - cannot add further webparts Pin
Eibhlin Ni Chleirigh24-Nov-13 23:43
Eibhlin Ni Chleirigh24-Nov-13 23:43 
QuestionHow to insert the css file Pin
Member 816610115-Nov-11 20:47
Member 816610115-Nov-11 20:47 
Buggot problem with this Gallery Picture web part Pin
spiderkzn23-Aug-11 3:19
spiderkzn23-Aug-11 3:19 
GeneralRe: got problem with this Gallery Picture web part Pin
Igor Demjanov3-Jan-12 2:13
Igor Demjanov3-Jan-12 2:13 
GeneralRe: got problem with this Gallery Picture web part Pin
Stephen Huen3-Jan-12 8:17
Stephen Huen3-Jan-12 8:17 
GeneralLightbox Overflow Pin
candice solomons27-Mar-11 23:16
candice solomons27-Mar-11 23:16 
GeneralRe: Lightbox Overflow Pin
Member 816610115-Nov-11 21:56
Member 816610115-Nov-11 21:56 
GeneralSize of litebox image Pin
Ricardo.António.Leal17-Mar-11 1:00
Ricardo.António.Leal17-Mar-11 1:00 
GeneralRe: Size of litebox image Pin
Member 924654212-Jul-12 7:36
Member 924654212-Jul-12 7:36 
Same problem here. It's a great webpart but if it's not possible to control the size of the pictures I can't use it. It's too bad Confused | :confused:
GeneralRe: Size of litebox image Pin
BrianWhitley30-Sep-12 9:31
BrianWhitley30-Sep-12 9:31 
GeneralInstallation Pin
terrencejun32114-Nov-10 21:00
terrencejun32114-Nov-10 21:00 
GeneralProblem Pin
wavinitaly25-Oct-10 4:20
wavinitaly25-Oct-10 4:20 
GeneralRe: Problem Pin
Stephen Huen26-Oct-10 7:01
Stephen Huen26-Oct-10 7:01 
GeneralRe: Problem Pin
wavinitaly27-Oct-10 21:43
wavinitaly27-Oct-10 21:43 
GeneralRe: Problem Pin
spiderkzn23-Aug-11 3:20
spiderkzn23-Aug-11 3:20 
GeneralRe: Problem Pin
Member 816610115-Nov-11 22:01
Member 816610115-Nov-11 22:01 
GeneralPaging Pin
jules_anime22-Jun-10 22:26
jules_anime22-Jun-10 22:26 

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

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