Archive for August, 2011
To show a photo in a post it has to be located somewhere on the Internet. You can use Windows Live Writer to upload images to your blog service image store, or you can do it manually. You can also insert the address of a photo stored on another service on the web. Flickr makes it particularly easy to source photos for a blog.
Getting your photos to Flickr
Flickr, the popular photo-sharing service from Yahoo!, is widely used by bloggers for their photo storage. To use it, you need an account, of course. Flickr offers a free account and a Pro account, for many bloggers the free account is quite sufficient. Windows Live Photo Gallery can upload photos directly to your Flickr account. To upload, select the thumbnails then click the Flickr symbol in the Share group of the Home ribbon.
If this is the first time you are uploading to Flicker, you will see a dialog telling you that “Windows Live requires your authorization before you can publish on Flickr”. The Authorize button opens the browser and takes you to your Flickr account. Sign in and step through the authorization process. Close the browser when finished. Back in the Live Gallery dialog, click Authorize again and the upload process starts. You need to go through this only once. After that, Live Gallery will remember the settings and the upload proceeds smoothly.
The upload dialog allows you to choose the account and the “set”, Flickr-speak for album, for the uploads (ignore this, it doesn’t work), you can also specify the “Photo size”. Live Gallery will resize your photo to this size before uploading. I suggest you choose 1024 pixels. More on this shortly. The last option is “Public” or “Private” (several settings). Leave this on public. Then click Publish. After the upload the browser opens and you can view your uploads in Flickr and select the set and add other details.
If you use the free Flickr account, your original uploaded photos will be inaccessible. Flickr makes JPG copies, the largest being 1024 pixels on the largest side, plus several smaller ones. These will be accessible to you. For use in a blog, you do not even need the 1024 px size, however it might be nice to link to the large size so your readers can see it in good detail. More on this below.
Getting the URL for Flickr photos
Once you have photos on Flickr, you will need the web address, URL, of a photo to insert into a blog post. Go to your Flicker photos and select the one of interest. Click on Actions (above photo on left) and select View all sizes. Select the size that you wish to insert into your post, or the next larger size if what you want is not there.
Right-click on the image. In the menu select the web address. If you are using Internet Explorer, click Properties to get to the address. Copy the address (Ctrl+C). Paste the URL in the Live Writer Insert – Picture – From the web… dialog.
The URL you got is the address for the actual image. There is one other address you will want. Back in the Flickr page for the photo, click on Share (see illustration here). Click in the text box under Grab the link and copy this address. This address is actually the address of the Flickr page for this photo.
You can use this as the hyperlink assigned to the image in your post. Maybe this is getting ahead of the story just a bit, so let’s go over the details for inserting a photo into a blog post.
Inserting a picture in Windows Live Writer
Above I explained how to get two web addresses, one to the image itself, the other to the Flickr page that shows the photo. Here is how to insert the photo into the text of a blog post in Live Writer.
Pick the place for the image. In the Insert group (Home tab), or Media group (Insert tab), click Picture. Click From the web… in the dropdown menu. This opens an “Insert web image” dialog. Paste the URL of the image into the the address field. A view of the photo will be shown in the main area. If you do not see this small image, then the address you entered is not valid. The Flickr page address will not work here. This must be the URL of an actual image. Click Insert and the picture will be placed into your post text. I have done this here with the barn photo.
Note that when you click on this picture, the “Picture Tools” ribbon will be available. There will be just two “Picture styles” offered. A frame (shown in blue) or no frame. This is true for all images sourced from a web location. The Size options will be available. The best size to use is Original, that is as it is stored in Flickr. You can choose a smaller size, even specify the number of pixels for width or height. When a reader views your post, the stored size is downloaded to the browser and resized as specified. If you chose Original then that resizing will not be needed. You can select a larger size than original and the browser will scale the image up. It will, of course, loose resolution, so this is not recommended.
You will want to offer your reader a larger view of your photo, so send your fan back to your Flickr photo. You can use a hyperlink to the largest image that was shown in the Flickr “View all sizes” page. Such a link will show the photo bare of any other details in the browser. It may not be centered or set in an appealing way.
This is where the other address comes in. It takes your reader to the photo page with all the additional info around it. Your reader can click the photo to see it in the slide view mode. You can take her or him directly to that view. Remember the address you got for the page, it looks like this: http://www.flickr.com/photos/ludwigkeck/5711283156/ If you append the word “lightbox” to it, like this: http://www.flickr.com/photos/ludwigkeck/5711283156/lightbox then it takes your reader directly to the photo in slide view mode. Much more appealing.
To attach a hyperlink, click on the picture, then click the Hyperlink icon in the ribbon. Paste the Flickr page address into the address field, and click OK. I have done this on the little barn photo above, click on it to see how it works.
There is more. You can take your reader directly to a running slide show of one of your sets on Flickr. Here is how:
Link to a Flickr slide show
Once the slide show starts, move the pointer to the upper right corner and click Share. In the dialog you can copy the address to the slide show. Click in the field to select it, then press Ctrl+C to copy it. It will look like this: http://www.flickr.com//photos/ludwigkeck/sets/72157626699391108/show/
When your reader clicks on such a link, the Flickr slide show will start. Try it here on the picture on the left.
So you see, Flickr makes sourcing photos for your blog quite easy. There are some rules that Flickr has set up concerning such use. I will quote from the Flickr Community Guidelines:
Flickr Community Guidelines – excerpts:
- Do link back to Flickr when you post your Flickr content elsewhere.
Flickr makes it possible to post content hosted on Flickr to other web sites. However, pages on other web sites that display content hosted on flickr.com must provide a link from each photo or video back to its page on Flickr. This provides a way to get more information about the content and the photographer.
- Don’t use your account to host web graphics, like logos and banners.
If we find you using your account to host graphic elements of web page designs, logos, icons, and other non-photographic elements on other web sites, we will warn you or delete your account.
- Do upload content that you’ve created.
Respect the copyright of others. This means don’t steal photos or videos that other people have shared and pass them off as your own. (That’s what favorites are for.)
- Don’t upload anything that isn’t yours.
This includes other people’s photos, video, and/or stuff you’ve copied or collected from around the Internet. Accounts that consist primarily of such collections may be deleted at any time.
These rules help us all, so be observant of them.
Other articles you might like to view:
- Sourcing images from the new SkyDrive
- “Insert Picture” in Live Writer – a look behind the curtain
- A SkyDrive Photo Album in your Blog Post
© 2011 Ludwig Keck
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.
There are two methods shown in the Insert – Picture 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.
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.
When you click the Source tab (near bottom left of the Live Writer window) you see something like this:
There are no images there, just text. Actually HTML code. The references to the pictures, excerpted from the code, are like this:
- … href=”$image.png” … src=”$image_thumb.png” …
- … href=”$mothA15.jpg” … src=”$mothA15_thumb.jpg” …
- … href=”$LWB-110813-02.png” … src=”$LWB-110813-02_thumb.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 (Home – Publish 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:
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
Windows Live Writer has justifiably been listed among the best blogging tools available, and often at the top of the heap. It is easy to use and allows you to prepare your blog in the font, style, and colors of your blog. You see exactly what the post will look like in your blog. Well – mostly. There are some “gotchas” and some situations when WYSIWYG – what you see is what you get – becomes WYSInotquiteWYG – what you see is not quite what you get.
Live Writer downloads the design properties from your blog site, your template if you use Blogger, your theme if you use WordPress.
This topic started quite a while back when I selected the “Fusion” theme for this blog and added my own header graphic. Windows Live Writer does not seem to be able to handle this theme as nicely as it does others. It also downloaded the graphic and overlays it on the text with the result shown in the left illustration.
In “Preview” the layout and text is properly rendered. This bothered me, but I liked the theme, so I just started a new post in another theme by selecting one of my other blogs in the Publish group (Home tab). This worked well enough until I overlooked a serious typo in a post – it was hidden by the graphic, and I did not notice it until after I published. Yes, I should have checked it in Preview. Of course, it stood out like a sore thumb once published. I corrected the mistake and republished. This feature works very well, corrections are quickly made. There is a big “gotcha”, however: The feeds and notifications to Twitter, Facebook, etc. are made on the first publication, so they go out with all the errors.
I like to include a lot of illustrations, some I set to the left, some to the right, and often I have illustrations side-by-side. It is easy to leave a bit of room and hit the Return key to move text to below a couple if pictures. It may look “pixel perfect” in the Edit window, and even the Preview often is correct, but in the published post a layout error might creep in.
The default margin settings around pictures do not always correspond to the published settings. This also can be a source of positioning errors of illustrations.
Unanticipated layout problems in RSS readers and emails
There is one area where WYSIWYG just can’t work: In RSS feed and email subscriptions. If you offer your readers the option of getting RSS or email feeds of your post, and indeed you should, you need to anticipate what can go wrong when your post is displayed in an RSS reader or in an email. There is, of course, no way for Live Writer to help you with that.
Here is an illustration of such a problem. The small image was correctly positioned to the right of the larger one. It looks fine in the blog post, but in Google Reader the picture slipped and there was a large blank area. Sure, all the text is there and no one complained. One suggestion: Always place image anchor positions (you can see them best in Source view) at the beginning or end of a sentence. When an image slips, at least the text is not split in mid-sentence. Here is a problem a bit more troublesome:
Here the illustration did not have proper margin settings for the top and it overlaps text. In this case the text is still readable, but that might not always be the case. My advise: Always set top and bottom margins (I use mostly 5 pixels).
Also keep in mind that RSS readers will not render your background color or image, and will likely show the text in black and not necessarily in the color you or your theme specify. I have seen one post where the author switched to white text on a gray background. Google Reader showed it as white text on a white background – totally unreadable. Another text color that is difficult to read when shown on white is yellow.
Emails – another problem
When a reader receives your post as an email all bets are off. Email text is wrapped to fit the window. The display window is totally under the control of your reader. You can see in these illustrations how the appearance of a post is totally at the mercy of the email window. There is nothing you can do about that except to keep this situation in mind.
No doubt you will find some discrepancies of your own. Just take WYSIWYG with a grain of salt, or a “not quite” in mind.
© 2011 Ludwig Keck
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.
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.
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