Archive for category sourcing images

“Insert Picture” in Live Writer – a look behind the curtain

Windows Live Writer makes inserting pictures so easy that many bloggers never need to know what happens behind the “curtain”. Here is a quick look and review of the process.

imageThere are two methods shown in the InsertPicture  menu: “From your computer…” and “From the web…”. A third method is simply to paste an image from the clipboard. The first image here was inserted by the paste, Ctrl+V, method.

Moth BallsJust so I can demonstrate what happens, here is a picture inserted by the “From your computer…” route.

In Live Writer the images can be positioned, scaled, framed, even artistically modified and a watermark can be added. It all looks just as it will appear in the published post.

LWB-110813-02

When you click the Source tab (near bottom left of the Live Writer window) you see something like this:

image

There are no images there, just text. Actually HTML code. The references to the pictures, excerpted from the code, are like this:

  • … href=”$image[5].png” … src=”$image_thumb[3].png” …
  • … href=”$mothA15[3].jpg” … src=”$mothA15_thumb.jpg” …
  • … href=”$LWB-110813-02[5].png” … src=”$LWB-110813-02_thumb[3].png” …

No such files exist on my computer, I do have a “mothA15.jpg” and a “LWB-110813-02.jpg” but these designations in the code are strange, there is the extra dollar-sign, $, and the bracketed numbers, as well as the “_thumb” entries, what is that all about? Well, this is how Live Writer keeps track of the images – these actually are saved on the computer.

When the post is published these images are uploaded to the blog site folder for storing images. To demonstrate where they go, I did a “Post draft to blog” command (HomePublish group) of this post. This being a WordPress blog, I then opened my WordPress Dashboard and opened Posts. The draft was listed on top, of course. I opened it in Edit mode and clicked the HTML tab. There was the code, except now the references to the images were like this:

imageNotice that in the upload process the “funny” references from before now are full web addresses, URLs, to the WordPress location.

WordPress makes it a bit easier to see and understand because the images can now be found in your Media Library.

Why are there two of each? There is the image that is shown in the post (the “_thumb”) and also the larger image that the reader sees when clicking on a picture in an article.

So this was a little peek behind the curtain of Live Writer showing what happens when you insert images from your computer into a post.

.:.

© 2011 Ludwig Keck

Advertisements

, , , , ,

4 Comments

A SkyDrive Photo Album in your Blog Post

Sometimes a single photo just is not enough. Windows Live Writer offers an attractive way to insert a link to a SkyDrive album. You can select from a number of layouts to show thumbnails from the album.

Here is an album of photos from the Georgia Botanical Garden. This is a working link, of course, just click on any part of it to see the SkyDrive album.

Here is the procedure:

As you are writing your article in Windows Live Writer , click the Insert tab. In the Media group click Photo Album, then select Add online album… The command is illustrated here.

SDalbums01If you are signed in to Live Writer the insert dialog will download information from your SkyDrive. You can change to another account by clicking Switch user.

SDalbums07

 

 

Select the album that you wish to insert by clicking the thumbnail, then click Insert.

The default layout, called “Album style”, is the first one shown in the Photo Album Tools Ribbon which comes up when the album set is clicked. Note that there is a Shuffle photos command to change the order of the thumbnails in the set.

Illustrated below is the Photo Album Tools Ribbon and a selection of the album styles that are available. Just click on another style to rearrange the looks of the thumbnails.SDalbums08

The title of the album will be shown as it is on SkyDrive. This can be edited by just editing the text – as you can see in this article.

There will be two links added to the thumbnail set, “VIEW SLIDE SHOW” and “DOWNLOAD ALL”. These cannot be removed. The “VIEW…” link with take your viewer to your SkyDrive album. There the visitor can step through the photos – unfortunately the automatically running slide show is no longer available (as of July 2011). Your visitor can download the album from the blog or from the SkyDrive album. Please note that visitors have access to all of the public folders in your SkyDrive.

You can really dress up a post with these thumbnail sets and make your photos in SkyDrive available to your readers.

 

.:.

© 2011 Ludwig Keck

, , , , , ,

1 Comment

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

, , , , , ,

7 Comments