Note : The images in this project are taken from www.sxc.hu and are ownership of their respective authors. I’ve used animals because the constraints for using actual people are a bit more complex.
For the first project I’ve chose something simple yet very useful: an Image gallery User Control. The scenario is very common. Let’s say you run a web site for a local chamber of commerce. So, here and there members of this chamber go to conventions, trips, throw parties and stuff like that. They shoot tons of pictures while there and they want this pictures to accompine the report from the event.
The plan of action
If we think of this on a very abstract level, there are three basic functionalities we need to provide for Image Gallery.
- Upload images / manage galaries
- Display thumbnails for chosen gallery on the page
- Pop up a new window with actual size of an image when user clicks on the thumbnail
Now, the good news is that we’ll take advantage of Sitefinity’s built in features and will have to do on our own just the bullet #2 from the list.
Upload images / manage galleries
You are probably aware of the fact that one of the core modules of Sitefinity is File Manager. Yeah, now it’s pretty obvious… hehe. So open the File Manager in Sitefinity and create one folder where you will hold all the galleries. Let’s be excentric and call it “ImageGalleries”. Inside of this folder you would then create folders that represent particular gallery (like in my example, there is “Animal” gallery and “Flowers” gallery). The last thing you need to do is upload the images inside of the gallery folder (you see files animal1.jpg through animal6.jpg in my screenshot). And that’s it… the “Image and Gallery Managment System”
In part 2 of this series we are going to create a user control that will display thumbnails on the page provide the pop up functionality which will display the real size image in a new window.