If you do SharePoint front-end UI/UX customizations using HTML and CSS you have probably run across this need: to re-use some of the images already available in the farm in your custom markup or styles sheets. But knowing what is available is not a strait forward process and for a while there I resorted to looking around the out-of-the-box forms see what they displayed and grab the code…
I few years ago I had found a page at Bits Of SharePoint Consulting (by Peter Allen – @peterhallen) which did the trick, but a few weeks ago it was not available which caused me some frustration. My most recent need was to find two icons for use in a custom SharePoint Ribbon to represent Next and Previous (data paging) actions.
I had been wanting to create my own reference list of images so that I could remove the dependency on the site referenced above. My goal was to be able to display these images on a customized ASPX page and use it to quickly grab the url path of the desired image. Creating this single ASPX page allows me to drop it into a Document Library of the site I’m customizing and quickly see what’s available.
With a little help from Google and from Marc Andersen (@sympmarc), I collected a list of images and created the reference page. The page allows filtering of images by size – small, medium large – and when an image is clicked, the image’s information is displayed on a static footer area (#1 in screen capture below). In addition, I often find more than one image I like as I browse through the list, so I wanted a way to “remember” an image (#2 in screen capture below) so that I can reference those later (#3 in screen capture below) when I’m done browsing them.
The think that you will realize quickly, when browsing the many images available, is how much duplication there is. I’m going to guess that Microsoft® development teams probably don’t have this type of tool in-house, and thus just keep dumping new images into the folders not realizing the image they ware looking to use may already exist.
I thought about releasing this utility as a one-time GIST, but decide to create a project on github instead to manage this little utility – https://github.com/purtuga/SPImages/. The single aspx page can be downloaded from the ‘utility‘ directory.
As it stands, this utility is serving up the initial needs very well – I have used it now several times and am very happy with version “1.0”. However, there is always room for improvement.
- I may still be missing some images, specially for SharePoint 2013 – I have found some that are hosted from /_layouts/15/1033/images/, but have not been able to get a list of everything under that directory.
- I will also be enhancing this utility to provide a way to hover over the sprite images and get the markup for the image of interest – I have a few ideas of how to get that done in a generic way so that it does not have to be done manually for individual images.
- I may also add a few more filters to the drop-down, like ‘Animated’ since there are not that many images that seem to be animated and perhaps ‘File Types’ icons since SharePoint seems to have a common way to name those (IC<file extension>)
- It would also be extremely useful to have the ability to search for keywords. Perhaps I can find a way to have the community help “tag” images, so that a search feature can also be introduced. Tags could be submitted to the project via pull requests to the project’s home on GitHub.
In looking at this list of additional enhancements it does sound ambitious and time consuming, but at the same time it would provide for quite a comprehensive utility… That just goes to show how I always think about building a complete and full feature system – for good or for bad 🙂 Maybe I’ll just wait to see if it gains interest for others.