Skip to main content

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

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.).
pic1.jpg
Picture 1.
5. Click View All Site Content and then click Create (Picture 2.)
pic2.jpg
Picture 2.
6. In the Create window click the Picture Library under the Libraries title (Picture 3.).

pic3.jpg
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.).
pic4.jpg
Picture 4.
10. In the Customize Pic Library window click the Create column under
the Columns heading (Picture 5.).
pic5.jpg
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.).
pic6.jpg
Picture 6.
17. Click the dropdown button next to a picture name and then click
the Edit Properties (Picture 7.).
pic7.jpg
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.).
pic8.jpg
Picture 8.
22. In the Solution Explore, right click References, and then on Add Reference (Picture 9.).
pic9.jpg
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:
Collapse
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
Collapse
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:
Collapse
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/
Collapse
metaDataQuery.Lists = "<Lists ServerTemplate=\"109\" />";
30. Recall the Description column in the Pic Library. Assign the column name to ViewField.
Collapse
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.
Collapse
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):
Collapse
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.).
pic10.jpg
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.).
pic11.jpg
Picture 11.
35. Open the Team Information Portal and click the Site Action dropdown button and then click the Edit Page (Picture 12).
pic12.jpg
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.).
pic13.jpg
Picture 13.
39. Click the Team Information Portal tab and you will see your portal with the ImgAndLink web part (Picture 14.)
pic14.jpg
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.

Comments

Post a Comment

Popular posts from this blog

Sharepoint 2010 Subsites webpart

This posting was originally made by Arild Aarnes and it is in here . This is a simple webpart to show a list (with links) of subsites immediately below the current site. This webpart will work on both Sharepoint 2010 and Sharepoint Foundation. On Sharepoint 2010 you could have used the built in “Table of Contents” webpart to do similar things but this one can also display the list as a dropdown list to save space on the webpage and it can open links in a new window. All the settings can by edited in the webpart configuration panel. The settings are: Show bullet in list – this will display the small square gif in front of the site name Open link in new window – this will open the subsite in a new window Show Site Description – this will show the description you entered when you created the subsite Show icon – Shows a icon for the type of subsite, see picture. Show as dropdown list – Will display the subsites in a dropdown box to save space. The webpart can be downl
1 comment
Read more

Configuring the User Profile Service in SharePoint 2010

I will share with you my step by step guide in setting up the User Profile Service application, focusing on its configuration and administration and how we can enable the creation of user profiles via an Active Directory import . SharePoint 2010 introduces the notion of “Service Applications” which build’s upon the “Shared Services Provider (SSP)” which was introduced in SharePoint 2007.  Service Applications are individual services that can be configured independently and can be shared across other sites within your farm with some service applications that can also be configured across farms. The individual service applications provided with SharePoint 2010 are listed as follows; Access Services Business Data Connectivity Document Conversion Excel Services Managed Metadata Service PerformancePoint Search Service Secure Store State Service Visio Graphics Service User Profile Service This article will build upon our initial SharePoint 2010 install utilizing the least privi
Post a Comment
Read more

The Text Filter Web Part – Without Having To Filter Exact Text

This posting I took it from  Here   This applies to both SharePoint 2007 and 2010.  In MOSS Enterprise, and the 2010 version of Enterprise.  There is an out-of-box web part called the Text Filter Web Part .  Basically, when you put this web part on a page, and put a list or library web part on the same page, you then create a web part connection that sends the text typed in the box as a filter to one of the columns in the web part, like this: The name Molly Clark had to be typed in exactly.  So, if you typed “Molly”, this record would not come up.  People use the text filter web part when they just want to search a single column in a list or library.  Otherwise, you’d simply use the “Search” box at the top of the screen, choose “This List” or “This Site” and perform SharePoint searches that way. One more note before I get into today’s solution: If you’re making use of site columns in your lists, there’s a setting where you can specifically select which columns you do N
6 comments
Read more

Telephone format for a text box on infopath form

If you want to create a Telephone format on a infopath form : 1. Add a text field to the form (Even if it is the list or a blank form) 2. Select the text box and click on Manage Rules 4. Add a rule to your textbox control with the following conditions (make sure to select "and" operator):     a. field "does not match pattern" Phone number     b. the expression: string-length(translate(., "()- ", "")) = 10     c. the expression: string-length(translate(., "()- 0123456789", "")) = 0 5. Add action to the rule:     a. Set a field's value     b. Select your textbox field     c. Insert formula for the value (click the fx button): concat("(", substring(translate(., "()- ", ""), 1, 3), ") ", substring(translate(., "()- ", ""), 4, 3), "-", substring(translate(., "()- ", ""), 7, 4)) Link for the detailed explanation :  http:
5 comments
Read more

HOWTO: change the home button text on the top link bar in sharepoint 2010

Hi All, I got a requirement that the title of the site collection which shows the first button on the top link bar to be different from the title. for example: my sharepoint site title is " Srikanth SharePoint Blog" and I need to show"Home" on the top link bar. It shows Home when the publishing features are not enabled. But once the publishing features are enabled it shows the same as the title("srikanth sharepoint blog" in my case instead of "Home").In other blogs I saw the solution as "in SITE ACTIONS>SITE SETTINGS>LOOK AND FEEL> TOP LINK BAR" , but once the publishing features are enabled, you don't see the "TOP LINK BAR" under "LOOK AND FEEL"(ofcourse it is changed to "NAVIGATION" , when publishing features are enabled). In this case : 1. Hide the initial button by adding code in css.    .s4-tn li.static > a{ display: none !important; } .s4-tn li.static > ul a{ display: bloc
6 comments
Read more

SharePoint Branding and Design in 2010-2

Update: Really Small SharePoint Calendar I really was not that happy with the look of the first calendar so after some modifications and a bit of CSS magic I have come up with a really good looking small calendar. At least I think so… Basically I have replaced the text of an event item with a color coded box. The benefit that you get out of this is that you don’t have to try and read the even within the small calendar but if you hover over and click on the color block you get the list Item display. Orange is for single event items (8am-10am, etc) Green is for full day events or repeat events Another nice feature to this is that I have also simplified the visual indicator when there are more then two event items in one day. Instead of seeing the arrow and text all you see is the arrow. Once you click on the arrow it will show the other blocks of events (Right image). Here is the CSS Code: Download Here Simply place a content editor web part on the same page as the calendar
Post a Comment
Read more

SharePoint Branding and Design in 2010

Hide First Tab in SharePoint 2010 Navigation I created a blog post on this for SharePoint 2007 HERE : But SharePoint 2010 is a bit more complex. Since it uses UL’s and Li’s for it’s navigation it is a bit harder to hide just one element. You will notice that the Home tab actually is the first node and then has a child UL which represents the rest of the navigation Items. So the approach is to hide the first <li> <a> (display: none) and then simply just use (display:block ) to show the hidden <ul> <li> <a> tags. Here is the CSS you could use to hide just the first node (home) tab in a SharePoint 2010 application: .s4-tn li.static > a{ display: none !important; } .s4-tn li.static > ul a{ display: block !important; } Enjoy! Posted by Erik Swenson at 12:12 PM 2 comments Labels: Branding , CSS , SharePoint 2010 Wednesday, August 18, 2010 How To: Hide Left Side Navigation on Home Page I was recently asked: " How can I hide the sid
1 comment
Read more

Data View conditional formatting using SharePoint Designer

Data View conditional formatting using SharePoint Designer This article demonstrates how to use SharePoint Designer 2010conditional formatting to format items in a SharePoint (SPS 2010) list based on item metadata. The example uses a standard SharePoint task list and formats tasks based on the due date. The end result is a list view sorted by due date with item text or background coloured to represent the number of days until the due date. The Process In this example I have started with a standard task list and have created a few sample items for testing / demonstration. From the task list, create a new view, starting from the default “Active Items” view (filtered to only display incomplete tasks). The view created in the example is called “Active – Coloured” Open the view using SharePoint Designer. Right click on the List View Web Part and select “Convert to XSL Data View”. This will automatically convert settings for the current view into da
2 comments
Read more