Restoring Broken Pictures with Word-Generated HTML

When pasting a Word document with graphics to Sharepoint Designer/Expressions Web, it is advisable to test the document in IE 7 to make sure that graphics are appearing. For some reason, the markup that Sharepoint/Word creates causes issues when using documents with photos. If these are not appearing, the Word vml tags must be removed. For the record, I really don’t like designing web pages with Sharepoint, but it is great for quickly posting Word documents to the net in HTML.

If you copy Word documents to Sharepoint Designer or Expressions Web, follow these steps to remove the VML markup causing graphics to fail:

  1. First, paste your Word document into Sharepoint as normal.
  2. Select the Split or Code view to enable the source code replacement feature.
  3. Open the Replace dialog box.
  4. In the Find box, paste the following text: [<]!–[if gte vml 1(.*n)#.#vml][>]
  5. Make sure that Regular Expressions and source code are checked, and that the Replace box is blank (we will be erasing the vector graphics).
  6. Click Replace All to replace the text.
  7. Next, uncheck the Regular Expressions box, erase the text in the Find field, and paste the following: <![endif]>
  8. Click Replace All to erase the text.

One note with this method: if you use conditions elsewhere in your document, make sure that you replace each item individually instead of Replace All. This should not be needed in most cases. For more information about regular expressions, check out these sites: