I’ve been asked this enough lately that I thought I’d take a moment to spell it out with some visuals. When the time comes to add some visual appeal to your SharePoint Dashboards (sometimes this goes a long way to adding interest in the site and/or helping folks find their ‘stuff’.

 

First, before starting, create a picture library to store the images. I always create one called ‘SYSImages’ (I like to be consistent) and I don’t link it to the Quick Launch Bar (I use it for ‘internal’ stuff like icons and things to add flashiness to dashboards, etc.), so it’s nobody’s business but my own.

 

Create a Picture Library

 

 

Put Your Image in the Picture Library

 

 

Get the Image Path (URL)

Once you have your image in there, get the ‘URL’ to that image by opening the image fully in your browser (from the picture library) and clicking on it until it is the only thing in the browser and the link to the image is in the browsers address bar (i.e. http://portal/sysimages/someimage.jpg). The following screenshots will walk you through the process of getting the URL of the image on to your clipboard (for pasting later).

 

 

Note, the key here too, is to grab the ‘relative URL’ instead of the complete URL. While it is okay to capture the whole URL, it is better form to grab the portion after the domain name (FQDN) as you may have multiple ‘Alternate Access Mappings/Zones’ in the future (or now) for accessing the same site and putting full URL’s in there may break functionality or cause grief down the line.

 

Plunk that URL into a Web Part

 

I’m going to outline two options (but there are tones of ways to skin this cat)…

 

1. Use the Image Web Part – this one I don’t use much as it has limited functionality and you can make it a hyperlink to send people elsewhere (like an email icon to point someone to their webmail, for example). Thus, its not really all that functional

 

Using the Image Web Part

 

 

And you will probably want to ensure the ‘title’ text is turned off for the best visual appeal, to do this, set your ‘chrome’ to ‘None’.

 

 

And the result…

 

 

Use the Content Editor Web Part (CEWP)

 

1. Better still; use a ‘Content Editor Web Part’.  Using this, you can do whatever you like (and it will become your friend, fast).  Simply add the web part, then choose the rich text editor view and click the icon to add an image. Paste the URL in there and you are good to go, complete with a bunch of extra options.

 

 

And hide away the title text by setting your Web Part Chrome to ‘None’

 

 

3. Ok, I lied. I’ll provide a 3rd option – SharePoint Designer (which is now free – www.microsoft.com/spd) is a quick and very manipulateable (is that even a word?) tool that you can use to add the above web parts and configure the image and its properties with full control.  Notice I said to add the web parts still, as this will ensure your image exists in a web part zone, which is something you want to ensure whenever possible as editing the page itself (outside the zones) will present issues for you in the future during upgrades, etc.