The Problem

So if you’ve ever tried to walk someone through the process of creating a custom web part page filled with nicely styled text and pictures, you know what a poor experience SharePoint WSS 3.0 provides.  It involves navigating all of SharePoint land, hunting for URL’s, and battling with a lame Rich Text Editor with the formatting of your content.

It goes something like this:

Step 1:  Open any custom web part page for editing, and drop a Content Editor Web Part (CEWP) onto the page.

Step 2:  Put the CEWP web part into edit mode, and click on the Rich Text Editor button

Step 3:  You now get a rich text box to start typing away.  But the box is really small, so you widen it.  You start typing text and realize you want a cool picture or two to spice up the content.  So you click on the little picture button and expect to be able to browse and insert a picture.  Wrong.  You get a tiny dialog box asking for the URL to the picture. 

Ah huh…so then you realize that you have to actually upload the picture to your picture library ahead of time (which you didn’t because you weren’t even sure what you were going to put in your article or content until you started writing it out). 

Step 4:  So you save your current work (which looks terribly incomplete), and navigate over to your picture library so you can upload a picture or two.  You don’t know which picture is going to look just right yet, so you upload 4 or 5 just in case because you don’t want to have to do this all over again and interrupt your creative thought. 

Step 5:  So after uploading the pics to a library (which takes entirely too long) you then need to go grab the URL for the picture you want to use, so you view the properties of the picture and copy the URL to the clipboard. 

Step 6:  Then you wander back to your custom web part page, click edit a few times, and jump back into the rich text editor.  You then find a good spot within your text to drop a picture, and click on the picture button again.  This time, you’re armed with that pesky little URL, and wah-la!  You’ve got a picture displayed inside your CEWP.  Hooray!…except…you decide it’s not really aligned well within the flow of the content.  So you play around with cutting and re-pasting the picture into the rich text editor, but can’t quite figure out how to get it exactly where you want it.  You then decide that the picture needs to be a little smaller, or larger.  You select it and drag the corners to resize it of course, only to find out that it doesn’t retain the proportional width to height.  How nifty!  After fussing with it, you decide to leave it alone and move onto the rest of the content. 

Step 7:  You type happily along again until you decide you need another picture.  Oh yes, you need to go grab that new URL now…  So you go back to the picture library again to grab another picture URL.  Then a return trip to your page, edit, rich text box…okay, ready to go.  You insert the new picture, and briefly entertain the thought of moving it around, but dismiss the idea realizing how much of a PITA it was and you didn’t even get the results you like, so you forget it.  But, then you think….hmmmm…is that really the right picture…

Step 8:  Ugh, back to the picture library to grab a different picture URL, copy it, then back to web part page, edit, rinse, spin, and repeat, and paste. 

Done!  So, now you have an article with a couple of pics which are not exactly placed where you’d like them or proportionately sized, and you ended up with a few pictures uploaded into your picture library that you didn’t even end up using after all.  But oh well, it only took 20 MINUTES!!!

Now, try training an end-user to do this on their new, spiffy SharePoint website that you created for their Glee club.  Then watch their expression as they realize they will need to go through this hoop-jumping, uploading, URL hunting, content formatting HELL, over and over and over again… every time they want to create content with pictures (which is most of time).  I can tell you, the Glee club won’t be singing your praises.

The Solution

Okay, so how do we solve this problem?  Better rich text editor web parts you say?  Maybe, but if you’re like me and in a shared hosting environment—no luck.  But there is a way you can make this whole process a TON better, faster, and easier.

The secret is two key ingredients:  A SharePoint Blog template, and Windows Live Writer

…and 3 simple steps:  Create, Publish, and Copy

Step 1 – Create:  Windows Live Writer (WLW) now integrates seamlessly with SharePoint sites based on the Blog template style.  This means you can use WLW to create “posts” (aka content) which you can then publish to your SP blog.  The beauty here is that WLW is a far better rich text editor, which allows you to easily draft content, import pictures (or even screen captures), links, etc., with perfect alignment, boxing, columns, or whatever you want. 

Step 2 – Publish:  Once you’ve put the finishing touches on the content and pictures within WLW, you simply press the publish button, and WLW takes care of not only posting the content, but also upload all of the pictures to your SP site, correctly linked and all ready to go.  How cool is that!?!

Step 3 - Copy:  So, once you’ve published the post to your SP blog, the only thing you need to do is visit the blog post, edit it, and steal the source code that SP embedded for you as part of the posting.Once you’ve got it, then simply edit a CEWP in source code mode (no stinky rich text editor!), and paste the code. 

Click save and WAH-LA!!!  NOW you’re cookin’ with gas!  :-)

The Result

Tip:  If you already have an existing SP site which was not based on the blog template, just create a sub-site using the blog template.  You can then choose to hide it or use it as a great blogging feature for your existing site, complete with RSS feeds.