So you’ve written a nice web part solution, ready to release it onto your clients environment, but wait a minute! How do they know you wrote it for them? All you’ve got is those generic icons that microsoft provide you.
This is the situation i found myself in recently, and realised that with my change in job role comes the requirement to make sure people are aware of the things that I’ve done. To this end, I decided to make sure that the company log is displayed in the Feature Activation page and in the Web Part Catalog.
At this point, I’m going to assume that you’re aware of Features and how to wrap them up in a solution package.. if you’re not, then this might not be the best post for you to start at.. in fact I’d suggest you get a copy of Inside Microsoft Windows SharePoint Services 3.0 by Ted Pattison and Daniel Larson.
Starting at the solution level, we need to place the icon that we want to use into an area accessible by the Web part. what better place than _Layouts/Images?
If you’ve followed the recommend webpart creation guidelines, you should have a directory structure in your VS2005 project that resembles TEMPLATE\FEATURES etc etc..
now under TEMPLATE add a new directory of IMAGES and then your own directory under this e.g. CUSTOMLOGOS (This is best practice to seperate your images from Microsofts in the IMAGES directory to avoid filename conflicts.)
In this directory, place your chosen .JPG file which should be approximately 44 pixels square.
The first task is to ensure that this file is included in your .WSP package. To do this, make sure the following line is in your DDF file. (NB: this is all on one line.. but my blog isn’t wide enough to display it!)
TEMPLATE\IMAGES\CUSTOMLOGOS\custom_logo_44sq.jpg IMAGES\CUSTOMLOGOS\custom_logo_44sq.jpg
And in your manifest.xml you’ll need a corresponding entry:-
<TemplateFiles>
<TemplateFile Location="IMAGES\CUSTOMLOGOS\custom_Logo_44sq.jpg"/>
</TemplateFiles>
The section above basically just copies your chosen logo into the IMAGES and makes it available using the URL \IMAGES\CUSTOMLOGOS\custom_logo_44sq.jpg
The next step is to make this icon appear on the Feature activation page. This is very simple to achieve and just a matter of adding or amending the ImageUrl property of the Feature tag in your Feature.XML
<?xml version="1.0" encoding="utf-8" ?></code>
<Feature
Id="00000000-0000-0000-0000-000000000000"
Title="My custom branded web part"
Description="This feature uses custom branding."
Hidden="FALSE"
Scope="Site"
ImageUrl="BlueSource/BlueSource_Logo_43sq.jpg"
xmlns="http://schemas.microsoft.com/sharepoint/">
<ElementManifests>
<ElementManifest Location="elements.xml"/>
</ElementManifests>
</Feature>And then finally we want to make the image appear in the Web part gallery. This requires a change to the webpart file itself. Inside the Properties markup, add a new property tag similar to the following:-
<property name="CatalogIconImageUrl" type="string">/_layouts/images/bluesource/bluesource_logo_43sq.jpg></property>
NB: Ensure that you don’t add any carriage returns or line feeds in the above statement. If you do, then there is a good chance that your image will only appear on either the pop up webpart catalog, or the advanced web part window, but not both. if that happens, check the line above in your .Webpart file.
And there you have it.. Deploy your solution and your icon will be visible on both the Feature activation screen and the Webpart gallery screen.
I hope this helps.
Reg.