Web Edit in SharePoint 2010, Part 1: How to Insert a Picture

Longtime readers are already aware that one of my favorite new features in SharePoint 2010 is the Web edit functionality which allows for inline editing of a page using a WYSIWYG editor.  Oh, and let’s not forget to mention that the WYSIWYG editor comes in the form of a context-sensitive Ribbon which is embedded throughout SharePoint 2010, and which makes editing pages a snap.

Don’t believe me?  Read on!

Remember what a pain it was to edit pages in previous versions of SharePoint?  Well, as of the 2010 release, the ability to edit your pages is not only painless, but it’s seamlessly integrated into SharePoint via the (equally seamlessly integrated) Ribbon.  It seemed to me that a natural enough first step when beginning to customize a new SharePoint 2010 site would be to replace the default picture on the home page, so allow me to demonstrate exactly how easy it was to do just that.

I got started by clicking the Edit icon in the nav bar:

Clicking the Edit icon surfaces the Ribbon and activates the editable areas of the page.  Note in the image below that I’ve already selected the picture (by clicking it) and, as a result, both the Editing Tools and Picture Tools tabs in the Ribbon are highlighted:

After deleting the selected default picture (simply with a click of the Delete button on my keyboard), I clicked the Insert sub-tab under the Editing Tools menu to refresh the Ribbon with the options associated with the Insert action:

Clicking the Picture button within the Insert menu will cause an overlay to cover the screen, with a Select Picture popup appearing on top.  In this screenshot, I’ve already selected my desired picture (via the Browse button), but otherwise I’ve left the default settings on the popup form.  Those settings are Upload to: Site Assets (additional options on the drop down menu to Upload to are:  Customized Reports, Form Templates, and Shared Documents), and leaving the Overwrite existing files checkbox checked:

The confirmation of your successful upload takes the form of another popup form, and allows you to change the Name and Title of the picture as desired:

After clicking Save on the confirmation form, you’ll be presented with the edited version of your page with the new picture in place.  A couple of things to note in the Ribbon area of this screenshot:  You’re still in edit mode (i.e., your edits haven’t been saved to the page) until you click the Save & Close icon in the toolbar and, by default, the Name of the picture is also the Alt Text associated with that picture:

Having clicked the Save & Close icon, I’m presented with the results of the first customization of my new SharePoint 2010 home page, having replaced the default picture with a somewhat more fitting one:

See how easy that was?

What’s the first customization that you’ll undertake (or have already undertaken as the case may be) on your new SharePoint 2010 site?

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