locked
Dynamic Header Banner Image using webpart RRS feed

  • Question

  • Hi,

    I need to change the header banner image depending upon the site (all under same site collection), also i need to create a webpart that will store the images(so that end users\admins can change the image).
    What is the best way to go ahead with this implementation?

    I tried adding a webpart to master page header but was not successful. what are the correct steps to do this, i am using SP Designer.

    Thanks
    Wednesday, September 2, 2009 8:50 AM

Answers

  • I would store the images in an image library on the root site with a column which contains the path to the site each image belongs to, e.g., /SiteA/SiteB. Then I'd add a Data View Web Part (DVWP) to the master page which fetches the appropriate image for the current URL. The URL is available as a Server Variable. M.
    Marc D Anderson - Sympraxis Consulting LLC - Marc D Anderson's Blog - @sympmarc
    • Marked as answer by GuYuming Monday, September 7, 2009 6:52 AM
    Wednesday, September 2, 2009 12:37 PM
  • Vishal,

    You can use the below code to generate dynamic banner webpart, before executing the webpart first of all you have to create a Picture Library name it as Pic Lib and create Status column with Choice filed type, then add two choice items Active and Inactive . The code brings the Active image row with the help of CAML query from Picture Library and displays in the webpart, so better you place the webpart in master page on top in TD tag
    If you want to change the banner you have to change the status column value to Active and make the older image status property to Inactive

    using System;
    using System.Runtime.InteropServices;
    using System.Web.UI;
    using System.Web.UI.WebControls.WebParts;
    using System.Xml.Serialization;
    using System.Web.UI.WebControls;
    
    using Microsoft.SharePoint;
    using Microsoft.SharePoint.WebControls;
    using Microsoft.SharePoint.WebPartPages;
    
    namespace MSDN
    {
        [Guid("30cfdaad-921d-45ca-ad86-144d11b2a156")]
        public class MSDN : System.Web.UI.WebControls.WebParts.WebPart
        {
            Image myimage = new Image();
            protected override void CreateChildControls()
            {
                myimage.Height = 140;
                myimage.Width =999;
                SPSite mysite = SPContext.Current.Site;
                SPWeb myweb = SPContext.Current.Web;
                SPList mylist = myweb.Lists["Pic Lib"];
                SPQuery myquery = new SPQuery();
                myquery.Query = "<OrderBy><FieldRef Name='FileLeafRef' />"+
                                "<FieldRef Name='Status' /></OrderBy>"+
                                "<Where><Eq><FieldRef Name='Status' />"+
                                "<Value Type='Choice'>Active</Value></Eq></Where>";
                string serverpath = mysite.ServerRelativeUrl.ToString();
                SPListItemCollection mylistitem = mylist.GetItems(myquery);
                if (mylistitem.Count > 0)
                {
                    myimage.ImageUrl = serverpath + mylistitem[mylistitem.Count - 1].Url.ToString();
                }
                else
                {
                    this.Page.Response.Write("No image found");
                }
                base.CreateChildControls();
            }
            protected override void Render(HtmlTextWriter writer)
            {
                myimage.RenderControl(writer);          
            }
        }
    }
    • Marked as answer by GuYuming Monday, September 7, 2009 6:53 AM
    Wednesday, September 2, 2009 1:45 PM
  • What is the header banner image you mean? On figure 2 and table 2 in this page: http://msdn.microsoft.com/en-us/library/ee354191.aspx , you can find the name of Major functional areas of a SharePoint interface.

     

    If you mean the title area image, you can edit it site by site in Site Actions->Site Settings->Title, Description, and Icon->Logo URL and Description.

    • Marked as answer by GuYuming Monday, September 7, 2009 6:53 AM
    Thursday, September 3, 2009 6:15 AM
  • thanks!! guys I was in a real hurry to finsih this requirement off, like just 2 days.. :(
    My solution was very basic one using javascript on masterpage to check if image exist in the publishedImage folder, then check the name of images in the folder and set it according to the page(i needed to keep the image name same as the site on which it is used) this solution is for short term i would defiantly like to use a better method.
    I will defiantly give your methods a try once i get some time..

    • Marked as answer by GuYuming Monday, September 7, 2009 6:53 AM
    Thursday, September 3, 2009 6:32 PM

All replies

  • I would store the images in an image library on the root site with a column which contains the path to the site each image belongs to, e.g., /SiteA/SiteB. Then I'd add a Data View Web Part (DVWP) to the master page which fetches the appropriate image for the current URL. The URL is available as a Server Variable. M.
    Marc D Anderson - Sympraxis Consulting LLC - Marc D Anderson's Blog - @sympmarc
    • Marked as answer by GuYuming Monday, September 7, 2009 6:52 AM
    Wednesday, September 2, 2009 12:37 PM
  • Vishal,

    You can use the below code to generate dynamic banner webpart, before executing the webpart first of all you have to create a Picture Library name it as Pic Lib and create Status column with Choice filed type, then add two choice items Active and Inactive . The code brings the Active image row with the help of CAML query from Picture Library and displays in the webpart, so better you place the webpart in master page on top in TD tag
    If you want to change the banner you have to change the status column value to Active and make the older image status property to Inactive

    using System;
    using System.Runtime.InteropServices;
    using System.Web.UI;
    using System.Web.UI.WebControls.WebParts;
    using System.Xml.Serialization;
    using System.Web.UI.WebControls;
    
    using Microsoft.SharePoint;
    using Microsoft.SharePoint.WebControls;
    using Microsoft.SharePoint.WebPartPages;
    
    namespace MSDN
    {
        [Guid("30cfdaad-921d-45ca-ad86-144d11b2a156")]
        public class MSDN : System.Web.UI.WebControls.WebParts.WebPart
        {
            Image myimage = new Image();
            protected override void CreateChildControls()
            {
                myimage.Height = 140;
                myimage.Width =999;
                SPSite mysite = SPContext.Current.Site;
                SPWeb myweb = SPContext.Current.Web;
                SPList mylist = myweb.Lists["Pic Lib"];
                SPQuery myquery = new SPQuery();
                myquery.Query = "<OrderBy><FieldRef Name='FileLeafRef' />"+
                                "<FieldRef Name='Status' /></OrderBy>"+
                                "<Where><Eq><FieldRef Name='Status' />"+
                                "<Value Type='Choice'>Active</Value></Eq></Where>";
                string serverpath = mysite.ServerRelativeUrl.ToString();
                SPListItemCollection mylistitem = mylist.GetItems(myquery);
                if (mylistitem.Count > 0)
                {
                    myimage.ImageUrl = serverpath + mylistitem[mylistitem.Count - 1].Url.ToString();
                }
                else
                {
                    this.Page.Response.Write("No image found");
                }
                base.CreateChildControls();
            }
            protected override void Render(HtmlTextWriter writer)
            {
                myimage.RenderControl(writer);          
            }
        }
    }
    • Marked as answer by GuYuming Monday, September 7, 2009 6:53 AM
    Wednesday, September 2, 2009 1:45 PM
  • What is the header banner image you mean? On figure 2 and table 2 in this page: http://msdn.microsoft.com/en-us/library/ee354191.aspx , you can find the name of Major functional areas of a SharePoint interface.

     

    If you mean the title area image, you can edit it site by site in Site Actions->Site Settings->Title, Description, and Icon->Logo URL and Description.

    • Marked as answer by GuYuming Monday, September 7, 2009 6:53 AM
    Thursday, September 3, 2009 6:15 AM
  • thanks!! guys I was in a real hurry to finsih this requirement off, like just 2 days.. :(
    My solution was very basic one using javascript on masterpage to check if image exist in the publishedImage folder, then check the name of images in the folder and set it according to the page(i needed to keep the image name same as the site on which it is used) this solution is for short term i would defiantly like to use a better method.
    I will defiantly give your methods a try once i get some time..

    • Marked as answer by GuYuming Monday, September 7, 2009 6:53 AM
    Thursday, September 3, 2009 6:32 PM