To display an image in a blog post, that image has to be accessible on the web. Technically you can source an image to be shown in a post from anywhere on the Internet. That is not an acceptable way to do it for two reasons:
- If you find a suitable image through a search, or other means, that image does not belong to you and you may not have permission to use it.
- Things on the web change all the time. Since you have no control over the source, the image may or may not be there the next time it is accessed.
So you should stick to showing pictures from sources under your control.
Before I go into details, allow me to address my less geeky readers. Many people, using Windows Live Writer, have no idea how images are handles and couldn’t care less. It just works. You select Insert – Picture > From your computer and Live Writer takes care of the rest. The photo is pasted in, you can select the size and that’s it.
Here is an example. I inserted a screen-clip of an image of the header of this blog. The image is in my Pictures folder.
Here is the code that Live Writer generated for the image:
<p><a href=”$TnT-header.jpg“><img style=”background-image: none; border-bottom: 0px; border-left: 0px; margin: ; padding-left: 0px; padding-right: 0px; display: inline; border-top: 0px; border-right: 0px; padding-top: 0px” title=”TnT-header” border=”0″ alt=”TnT-header” src=”$TnT-header_thumb.jpg” width=”244″ height=”57″></a></p>
I have bolded the references to the image. These are temporary references, when the post is published, Live Writer uploads the images to my folder in my WordPress account. It resolves the references in the code being uploaded and it is done.
For this demonstration, I uploaded this post as a draft (Publish – Post draft to blog). Here is what the code looks like up on WordPress:
<p><a href=”https://ludwigkeck.files.wordpress.com/2010/11/tnt-header.jpg”><img style=”background-image:none;padding-left:0;padding-right:0;display:inline;padding-top:0;border-width:0;” title=”TnT-header” border=”0″ alt=”TnT-header” src=”https://ludwigkeck.files.wordpress.com/2010/11/tnt-header_thumb.jpg“ width=”244″ height=”57″></a></p>
Notice that the the image references are now full hyperlinks to the images in my WordPress Media Library. I can see them in my Library folder.
If you look closely at the illustration here, you can also see that I have used very little of the storage space allocated to me for this blog. I have more than 98 % of the space remaining.
Over on my Windows Live SkyDrive I have much more space available and I have stored there a lot of my photos.
Now for the procedure of sourcing an image from SkyDrive.
This is a bit more complicated than the simple steps shown above. But this does not require you to be an expert webmaster or super-geek. You just need to be careful in following the steps.
Prepare your images. I like to copy the illustrations to a folder in Pictures. Then, using Windows Live Photo Gallery, I edit them and resize them to the exact size I want in the post. This isn’t really necessary, but that is what I recommend – see my post “Optimize your photos for speedy presentation”. Note that when Photo Gallery resizes a picture it makes a new file with the pixel size at the end. This makes picking the correct photo later on very easy.
Photo Gallery can upload your images directly to your SkyDrive. If you are signed in, just click the SkyDrive icon in the Share section of the Home Ribbon. You will be offered the selection of your albums so you can pick where the images are to be stored. I suggest you make a separate album for blog post images. If you make a new album, do not use “Blog images” for the name. I will explain a little farther down.
Once the upload is complete accept the offer to view the album online. (Or you can open it separately.)
In the separate browser window maneuver to your SkyDrive album and the image you wish to insert. Click on the image so it is shown on its own in the browser. Click in the browser address bar and copy the address (Ctrl+C). You can also get the address by right-clicking the image (in some browsers you need to select properties). I prefer just copying the address from the browser address bar.
Back in Live Writer, insert the image by choosing Insert – Picture > From the web… This opens a new Insert Web Image dialog.
Click on the image. Now you can use the tools in the Picture Tools tab to adjust the size. I like to make sure the image is the correct size already so I can use Original size. This prevents Live Writer from generating a thumbnail and uploading it to the blog files.
In the Properties section of the Picture Tools Ribbon there is a “Link to” command. You can select None, Source picture, or Web address.
A new dialog opens to permit you to enter the web address.
There is an additional feature. If you do not see the Title text box, click Advanced. Whatever you enter in the Title box will be shown as a screen tip when the mouse pointer is moved over the picture.
Of course, you can link to any other web address from the picture. This includes a slide show of an album on your SkyDrive. I explained that in more detail in my post Spaces to WordPress – photos and slide shows – Pages. Windows Live slide shows do not work in all browsers.
Earlier in this post I warned against using “Blog images” as the name of your SkyDrive folder for blog images. This is the name used by Windows Live for the Spaces blog images. If you moved over from Spaces to WordPress, the transfer process copied the images from that album to the Media Library on WordPress. It also moved the blog posts and resolved the links to the photos. This process was quite trouble free. I have found a few images that did not show up the specified size in the replicated posts, but nothing of consequence.
After copying the images from the Blog images album, the transfer process left the original album just as it was. All the images from Spaces posts are still there. Nothing references them now. So you could delete the album, or keep it as a historic relic from the glory days of Windows Live Spaces.
Please also visit my blog on “things photographic”: Café Ludwig