Making Department Images Consistent in SharePoint

Using a standard page image format is a good way to provide consistency to SharePoint department sites and to reinforce the corporate brand. Unless there is a corporate style guide in place, you will often find that department images come in all shapes and sizes, which provides for an uneven user experience when navigating the site. One way to ensure consistency and still empower users to select department images without requiring a graphic artist on staff is to use the following technique:

Create a transparent PNG and apply graphical elements such as borders, drop shadows, or bevels that will help define a look and feel. The image below has a drop shadow on the top border and a solid bar on the bottom. This will serve as a frame for your department image. Upload this image to the Site Collection Images library of your site’s parent site collection.

3

Choose an image for the department and resize/crop it to the exact dimensions of the frame image. Resizing and cropping an image is a relatively simple task that can be done with a basic graphics editor like Microsoft Paint. Give it a generic name such as “default.png”

 

Upload this image to the library of your choice. In this case it has been uploaded to a Publishing Site’s standard “Images” library. Right click the image link and copy the URL. This URL will be used to add the department image as the background CSS property of the frame image you prepared first.

1

Insert the image on your page using the following code:

<img width=”919″ height=”450″ alt=”Placeholder Image” src=”/SiteCollectionImages/department-frame-image.png” border=”0″ style=”background: url(&quot;../publishingimages/default.png&quot;) no-repeat;”>

 

Your image will appear on the page with the frame image “overlayed”.

2

Department users will be able to easily switch out the department image by uploading an image with the same name to the library and overwriting the former image.

Happy branding!!!!

October 24, 2013