How to create a MOSS 2007 web part that has an image and a link by using picture library

Download ImgAndLink.zip - 430.75 KB

Introduction

Every team needs to track news and events. Basically news and events are presented
in a portal by a small image and a short description. If a user likes to read a whole article
she or he can click on a description and she or he will be redirected to an original source.
Administrator or a certain user has rights to update news and events information.

In MOSS 2007, administrator or user can create a Link list and add an Image column
to the list. Image URL is presented in this Image column. Using this list, administrator
or user can create a web part with an image and a link to the original source. We have
an image somewhere, for example in a picture library, and a link in the Link list. Every
time when a link is created it must be mapped to a picture in the picture library.
In this scenario we work with two libraries. It is obvious, that it is more productive
to work with just one library and without finding a URL for every image

Using the code

This article gives step-by-step instructions on how to create a SharePoint Server 2007 web
part that can be used to present news and events. The web part contains small images and
descriptions that are links to an original source. Images, descriptions, and links are taken from
a Picture Library.

Create a portal in which this web part will be present.

1. Click the Start button and choose Microsoft Office Server – SharePoint 3.0
Central Administration.

2. Click the Application Management on the left side and then click Create site
collection under SharePoint Site Management.

3. Give a title and description (I gave Team Information Portal), Web Site Address
(I gave tip), select Template (I selected Publishing – Collaboration Portal),
Primary Site Collection Administrator, and click the OK button.

4. Remember the portal URL (Picture 1.).

Picture 1.

5. Click View All Site Content and then click Create (Picture 2.)

Picture 2.

6. In the Create window click the Picture Library under the Libraries title (Picture 3.).

Picture 3

7. Print a Library Name in the Name text box. I called it “Pic Library”.

8. Print something in the description field, for example: “This picture Library
utilizes images, titles, and links to an original source”. Leave other settings
as default.

9. Click the Settings dropdown button and then click on the Picture Library
Settings (Picture 4.).

Picture 4.

10. In the Customize Pic Library window click the Create column under
the Columns heading (Picture 5.).

Picture 5

11. In the Create Column: Pic Library window, print a column name in the Column
name text box. I called it “Link”. Select Multiple Lines among the text radio
buttons. Fill out the Description text box. Leave other settings as default.

12. Click on the Pic Library link.

13. In the Pic Library window, click the Upload the dropdown button and then
click the Upload Multiple Pictures.

14. In the Upload Selected Pictures – Microsoft Office Picture Manager, select
pictures and then click the Upload and then Close button.

15. Click the Go Back to “Pic Library” link.

16. In the Pic Library window, click the All Pictures dropdown button,
select All Pictures, and then click the Details (Picture 6.).

Picture 6.

17. Click the dropdown button next to a picture name and then click
the Edit Properties (Picture 7.).

Picture 7.

18. Print a title or a description of external news or events in the Description
text box.

19. Print a URL of the original source in the link text box.

20. Repeat step 19 for all other images in the Pic Library.

21. Open Visual Studio 2005 and create a Web Part Project (File – New - Project).
I named it as ImgAndLink (Picture 8.).

Picture 8.

22. In the Solution Explore, right click References, and then on Add Reference (Picture 9.).

Picture 9.

23. From the Add Reference window select the.NET tab and then select System.Data.

24. Add using statements: using System.Data and using System.Web.UI.WebControles.

25. Delete Constructor.

26. Define variables:

string siteUrl = SPContext.Current.Web.Url;

WebBrowsable(true),
Personalizable(PersonalizationScope.Shared),
FriendlyName("The Site URL of Picture Library")]
public string SiteURL
{
   get
   {
       return siteUrl;
   }
   set
   {
       siteUrl = value;
   }
}

27. Recall in the item 7, the library that was created and named “Pic Library”. Assign this name to the string variable namePictureLibrary

       string namePictureLibrary = "Pic Library";

        public string NamePictureLibrary
        {
            get
            {
                return namePictureLibrary;
            }

            set
            {
                namePictureLibrary = value;
            }
        }

        string serverpath;

        SPListItemCollection imageListItems;
        DataTable imageMetaDataItems;
        DataRowCollection rows;
        DataTable imageMetaDataItemsTitle;
        DataRowCollection rowsTitle;

        Image image = new Image()

28. Create a method and insert the following code:

        protected override void CreateChildControls()
        {
           //Set image size in the web part

           image.Height = 100;
           image.Width = 100;

           //Take images from the Picture Library of SharePoint Portal 
            try
            {
                using (SPSite site = new SPSite(SiteURL))
                {
                   using (SPWeb spweb = site.OpenWeb())
                   {
                       SPList list = spweb.Lists[NamePictureLibrary];
                       SPQuery query = new SPQuery();
                       query.Query = "";

                        serverpath = site.Url.ToString() + "/";

                        imageListItems = list.GetItems(query);

                        if (imageListItems.Count <= 0)
                        {
                            this.Page.Response.Write("No image found");
                        }


                        SPWeb metaDataSite = SPContext.Current.Web;
                        SPSiteDataQuery metaDataQuery = new SPSiteDataQuery();

29. You can find all the numbers of Server Templates in the URL: http://abstractspaces.wordpress.com/tag/reference-cheat-sheet-caml-basetype-servertemplate/

                         metaDataQuery.Lists = "<Lists ServerTemplate=\"109\" />";

30. Recall the Description column in the Pic Library. Assign the column name to ViewField.

                        metaDataQuery.ViewFields = "<FieldRef Name=\"Description\" />";
                        metaDataQuery.Webs = "<Webs Scope='SiteCollection' />";

                        SPSiteDataQuery metaDataQueryTitle = new SPSiteDataQuery();
                        metaDataQueryTitle.Lists = "<Lists ServerTemplate=\"109\" />";

31. Assign the Link column name to the ViewField.

                        metaDataQueryTitle.ViewFields = "<FieldRef Name=\"Link\" />";
                        metaDataQueryTitle.Webs = "<Webs Scope='SiteCollection' />";

                        imageMetaDataItems = metaDataSite.GetSiteData(metaDataQuery);
                        rows = imageMetaDataItems.Rows;
                        imageMetaDataItems.Columns.Remove("ListId");
                        imageMetaDataItems.Columns.Remove("WebId");
                        imageMetaDataItems.Columns.Remove("ID");

                        imageMetaDataItemsTitle = metaDataSite.GetSiteData(metaDataQueryTitle);
                        rowsTitle = imageMetaDataItemsTitle.Rows;
                        imageMetaDataItemsTitle.Columns.Remove("ListId");
                        imageMetaDataItemsTitle.Columns.Remove("WebId");
                        imageMetaDataItemsTitle.Columns.Remove("ID");
                    }
                }
            }
            catch (Exception ex)
            {
                Controls.Clear();
                Label errorMessage = new Label();
                errorMessage.Text = "There was error in the code. Message: " + ex.Message;
                Controls.Add(errorMessage);
            }
            base.CreateChildControls();
        }

32. Insert the following code in the Render method (This code creates a table and uses Description column data from the SharePoint Picture Library as a link. The Link Url is taken from the Link column of the same SharePoint Picture Library):

        protected override void Render(HtmlTextWriter writer)
        {
            writer.AddAttribute("Border", "0");
            writer.AddAttribute("width", "100%");
            writer.RenderBeginTag("Table");
            int i;
            int im = imageListItems.Count;
            for (i = 0; i < im; i++)
            {
                writer.RenderBeginTag("Tr");
                writer.AddAttribute("width", "120");
                writer.RenderBeginTag("Td");
                image.ImageUrl = serverpath + imageListItems[i].Url.ToString();
                image.RenderControl(writer);
                writer.RenderEndTag();
                DataRow row = rows[i];

                foreach (DataColumn col in imageMetaDataItems.Columns)
                {                    
                    writer.RenderBeginTag("Td");

                    row = rowsTitle[i];
                    DataColumn colT = imageMetaDataItemsTitle.Columns[0];
                   

                    writer.AddAttribute(HtmlTextWriterAttribute.Href, row[colT].ToString());
                    writer.RenderBeginTag(HtmlTextWriterTag.A);
                    row = rows[i];
                    writer.WriteLine(row[col]);
                    writer.RenderEndTag();

                    writer.RenderEndTag();
                }

                row = rowsTitle[i];
              

                writer.RenderEndTag();
            }

            writer.RenderEndTag();

            // TODO: add custom rendering code here.
            // writer.Write("Output HTML");
        }

33. Right click the ImgAndLink project in the Solution Explorer and then click Properties (Picture 10.).

Picture 10.

34. In the Properties window select Debug and insert the URL of the portal we created in step 4. Click the Start Debugging or press the F5 button (Picture 11.).

Picture 11.

35. Open the Team Information Portal and click the Site Action dropdown button and then click the Edit Page (Picture 12).

Picture 12.

36. In the Top Zone click Add Web Part.

37. In the Add Web Parts – Web Page Dialog click the Advanced Web Part gallery options link.

38. Drag the ImgAndLink Web Part from Add Web Parts pane and drop it into the Top Zone Picture 13.).

Picture 13.

39. Click the Team Information Portal tab and you will see your portal with the ImgAndLink web part (Picture 14.)

Picture 14.

Now the portal has the web part containing images and links to the external source of news or events. Portal administrator or user inserts images, titles, descriptions, and links only in the Picture library.