Images In Posts – Sources and Methods
This is a revisit of this topic with updates and a look at how Live Writer works with the current versions of WordPress and Blogger.
Many new features have been implemented in the latest WordPress themes, and Blogger templates. Much is not supported by Live Writer since it has not been updated in the last three years, yet it still offers the best and easiest means of preparing blog posts. With higher resolution monitors and especially smart phones, tablets, and other devices, new questions arise on how to best deal with images.
Live Writer has a number of ways for inserting images. In Inserting a picture from your computer
this article the options will be covered in turn. Both the Home and the Insert tab provide an Insert – Picture option. There are four option in the drop-down menu:
- From your computer…
- From the web…
- Create online album…
- Add online album…
Inserting a picture from your computer
Most of the images that you wish to show in a blog post most likely start out on your computer. Live Writer allows you to scale the image so it will fit and be positioned the way you like. Three standard sizes are offered and those sizes can be set by you. The sizes are Small, Medium, and Large. There is actually a fourth size: Original. For this blog my sizes are set so that images fit nicely into the blog column.
Here the Large size is 640 pixels wide to take up the width of the column. The Medium size is 320 px so that two will fit side by side. The Small size is set to 200 px, allowing three across. Live Writer will prepare scaled images with the specified border and any additional features. The illustration above uses a white border and a watermark. Both of these features are done in Live Writer. The image that appears in the blog post is called a “thumbnail”, even though it might be rather large. Jumping ahead of the story a little: Click on the image above – the “source” image is actually smaller than the thumbnail her.
You do not need to prepare images to the desired size, Live Writer can do the scaling. However, there is something else to consider. An image in the post can link to something else. By default that is to the same picture, normally a larger version. On the Picture Tools tab (reached by clicking the image in Live Writer) you can set where the link goes to.
If you choose Link to: Source picture, when the visitor clicks the image the browser will show the “source” version. Most browser show it on a blank, white page, positioned in the upper left. That is not the prettiest way of doing it, but might be what you like.
You can specify the size of this source picture that will be shown on the blank page with the Link options setting. Clicking that option brings up a little dialog as shown here. There are again four size options, the Small, Medium, Large, and Original sizes. The standard sizes are the same as the sizes for the thumbnails. The Original size, however, will be the actual size that the image is on your computer. Most modern digital cameras produce images way bigger than will fit conveniently into a browser window, even on the newer monitors or devices with their high resolution. That brings us back to the “however” above. You should scale your picture to a size that is appropriate. The image displayed by clicking the image link should show the picture better and larger, unlike the pots above. But you don’t want the source picture to overwhelm. For the past few years I have used “originals” that are 1024 px on the larger side. Those used to fill the browser nicely, but with the progress to higher resolution displays even in phones and small handheld devices, I have been using 2000 px lately. If you don’t link to another version of the image, of course, you need not worry about the original size as it will not be shown or uploaded.
Where to the images go?
Live Writer uploads the prepared “thumbnail” image and the “source” image, if used, to the blogging service. If you are using WordPress both images go into your Media library. This is a “flat” file, that is, it is not further divided, just a large shoe box full of pictures. If you are on Blogger, the images are uploaded to you Google album “Windows Live Writer”. NOTE: Blogger imposes a limit on the number of images uploaded for one post. You might run into that limit if you have a large number of photos. I did with a story on a car show last year, so I just split the post into two ( British Car Fayre 1 and British Car Fayre 2 ). Google storage rules are such that images smaller than about 2024 px are not charged to the space used.
Inserting pictures from the web
The second insert option in Live Writer is “From the web…”. This allows a wide range of sources, but assuming that you want images of your own that you have online, the range shrinks quite a bit. When you click From the web… a small dialog pops up. You need the web address, URL, of the image, not the page it might be on.
NOTE: Although it is easy to get an URL of most any image on the Internet, you can’t just grab it and insert it into your blog. Plagiarism applies to images as it does to text. Don’t steal, don’t borrow, don’t “quote”, unless you have permission from the owner of the image. Stick to your own.
Where to store and get images
The easiest web place to store your images is, of course, your blogging service. Live Writer can upload pictures to your blogging service, but sometimes it might be easier to upload them yourself directly and then retrieve the URLs.
In your WordPress account Dashboard you have your Media Library. WordPress has made many improvements in this area. Uploading is easy and uses a drag-and-drop method. You can easily get the web address for images already in your WordPress Media Library, just go to the Media library, click on the image you want. The image URL is in one of the property boxes. You can also right-click the image and click Copy Image Location.
If you have a Blogger blog, you have a Google account and, as noted above, your images uploaded by Live Writer are in the Windows Live Writer album. Don’t add images manually to that album. The most recent additions go to the end of the normal listing and that may mean a lot of scrolling to find what you want. You can use any other album for storing photos, of course, and you can get the URL for any of your Google photos and insert them into a post. Just be sure that your album is made public so your readers will be able to see the image. To get the image URL from your Google Photos, right-click the image, then click Copy image URL, it will be loaded into your clipboard. Since this method does not involve the upload limit for a blog post, you can insert any number of images into your post.
Flicker is one of the oldest photo sharing services and has some very nice features. Unfortunately, being friendly to blogging is not one of them, they don’t want to provide the URLs to your own images. So don’t plan on sourcing photos from Flickr. You can link to your images and albums there, they show nicely and you can provide slide shows. But for inserting an image in the post, forget Flickr.
Microsoft OneDrive, the former SkyDrive, is meant to be your file cabinet in the cloud. It is organized in folders and subfolders, so managing your images is really easy – just like on your desktop computer. Uploading is drag-and-drop. Getting to the URL is a matter of clicking on the image and then clicking View original. The image shows full size on a blank page and its URL is in the browser address field. Microsoft does a very good job of managing access to stuff in your OneDrive, so make sure that the folder is public.
Problems with images from the web
When you use pictures from the web, there are some concerns that you don’t need to address when using pictures from your computer option in Live Writer. An image on the web is stored in the size that was uploaded. As I mentioned above, for me that is nowadays 2000 px on the large side. When you use the Insert – From the web… procedure, Live Writer will insert the picture in whatever size it is. You can use the Size controls to get it to the size you like in the post. There is another “however” here. When someone looks at you blog post, the browser has to download the image and rescale it for display. That process is not as fast as downloading an image that is already the correct size. You blog post might not load as fast as you like and not as fast as it could if the images were the correct size already. If you use just a few images, that may not make a noticeable difference.
Create online album… – Add online album…
Live Writer has a delightful feature that it calls “online album”. A group of small thumbnails can be arrayed in different layouts as a representation of an entire album. Live Writer then uploads the entire album, or alternatively using an existing online album. Links are provided for seeing the pictures in the album. This feature goes back to the days even before SkyDrive. Live Writer used the Microsoft online storage service since its infancy and still works like a charm with OneDrive. However, it only works with OneDrive! There are some limitations that date back in time that have not been updated.
Take a look at such an “album”.
The dialog that comes up when Create online album… is selected allows you to drag pictures form your anywhere on your computer and combine them as one album.
The album is inserted when you click Insert and then you have a large array of options as to layout and other features.
When you publish the post with an album, the images in the album are uploaded to your OneDrive, into an folder in the root of the OneDrive called by the album name you specified. Other images that you inserted “from your computer” will go to your blogging service.
But wait, there is more!
You can move that “album” folder in your OneDrive to another location. All the links will be correctly preserved.
So these are the methods for inserting images into a blog post using Live Writer. I have pointed out some of the items that you must be careful with. In spite of the fact that Live Writer has not been updated in years, it still provides features and convenience unmatched by any other tool.
© 2015 Ludwig Keck
Help search engines find your photo posts
There is plenty of advise all over the Internet on how to do SEO, “search engine optimization”. Not so much when it comes to helping photographers who mainly post photos to their photo gallery blogs. Photographers are visual people, they let their images do the talking. Search engines, on the other hand, look for words. Text is the majority of what searching is all about.
Look at the situation from the searchers perspective. There are occasions when someone does an image search. If you are running Chrome, right-click on an image and there is an option “Search Google for this image”. Google will find other places where this photo is posted and it also shows “visually similar images”. You need not do anything to help this process.
Note the tip from Google (marked in the illustration here). “Try entering a descriptive word in the search box.”
Mostly people search by entering some words or or a phrase in the text box on Google, Bing, Yahoo, and other search engines. We mostly look for words, and so do search engines. People may not use the words that you thought as describing your photo. The search engines are good, they know about synonyms and will provide returns for those.
The search engine designers want to provide the answer to a user that the user is looking for, even if he has not expressed himself correctly. That is a tall order. You, the blogger, need to give the search engine a hand so your blog will come up in a search that is best satisfied by your post. This is not about tricking the search engine to favor your post, it is about helping the search engine satisfy its user. You need text that will match the search terms. Since you cannot anticipate the question, you need to supply plenty of details. Live Writer can help you with that.
So here some thoughts on how to post photos that will be found in searches.
Let’s start with a photo. There are different ways of adding it to a post. When you click Insert > Picture, Live Writer gives you two options: “From your computer …” and “From the web …”.
Let’s start with the first method, inserting a photo that is stored on you computer. You probably have attached tags and other metadata to the photo. None of that matters to Live Writer, except the title. Live Writer generates the HTML code in accordance with some preferences that you have set up. The code for the small picture of the green plant looks like this:
Note that the title, “Green” for this photo, is shown as the “img title=” and also as “alt=”. It is these two pieces of information, or “attributes”, that search engines can learn from the code. And it is here where you can help them along.
Give your photo an accurate and descriptive title
The title of the photo, contained in the HTML code, is the most important text associated with an image in your blog. Make it accurate and descriptive so it can be found when someone searches for those words (or synonyms). This is also the text that a viewer sees when hovering the pointer over the image.
The second text item in the code, the “alt” attribute text, or “alternate text”, can be even more useful. That text is not seen by the viewer (except when the image cannot be displayed, and just the place-holder area and this text appears). But the search engines read this text.
Take advantage of the alternate text
Think of this alternate text as what you would say to a blind friend when describing this photo. Give all the needed information to allow a mental image being formed from your description. Keep the text concise but complete. A sentence or a small paragraph should suffice. Here is some text that might go with the photo of the green plant:
This photo is of a lush, green plant as seen from above. The tip of the plant, with the tiniest new leaves just unfolding is to the right and below center of the image. There are no colors other than green in this photo. The newest, budding leaves are the lightest green. Older, larger, leaves, farther in the background are darker shades of green. The leaf-edges have tiny triangular serrations. The leaf surfaces are rich in texture showing the structure of the leaves.
You might not want such gushy, detailed information to appear alongside your photo, but it is fine to have it there for the search engines (and blind readers). Make it readable text. Do not provide a list of your tags. Search engines are “offended” by lists of words since that is how “optimizers” have tried to trick them in the past.
How do you insert the alt text? Click the Source tab at the bottom left of the Live Writer window to see the generated HTML code. Find the alt attribute for the photo of interest (Tip: I use a temporary line of equal signs above and below a photo so I can find it easily in the code.) Replace the alt text between the quotation marks with your full description.
Inserting a photo from the web
When you select Insert > Picture > From the web… the dialog allows you to specify the web address, URL, of the image you wish to insert. After you enter the URL, Live Writer retrieves the image from the web and shows it in the dialog. It also shows the size of the image. You can change the image size after insertion, however, it is best for speedy performance, if the original size will be used in your blog post.
The image will be inserted at the location of the cursor after you click Insert.
Live Writer offers a Hyperlink insertion option. This presents a dialog for entering the URL that the image should link to. In the Advanced section of the dialog you can enter the title text as well as the alternate text. The Live Writer dialog calls this “Rel:” . You can enter as much text as you wish. It is easiest to have this text prepared beforehand so you can just paste it in. This method will generate the full HTML code and you need not patch in the alt text in the source view.
One caution: The Hyperlink insert option does not allow you to modify an already attached link. The URL will be retained in the new dialog, however, the title and alt text will be blanked out and you need to reenter them. A bit of a nuisance, but that is how Live Writer works.
One more thought: The more of a story you provide, the more there will be for search engines to work with. It may be difficult for you, a visual artist, to describe your works in text, but if you do, there is a much better chance for your future admirers, and customers, to find you!
© 2014 Ludwig Keck
Windows Live Writer dates from ancient history by modern standards, it was born back in the days when Microsoft offered “Spaces”. That was a personal web site and blogging service. Live Writer offered a a WYSIWYG, “what you see is what you get”, interface to make preparing blog posts really easy and accessible to everyone. Images were stored on your Spaces site.
Spaces is long gone, the online storage became SkyDrive and changed name more recently to OneDrive. Live Writer is part of Windows Essentials and hasn’t been updated in two years. Still, Live Writer is the best blogging editor there is. Nothing else comes close.
Does Live Writer work with OneDrive?
Absolutely, and beautifully too! OneDrive, unlike other “cloud” photo storage services, is organized in folders and sub-folders just like the file storage system on computers. There have been many changes and improvements in OneDrive cloud storage but no matching updates to Live Writer, so it works as it did years ago. Some compromises are required and some new quirks have been introduced, but these you can live with. In the next section I will take a look at the various features and describe how they work nowadays – mid-year 2014.
To check the current operation, I prepared two blog posts to illustrate the features and problems. I first prepared and published the post on Gallery Ludwig. Here is a screen capture of the way it looks. I incorporated a number of the unique features that Live Writer offers for managing the appearance and layout of illustrations. After publication to Gallery Ludwig, a WordPress blog, I opened the post in Live Writer and selected another of my blogs, Café Ludwig, that is very different in layout, so I made scaling changes to fit the post into the narrower layout of that blog, and published it to Café Ludwig, a Blogger blog.
Live Writer has some nice picture effects like tilting the image, applying frames and more. Most of these effects are only available when the image is sourced from the computer as you prepare the post. Specifically frames, tilting, watermarks, and picture effects require local photos. Live Writer adds these changes to a new copy of the image. This new image is uploaded to the blog site when the post is published. In fact Live Writer may upload two copies, a “thumbnail” and a “source picture”. If the blog is hosted by WordPress the images go to the Media Library. When hosted on Blogger the images are sent to your Google Photos album to an album by the name “Windows Live Writer”. The images in the post are the “thumbnails”. Live Writer will provide a hyperlink to the “source picture” if that is selected in the properties section.
My preference is to use the “Source picture” option very little, because the browser display it in just a plain, ugly view of the photo. I prefer to link to a photo in a OneDrive album, or folder. This gets us to sourcing from OneDrive.
Sourcing images from OneDrive
OneDrive has become an easy to operate online file storage system. Sourcing photos from a OneDrive album is best done by accessing it in a browser. The image must have sharing set to “Everyone”, that is public. This is best done by having the containing folder set to public sharing. When the photo is displayed in OneDrive the URL in the browser address bar provides a link to that page.
The illustration above shows the URL selected to be copied (Ctrl+C) so it is available for use in Live Writer.
To link a picture that was sourced from the computer, click on the picture, then click Insert > Hyperlink. The copied URL will already be in the dialog.
If special features on the image are not needed, it is easy to source the image right from OneDrive. This way Live Writer will not need to upload the photo to the blog site. For this approach click “View original” when the photo is viewed (see the illustration above). This shows the photo by itself. The URL may now be copied from the browser address bar.
In the post draft in Live Writer select Insert > Picture – From the web. Then paste the URL into the dialog. Click Insert. Then you can position the image, resize, set the margins on the Picture Tools ribbon (click the picture to bring up this ribbon).
You can arrange the layout as you like. Remember that you downloaded the blog layout settings when you added the blog account to Live Writer.
One of the beautiful features of Live Writer is the ability to add a collage of photos from an OneDrive album.
Adding a collage from a OneDrive album
Live Writer can prepare a collage right from the pictures in a OneDrive album. There is one important catch: The album must not be a sub-folder. It has been this way from the earliest days of Live Writer, so this is nothing new. If you are newly uploading the photos to your OneDrive, just make sure you do it in a newly created folder right on the first page. Make that folder public. If you already have an album that you wish to use, move it to the first page. After you have prepared the post in Live Writer you can move your album to any folder or subfolder as you wish. Don’t worry about breaking links – none will be broken. That is part of the charm of OneDrive!
Time and “improvements” in OneDrive have made the links that are on the collages operate not as expected, but close. The “VIEW SLIDE SHOW” link just gets you to the OneDrive album. You don’t get a “Play slide show” option until you click one of the pictures. The links of the individual square thumbnails get you to the “View original” display of the full sized image in a plain browser window. This, by the way, is lost in the translation to another blog. You can check that in the Café Ludwig post. Guess that is asking just a bit too much of Live Writer.
So as you can see, OneDrive and Live Writer work very nicely together. That you can move folders around in OneDrive without breaking any links is a really nice feature. After preparing the first post with the two collages I moved the folder from the main page to a sub-folder. As you can easily ascertain, the links work fine.
© 2014 Ludwig Keck
Spammers love blogs and have been a plague for a long time. Sadly, parasites will always be with us. Lately there seem to be more that try to get posted by using flattery.
It used to be that spammers just tried to comment with long lists of links to junk sites. The machinery of the blog providers has pretty much eliminated those spam comments. Flattering comments with just one or two links are easy to spot. Here are some (edited) examples:
This submit actually made my day. You can’t imagine just how much time I had spent for this info! Thank you! my blog … [link to junk site]
Hey very nice blog! My blog: … [link to junk site]
I do not even know hоw I endеd up hеrе, but I thоught this post was greаt. I don’t know who you are but certainly you are going to a famous blogger if you aren’t already ;) Cheers! my blog post … [link to junk site]
Hey There. That is an extremely neatly written article. I will make sure to bookmark it and return to read extra of your useful info. Thanks for the post. I will certainly return. my web site: … [link to junk site]
Well, you are not likely to fall for these. As much as we all like praise, these overly-flowery comments are not likely to get approved and published as comments. Do not approve a flattering comment that is not truly responsive to the post on which it is submitted.
Some spammers have started to automatically include your post title in their comment in hopes of getting it approved as a comment. Here is one:
Thanks for finally talking about > “Long Shadows” < Liked it! my page … [link to junk site]
Even parasites are not totally stupid, so the latest trick is to not include any links. The default settings on most blogs require comment approval before publishing unless the comment writer was previously approved. And therein lies a potential for getting tons of unexpected spam comments to get through. The spammer just needs to get one comment approved and it is open sailing thereafter. Don’t let that happen to you! Here is an obvious one from that class:
Just desire to say your article is as astounding. The clearness to your
publish is simply spectacular and i can suppose you’re knowledgeable in this subject. Well with your permission let me to grab your RSS feed to keep updated with impending post. Thank you one million and please continue the rewarding work.
But some may be quite short and easily mistaken for actual praise. You don’t want to reject a real reader of your blog, so the best strategy is to set your blog to require approval of all comments by you.
In WordPress the setting is under Settings – Discussion as shown in this illustration:
Blogger settings are under Settings – Posts and comments
Consider letting anyone comment, but require approval for all comments. Enjoy the occasional flattery, they may be worth a chuckle, but make sure that they do not result in a headache!
© 2012 Ludwig Keck