Previous posts on this subject:
Using Your Own Picture on a Button
Well... maybe not your own picture... unless you're feeling vain today. 😉 I really meant using an image of your choice. This is actually very easy, provided that you use the CustomUI Editor tool from OpenXML Developer that I blogged about in Part 1 of this series. Here's what you need to do...
First, open up your file in the CustomUI editor tool. Click the picture button (Insert Icons), browse to your picture and click OK. You'll now see your picture on the right side of the CustomUI editor, just like in the screen capture below:
If the image does not show up there, then you'll need to try again, as the pane does not show unless an image is attached.
Now, if you end up with a really long and weird looking file name, don't despair. You can rename the image to something more usable simply by right clicking it and choosing Change ID. Since the CustomUI editor replaces spaces in file names with the string "_x0020_", you may want to take advantage of this.
The next step is to edit your XML to refer to the custom picture. If you are using the "imageMso=" tags in your XML, change that to simply read "image=". So for the example above, you would enter image="logo". Again, remember that this will be case sensitive.
For the following example, I downloaded my website logo, imported it my file via the CustomUI editor, and used the following XML to create my menu:
The result of this markup gave me a custom tab named "XLG", with the following on it:
A quick notes on custom images...
You can import more than one custom image into a file, but there seems to be a size limit to how many images you can store. I tried importing a 928KB image in addition to the 57KB logo file. The result was that neither button showed and image at all. I did import 3 images into a group, but again, I added a large image file and all the button images disappeared. Despite the fact that images are automatically scaled, I would suggest that full pictures are probably not the most appropriate images (even my website logo is too big.)