+1-888-365-2779
Try Now
More in this section
Categories
Bloggers
Blogs RSS feed

Project #1 - Image gallery User Control (Part 2)

by Ivan Osmak

NOTE : This post is a part of a series. Read first part if you’ve missed it.

[VB.NET example]

So, after we have uploaded the images, now it’s time to create a user control that will display them. In case you are unfamiliar with using User Controls in Sitefinity consult Developer Manual on that subject. You can also check this post out to see how to work with a “live user control”.

To start with we’ll add four properties to our User Control.

  1. GalleryTitle - string value representing the title of the gallery
  2. RepeatColumns - integer value representing how many columns should gallery have
  3. MaxThumbWidth - integer value representing maximum width of a thumbnail in pixels
  4. GalleryFolder - string value representing the relative path to folder which contains the image files for the gallery (this is how we determine which gallery will be represented)

Next thing we are going to do is to declare a new class MyImage, which will represent a particular image inside of the gallery. This class contains only 5 properties and no methods.

  1. ImageUrl - the full url to the image
  2. ActualWidth - the actual width of an image in pixels
  3. ActualHeight - the actual height of an image in pixels
  4. ThumbWidth - the width of a thumbnail image in pixels
  5. ThumbHeight - the height of a thumbnail image in pixels

Now what’s left is to find all the image files inside of the Gallery Folder, create objects of type MyImage for each of them and bind the DataList control to the Array List containing these MyImage objects. All this will do in Page_Load method. Below is the link for the full source of the User Control code file.

OPEN THE CODE IN NEW WINDOW

Here you can take a look at the User Control source :

OPEN THE CODE IN NEW WINDOW

Let’s examine the User Control source a bit. First we have a label which displays the title of the gallery. Than there is our Data List and in the template you can see that each image we surround with a link that triggers the JavaScript function OpenImage. This JavaScript function opens the rad window, part of award-winning rad controls that come with Sitefinity.

So that’s all there is to it. One more thing should be noted though. The thumbnail resizing is done with HTML width and height attributes, which is obviously not a true resizing. This means that the actual size of file (in kb) is same as for the large image. This is not an optimal solution, but it will do for this example.

If you decide that you want to use actual thumbnails there are three different approaches that you can take :

  1. Manually create thumbnail images with free software such as Picasa and upload them together with the original images. You would need to modify the code a bit to look for thumbnail images as well as for the originals.
  2. Secon option you have is to map image files (.jpg and .gif) to Asp.NET engine and write a http handler that would dynamically resize images.
  3. Third option would be to dynamically create thumbnails and save them in a separate folder. This approach is actually a mix of first two approaches.

The true resizing is actually beyond the scope of this post so I won’t elaborate any more on that, but if you are persistant engouh we just may make a project out of it and write a tutorial on dynamic resizing with Sitefinity :)

I hope you’ll find a use of this project.

1 comment

Leave a comment
  1. Seth Cleaver Jul 05, 2007
    I would be interested in seeing a project come out of this.

    Leave a comment