Posts Tagged insert picture

Live Writer Tutorial Series

Technogran presents a well done series of tutorials over on Technogran’s Tittle Tattle. Even if you are an expert with Live Writer these post are worth your while.

Blogging with Windows Live Writer 2011. 1.Let’s begin!

Blogging with Windows Live Writer. 2. Writing your post.

Blogging with Windows Live Writer 2011. 3. Let’s insert something!

Blogging with Windows Live Writer 2011. 4. Inserting Everything bar the kitchen sink.

Blogging with Windows Live Writer 2011. 5. A closer look at photos.

Blogging with Windows Live Writer 6. Handling your blog account.

Blogging with Windows Live Writer. 7. Handling those files!

Blogging with Windows Live Writer 8. Categories, tags and dates.

.:.

© 2012 Ludwig Keck

LiveWriter-credit-360

, , , , , , , , , , , , , , , , , , , , , , , , ,

1 Comment

“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

, , , , ,

4 Comments