Skip to content

Designing Web Parts: A Quick Reference Sheet

June 3, 2010

For the past few days, I’ve been working on designing a web part that in essence builds a Coin Slider slideshow given the name of a Picture Library. This has some inherent problems, and the main one I’m dealing with is varying image size. This slideshow script displays each picture as a background image —this means that if the box is too big for the picture, it will tile, and that doesn’t look too pretty. The best dynamic solution I’ve come up with is to set the slideshow size to the dimensions of the smallest image in the library (and hope there aren’t any really weird dimensions like 20×500 that will display wrong). Much to my dismay, several Javascript solutions failed, so I am currently developing logic in the .cs file. That’s easier said than done. If you find yourself in a similar situation dealing with picture info while designing a Web Part, the following should be at least marginally useful to you.

Section 1: Formatting the URL

If you just pull the list name and filename into your Web Part, characters like spaces are going to come over normally, which works in most browsers but it’s better to convert those to %20’s to be safe. C# has a nice little method for doing this:


This will turn yourContentHere into something web-friendly that any browser can understand without a problem.

Section 2: Pulling image data

Now that you have the image displaying correctly according to semantics and Internet Explorer (two polar opposites, coincidentally), you might want to pull in image data such as dimensions. For my Web Part, I’m looping through all the items in a given Picture Library with each item named, cleverly, item. To get the width and height, you would do something like this:

script.Append("Image dimensions: " + item["Picture Width"].toString()
   + " x " + item["Picture Height"].toString());

Believe it or not, those are indeed what Sharepoint names the respective values. That code would have the following output for a 900 x 900 picture:

Image dimensions: 900 x 900

Using this information, I can determine the smallest dimensions (by using Area so as to include both width and height) and display my slideshow accordingly. For any other field in the Library, just use item["FieldName"] to refer to it. For example, I have a field called “Alt” for the alternate text attribute of my images. To call them, I just use:

script.Append("<img alt=\""+ item["Alt"].toString() +"\">");

Hopefully this will shine a little bit of light on how to design a Web Part that pulls data from a Library.

Part 3: Using this data

Now, I want to run some basic calculations on the height and width of images. To do this, they need to be of the data type int (or similar). The value returned by item["Picture Height"] is of the data type Object. This is a problem. A problem overcome by the following code:

height = Convert.ToInt32(item["Picture Height"]);
width = Convert.ToInt32(item["Picture Width"]);

And now I have my int variables height and width with integer values, ready for whatever math I can throw at them.

Edit: I forgot to include something that might be important. In case you wondered what I was referencing with script, as in script.Append(), it’s defined as such:

System.Text.StringBuilder script = new System.Text.StringBuilder();

Which just means it’s the code my script builds and ultimately outputs. Sorry about any confusion that may have caused.

No comments yet

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: