Posts Tagged SkyDrive in HTLM5

Sourcing images from the new SkyDrive

UPDATE 10 December 2011: SkyDrive has been updated, URLs are again easily accessible. See Sourcing photos from SkyDrive is now easy.

Illustrating blogs with images makes them more interesting and informative and Live Writer makes the process of inserting pictures very easy. You can use photos from your computer and Live Writer takes care of uploading them to your blog file store. Images can also be sourced from other locations on theimage web. My post “Sourcing blog post images from SkyDrive” explained the process in detail.  The recent facelift of SkyDrive introduced changes that necessitates these revised instructions.

The look of the new SkyDrive has been handsomely improved, more of that is covered in my post “The new SkyDrive – Bouquets and Brickbats”. When you display an album the thumbnails are larger and show the image in correct proportions. The next level is similar to the slide show view in the previous version.

image

There is no additional view, as before, that shows the image in an otherwise empty browser window. That is where one got the image URL in the past.

Sourcing with “Embed” code

REVISED AFTER POST – The “embed” code does not work! It is stripped during publishing.

DO NOT USE THIS METHOD!

Before inserting an image from your SkyDrive, make sure that the album containing the photo is shared publicly. imageThe easiest way to bring a picture from SkyDrive to a blog post is the “embed” method. Note the Sharing group in the information pane to the right of the photo. There is a link “Embed”. Click it to obtain the code. In the next page click in the code box. It will be selected, highlighted, and you can copy it with Ctrl+C to the clipboard. Then, in Windows Live Writer, just place the pointer where you want the image and press Ctrl+V to paste it in. You don’t need to do this in Source view, this works fine in Edit view. Here is what you get:

It looks like this and there is a hyperlink to the SkyDrive page of this image. It work in Preview, but during publishing the code appears to get stripped.

image

Nice, quick, you couldn’t ask for more. Or could you? Click on the image and the tools in the Ribbon are greyed out. There is no Picture Tools tab. You cannot change the size, location, nor specify text wrapping. Yes, clever blogging geeks can make changes to the code in Source view, but even that is a rather aggravating. If you can be happy with an illustration as shown here, you can use this method. There is one nice feature: A hyperlink is already present that takes the reader to the full view of the image in SkyDrive, with access to the other pictures in the album (and other public albums and files). If this is not to your liking there is another way.

When this is published all you get is an URL text that may or may not connect to something. So this method does not work! Here in Windows Live Writer is an image that looks right and works in preview, but see what you really get in the actual published post:

https://skydrive.live.com/embedphoto.aspx/Blog%20100105/2009-09-07%20McDFP-90907%20002%20526%2051024×6826.jpg?cid=d2dab0a6f31577f8&sc=photos

 

Sourcing the image directly

To get control over the image size and placement you can get the address to the iimagemage – sort of. In the full view SkyDrive, right-click the image. You may see Copy image location, or Copy image URL, or Copy image address. Some browser do not offer the image address (URL) directly, including Internet Explorer, but you can get it by clicking Properties at the bottom of the menu and then copying it from the properties listing. This address can be used in the Live Writer Insert Picture dialog. imageClick Picture in the Insert group of the Ribbon, then click From the web… In the next dialog paste (Ctrl+V) the address of the image. A preview of the image will be shown. If you don’t get the preview, you did not get the address correctly.

Click Insert and the picture will be inserted full size into your post. It likely will spill over beyond the post margin. Click on the picture to select it, the Picture Tools tab will be displayed. Click Lock aspect ratio, then select a size, Small, Medium or Large. You can manually set the size, of course. You can set the alignment and margins around the picture and a simple frame, or none, as is usual with web-sourced images. Do not attach a hyperlink to the address you used for the picture. It will not work. You cannot show the image full-size in a browser window. You can get the address of the image in SkyDrive from the browser address bar. This will give your reader access to that image in your SkyDrive and all other public material.image

If you do not wish your reader to have access to your SkyDrive album (and more), simply set the link setting in Picture ToolsProperties to No link.

Sadly, the self-running slide show feature is no longer available in SkyDrive. Let’s hope that this is just a temporary shortcoming.

.:.

© 2011 Ludwig Keck

Advertisements

, , , , , ,

7 Comments