Embed SkyDrive photos in Spaces HTML modules and other websites

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.

image

image

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.

image

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.

image

image

Click Edit (below the module title). A text entry window opens that expects HTML code. This is where we take another tack.

image

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.

image

image

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.

image

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.

image

image

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.

image

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.

 

Advertisements

About Ludwig

Lending a helping hand where I can. . . My motto: If it is worth doing, it is worth doing well.
This entry was posted in Blogging and tagged , , , . Bookmark the permalink.

5 Responses to Embed SkyDrive photos in Spaces HTML modules and other websites

  1. M.R. says:

    thank\’s… from Mr.Tekin

  2. Ruli Silo says:

    it look like this method doesn\’t work for me. I try to paste the code in a custom html module and nothing happens.tell me if I do wrong…!!!

  3. Ludwig J. says:

    Ruli, please go to my Spaces page, click "This \’n That" above this post, then send me a message, see the box at the bottomof the page. I will try and work with you to help you succeed.

  4. Ruli Silo says:

    Hi Keck, I can\’t send you a message cause of your privacy, so I might as well add you as a friend. By the way, there is someone who has a problem that I thought exactly the same as what I experienced. maybe if you do not mind, you help him solve his problem. Here you can check "http://windowslivehelp.com/thread.aspx?postid=98F042AE-01A5-4B51-8B56-D0DC0D26B799". Hope see you there.

  5. I would love to write and say what a great job you did on this, as you have put a lot of work into it.

    – Jakayla THERIOT

Comments are closed.