Utility to Browse SharePoint Out-of-Box Images for use in Customizations

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…

SharePoint has many images (thousands) available. These images are stored in a variety of locations, including /_layouts/images/, /_layouts/1033/images/, /_layouts/15/1033/images/ but does not have any built in way to display what is hosted in these locations.  This is probably not an issue for those that have server level access, since you can browse the physical directories, but I don’t (I do client side customizations using HTML, JavaScript and CSS and often don’t have IT involved) and thus the need for a utility.

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.

ribbon-buttons

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.

spimage-screencapture

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.

Future improvements

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.

Advertisements

25 thoughts on “Utility to Browse SharePoint Out-of-Box Images for use in Customizations

  1. Thank you for this utility! It’s a huge time saver! I have been downloading and sorting all these images for years. In addition to what you’ve provided, I have tried to categorize the images by there still and or function. For instance I keep all the sprites in a folder, the animated gifs in another folder, the translucent gradients in another and so on. This has proved to be very helpful when building custom UI elements. If you decide to further the development of this tool, adding a way to do that would be nice (although I’ll admit that would be rather subjective and tough to do generically).

  2. This is the best thing ever in the history of all things. THANK YOU. Exactly what I needed. I also relied heavily on BitsofSharePoint’s directory and have been wanting a SP 2013 version. KUDOS SIR!

  3. This is simply amazing, I was looking for a way to get all SP images and this is awesome. I wish there was a way to extract individual images from the sprite png as well. Thank you.

  4. Please ignore the previous comment. I did not know how to download the aspx page from GitHub. Fon non-developers GitHub is less than intuitive. Since many SharePoint Power Users (non-developers) may find this useful, you could add a hint that they need to download the whole project with the “Download Zip” button and then extract the page.

    1. Sorry about the trouble you had. I’ll have to check the post and the GitHub project. I though I had a link to download only the ASPX page. What you did works as well – as you found out.
      I’ll clarify the download instructions.

      1. Well, I right-clicked on the aspx link in the Utilities folder to save the link and it saved the GitHub page. After that I tried the “Download Zip” button. But now I see that I can also click on the aspx page link and THEN, when it says “(Sorry about that, but we can’t show files that are this big right now.)” I can click “View Raw” (although it says it cannot show the file) or the “Raw” button at the top right and I will see the aspx as text. Really, as a web user who does not do development, none of that is intuitive.

      2. Agreed. I never envisioned this would be an “end user” utility. I’ll think if a better way to deliver the utility.

        Just curious. What will you use this utility for? Adding icons to links pages?

      3. I am a hoarder :-)) – I don’t have a concrete project in mind for this yet, but it looks like it will come in useful at some time. Thanks for posting this.

  5. Hi, I try to load this page from a SP2010 document library and get “For security reasons framing is not allowed.” This message shows an OK button and pops up again and again. The only way to get regain control is to stop the IE8 process. We run IE8 in our corporate environment. Any chance this can be made to run there?

  6. ‘Not common’ I meant that some are not used very often – so not to be confusing to the end user if the icon was ‘re-used’. As far a bulk … I agree that one 1 KB icon is better than a sprite that is 48 KB and the pain to actually map the coordinates client side (which is not an ‘easy grab’)

    Out of curiosity I looked at the size of 2010 and 2013 formatmaps:

    2010formatmap16x16 = 100 KB
    2010formatmap32x32 = 261 KB
    2013formatmap16x16 = 23 KB
    2013formatmap 32×32 = 48 KB

    1. That’s an excellent point… Sprite may not actually always be the best approach… example: if only wanting to use one image on a page, loading an entire sprite would be overkill. Sprites are helpful when gathering together many images used on a page…

  7. SharePoint renders its icons with formatmap16x16 and formatmap32x32 – have you ever considered creating a custom ‘formatmap’ with all your custom icons in a single image and referencing its location in the grid?

    1. Greg,
      Thanks for your comment.

      When you say “grid” you mean a sprite, correct?

      I have thought about it, even when I was working heavily with SP2007, but if I found it to be be worth it. If I was going to include create anything it would be to use a third party set of icons – perhaps even font-icons – that look allot more modern and stylish. With the exception of the new SP2013 icons, everything else looks very dated.
      Also, I did not want to deal with possible copyright infringement by taking MS’s icons and creating a new map from them…

      What I’m still considering is a set of CSS classes that will use the out-of-the-box icons… so that all you have to do is use a class name (descriptive) and the style would be applied. I have something like that already for SP2010 and SP2013 Status messages which I’m using on a side project – look for a subsequent post on that.

      1. Yes … I did mean a ‘sprite’ sheet (had to look that up 🙂 ). For lightweight icon work using the OOTB formatmap – many of those are not common and easily repurposed in the ribbon or listitem menu – so not copying or recreating the sheet – just repurposing it in context of a list item or form.

        My main thought was to make your own sprite sheet of your own images and build on that sheet instead of creating the aspx page. An image would seem to me to be less dependent on platform or upgrade (Office 365).
        Thinking out-loud.

        Looking forward to seeing your use of CSS classes!

      2. When you mean “… many of those are not common…” – what do you mean?
        That was my goal – to display the images that *should* be common in a SharePoint environment. Yes, an SP Admin could change those, but I don’t think they would remove them or change the image name, since that could break the display of them in SharePoint. Most likely they are going to replace the image with something else but still call it the same. (ex. My company was aquired by a different one – they updated a SharePoint icon to the new company logo, but left the icon name the same.

        I do re-purpose (or should I say: re-use) several of the other icons in other settings… Example: I use some of the non-formatmap images in custom ribbons that I create (the post mentions the use of the arrows).

        Yes, creating my own sprite and carrying that forward would be the optimal task and provide the most control and assurance of availability. The down-side is that it would add “bulk” to your app. Here is a little background on what was in my mind when I create this: On this side project I was working, I had a SPA self-contained to a single aspx file. Almost no external dependencies (I say almost because I’m still using jquery UI stylesheet from a CDN). If I had my own Sprite, I would have to deliver multiple files (yes, I could have encoded the image (sprite) to data URI, but that approach is limited as far as Browser support goes). SO re-using what is available on the server (or should be available) allows me to keep the App “lite”.

  8. I think you are underestimating the SharePoint team 🙂 Personally I find it a good practice to name images based on the purpose rather than the look. For example a left arrow could be both a next and a play button,
    Peter Allen’s page was very useful, but having the real images rather than a screenshot is definitely a plus!

    1. Hi Christopher.
      Perhaps I am 🙂
      Maybe there really is a legitimate reason to have the same exact icon named a few different ways. I personally feel that adds unnecessary bloat to the platform as well as redundancy. I would have named the image for what they are (a small left arrow) and let the page/view include the correct image.

      I too used the page by Peter for a while and am grateful for the help it have me a few years back while doing SP2007 customizations.

      Thanks for commenting.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s