Web Edit in SharePoint 2010, Part 2: Working with Pictures

In my last post, I detailed the process of how to insert a picture in SharePoint 2010, but now that we’ve got a new picture in place, what if we want to make some changes to it?  Once again, the contextual Ribbon in SharePoint 2010 is your friend, making the editing of a picture’s properties a snap.  Clicking the  (Edit) button in the nav bar will surface the Ribbon for you, with the Editing Tools tab highlighted.  Clicking the image on the page that you wish to work with will surface the Picture Tools tab just to the right of the Editing Tools tab in the nav:

Note, however, that the default Text editing tools will still remain in focus until you click the Design button under the Picture Tools tab.  Once you’ve clicked Design, the contextual Ribbon will respond by surfacing the requisite Picture Tools, like so:

Taking the Picture Tools in order from left to right, the first one is Change Picture, which allows you to do just that, cleanly swapping out one picture for another (thus making the deletion of the original picture, as I had done in my last post, a wholly unnecessary step as it turns out).  The Change Picture button has two drop down items from which you can choose the location of the replacement picture:  From Computer (Browse your computer for the desired picture), and From Address (enter the URL of the desired picture).

Next up are the Address and Alt Text fields.  The Address is the URL that corresponds to the picture itself, either having been uploaded to SharePoint, or directly referenced from a Web address outside of SharePoint.  Note to self:  Figure out why there’s a hyperlink symbol next to the Address field even though it doesn’t appear as if you can link the picture to anything other than itself.  More specifically, I need to figure out how one goes about hyperlinking to another object.  (I should probably mention at this point that for the time being I’m using the Release Candiate version of SharePoint 2010 rather than the released version; that will soon change.)  The Alt Text field is populated with the name of the picture file itself (inclusive of file extension) by default, but it should be used to enter a description of what is pictured (to be read by screen readers, and to be displayed in instances when the image can’t be displayed).

Image Styles is next in line, and the drop down picture frame options associated with this button are rather self-explanatory:  No border, Thin line border, Table border, Dark border, and Light border.  Upon mouseover of each of these options, you’re provided with a preview of the look of each style surrounding your picture.

Position is next up, and this pertains to the position of the picture on your page, relative to the surrounding objects.  There are two sections of the drop down options: Float, and Inline.  The choices under the Float section are Left and Right, whereas the choices under Inline are Top, Middle, or Bottom.  As with Image Styles, you’re provided with a live preview of the Position (as applicable) upon mouseover.

The final set of Picture Tools options have to do with the size of the picture.  There are fields for Horizontal Size and Vertical Size, each with an Up and Down arrow button to increase or decrease the size accordingly.  As well, there is a Lock Aspect Ratio checkbox option, and this option is checked by default to preserve the aspect ratio of your picture.  Using the Up and Down arrows isn’t the only way to alter the size of your picture however, although if precision is your goal, it’s likely going to be the most effective option.  The more fun option, however, is accomplished through grabbing one of the corners of the selected image with your cursor, and then dragging it outwards (to increase the size) or inwards (to decrease the size).

I don’t know about you, but I’m absolutely loving the ease of use of these embedded Web Edit features in SharePoint 2010.  If you’ve had a chance to get your hands on it, what’s your favorite new feature in SharePoint 2010?

The SharePoint 2010 Web edit story so far:

  • Part 1: How to Insert a Picture
  • Part 2: Working with Pictures
  • Part 3: Working with Text (1 of 3) – Edit Tools
  • Part 4: Working with Text (2 of 3) – Clipboard, Font, and Paragraph Tools
  • Part 5: Working with Text (3 of 3) – Styles, Layout, & Markup