Spaces offers a rich variety of options and when you really need full control you can add HTML modules. Embedding photos in an HTML module from your SkyDrive folders is not at all hard to do. The procedure described here will seem quite familiar to you. It works with the Spaces HTML modules and can be used with other websites. Here we will use Windows Live Writer so you wont need to write any HTML code yourself – you’ll see why shortly when you take a look at the code produced by Live Writer.
If you do not already have an HTML module on your Spaces page here are the instructions for adding one:
Adding an HTML module to your Spaces page
Log into your Live account and go to your Spaces page. Over toward the right side click Customize. Then click Add modules on the drop-down menu.
In the modules menu scroll down to the Other group and click on Custom HTML. Click Close Tab and drag the module to the place on you page where you want it.
Click on the down arrowhead (upper right of the new module) and select Settings. You can now specify the title of the module and how it is displayed.
Here we show Use full width for the module. Click Save and your new HTML module is ready for adding your text and illustrations.
Click Edit (below the module title). A text entry window opens that expects HTML code. This is where we take another tack.
Preparing your HTML code
Open Windows Live Writer. This is an easy way to prepare the code for your HTML module. Here you can set up text as you like – that we won’t discuss in this blog. Here I just want to describe how to add photos. You can’t just paste a photo into the HTML module. The photo has to be available somewhere on the Internet and you need to link to it. Your SkyDrive is a good place for keeping the photos. Maneuver over to you SkyDrive and and the photo you want to insert. I like to do this in a new tab in my browser. Click on the photo so it is displayed all by itself in the browser. Now right-click the photo. Click Copy in the little menu. Click in the text window in Live Writer and paste the picture with Ctrl-V. While the photo is selected make the desired settings for size, placement and the other option.
Now go back to the browser showing the photo. Click in the address bar to select the address of the photo. Copy the address with Ctrl-C. Back to Live Writer. Find the Link to control – it will say None. Click on it and select URL. The Hyperlink menu will open to allow you to define the link to the photo – this is optional but you most likely will want to allow the viewer to see your photo full screen. Click in the URL entry window and paste the address with Ctrl-V.
You can specify the picture title and some other options. Click Insert when you are done.
Complete the text and maybe other photos in Live Writer. When you are finished what remains is transferring the HTML code from Live Writer to your Spaces HTML module.
Transferring the code
Below the edit window in Live Writer click Source. You will see the complete HTML code that describes all the details as you set them up.
Select the entire text with Ctrl-A. The copy everything with Ctrl-C. Now back to your HTML module. Click in the window and paste the HTML code with Ctrl-V. The Live Writer source code window and the HTML module are illustrated here. Obviously, yours will look a lot differently.
Now above the HTML module text window click Publish. Your HTML module will look exactly as it does in your Live Writer. Be sure to save. Mission accomplished.
Reading the instructions here probably took longer than it will take you to add your first picture to an HTML module. After the second one the procedure will seem second nature. Just a matter of copying and pasting. It really is that easy.