“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

, , , , ,

  1. #1 by barakula on November 4, 2011 - 4:18 am

    Hi there,

    When I publish a post which is contains pitcures by “Windows Live Writer”, I can’t see the pictures on my post. When I check the “Media Library”, I saw all pitcures have been uploaded correctly.

    After I checked the html codes of post, I saw “Windows Live Writer” writes the source codes of pictures as the pictures still on my computer. For example:

    src=”file:///C:/Users//AppData/Local/Temp/WindowsLiveWriter-429641856/supfilesE06BB1/example.jpg”

    But the source code should be like this:

    After I correct the code by manually, I can see the pictures on my posts. I think “Windows Live Writer” should be do that automaticly but it doesn’t.

    Could you help me for fix this problem.

    (My operation system windows 7, my explorer chrome and windows live witer are all updated)

    • #2 by Ludwig on November 4, 2011 - 2:44 pm

      Hello Barakula, Yours is an interesting problem. I do not have a ready solution for you, but will work with you directly. I have sent you an email. Once the solution is worked out I will post it here as a reply and possibly as a post so others may benefit. Thank you for your comment.

  1. Sourcing images from Flickr « Live Writer Basics
  2. Image Management for Live Writer created blogs « Live Writer Basics

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: