Archive for category sourcing images
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
For some time there was no straightforward way to get the URLs of photos in Windows Live SkyDrive albums. With the recent update (November 2011) there is now easy access to the original photos stored in SkyDrive.
SkyDrive web addresses, URLs, are incredibly long, typically more than 140 characters. No way can you write those done, so just copy the URL with Ctrl+C and then paste it to the destination with Ctrl+V. This works just fine with the Live Writer Insert – Picture tool. Click From the web… to open the Insert Web Image dialog.
The photo is previewed in the dialog window. Click Insert to place it into your post.
The image will be inserted in full size and most likely overflow the blog margins and the Live Writer window. In the Size group of the Picture Tools ribbon click Lock aspect ratio, then you can resize the image to fit as you like. Remember you can replace the size value to obtain a custom size, you are not limited to the presets of Small, Medium, or Large.
If you forget to click Lock aspect ratio the resized image will be stretched or squashed, just redo the operation.
By default, for an imported web image, the Link to: setting will be None. If you wish to link to the actual image in SkyDrive or to another web address, click the down arrowhead next to the option, then select Web address… the Insert Hyperlink dialog opens. You will need to paste the URL of the image or whatever you want to link to. Be sure to fill in the Title: field. If you don’t see the field, click Advanced. The text in the Title: field will be shown in a text balloon when a viewer hovers the pointer on the image in your post.
If you wish to link to the image in your album as shown in SkyDrive, use the image address for this photo, do not get and insert the Embed code (offered in the information pane). The embed code is an “iframe” set that is stripped out by WordPress for wordpress.com blogs. It can be used on webpages and self-hosted blogs. But that is really another topic.
One note of caution: The SkyDrive sharing system has been extensively revised. The prior settings have been “grand-fathered” in. I urge you to carefully learn the new approach to sharing. Files and photos take the share setting of the containing folder (or album), they can also be shared individually. For sharing images in a public blog, be sure that the image sharing is set to Everyone, either for the photo or for the containing folder.
As you can see in the illustration at the right, the new, simpler system is anything but. Sharing is sure to cause a lot of confusion and there are bound to be changes soon.
© 2011 Ludwig Keck
Nikon myPicturetown is a photo sharing site that offers a convenient way of storing images and obtaining their URLs for sourcing to blogs and websites. What gives this service additional appeal is the ability to share a photo album without the viewer being provided access to your other albums on the site. Although aimed at users of Nikon cameras, anyone can register a free account with 2 GB of storage. Setting up an account is straight-forward: Just go to myPicturetown and click “New Registration (Free)”.
Sign-up has the usual onerous “Terms and Conditions” but does not ask for much besides name and email address. You do need Adobe Flash Player installed to use the site and Adobe AIR is required for the upload tool, a desktop app.
Uploading images to myPicturetown
The upload process is simple but a bit unusual. Double-clicking the desktop shortcut brings up the Japanese language version of the upload window then quickly launches your browser and goes to your MyPicturetown account. If you selected to stay signed in on your prior visit you will not need to sign in. The account home page shows a collage of some of your photos – nice – and a small Nikon ad which can be closed – a small price to pay for the service.
Click Upload (lower left of collage) and the desktop app opens – this time for me in English. This is a drag and drop procedure and works very smoothly. The album to upload to can be selected or a new one created. Click Upload and the process starts. For each file there is a progress bar showing the portion already uploaded. Even during this upload process additional images can be added to the window and will be uploaded.
Note of caution: Not all file types are accepted. You can upload JPG files but not PNG files.
Note of caution: You can upload photos in their original size, however, you cannot use or link to the full size images if they are larger than 1024 pixels horizontally, for vertical images the max size is even smaller. This is similar to the way Flickr works. However, the full size images are available to you for downloading.
Getting the image URL
Once your images are stored in an album on your myPicturetown site, getting URLs to the images is a very simple matter. If your uploaded images are larger than 1024 pixels (max horizontal dimension) only down-sized images will be available as links. Navigate to your MyPicturetown album and click the thumbnail of interest. Click the “i”, , in the tool bar to open an information pane on the left. Scroll down to see a section labeled Blog Links: – see Nikon provided for your needs. For most images three sizes are offered and the pixel dimensions are shown. For images larger than 1024 px scaled down images are offered. For very small images only one or two sizes might be shown. For example, for the “i” image here only the actual 42×44 pixels size is offered.
The illustration on the right shows what I am talking about.
Click the size you want, the URL is shown in the Link URL: box. Click it to select it then press Ctrl+C to copy the address to your clip board.
Using the image URL
In Live Writer click the Picture command (in the Insert group on the Home ribbon, or in the Media group on the Insert ribbon).
Select From the web …, in the Insert Web Image dialog paste (Ctrl+V) the address into the Picture web address: field. The main area will show a thumbnail of the image. Note my clever illustration here of the dialog window showing a screen clip of the insert operation.
All the images in this article are sourced from my myPicturetown site. In fact, I kept the upload app open as I prepared this post and uploaded the illustrations as I needed them. One of the illustrations links to a larger image, move the pointer over the images to see the one (all right, it is the one showing the blog links).
Getting a link to a slide show is more complicated, you need to “share” the album (click the icon in the tool bar). Sharing is done by sending an email which contains the link, a very long URL. See this illustrated in my Café Ludwig post Sharing Photos with myPicturetown
Nikon myPicturetown is a very blog friendly site. You will likely be as impressed with as I am.
© 2011 Ludwig Keck
UPDATE 10 December 2011: SkyDrive has been updated, URLs are again easily accessible. See Sourcing photos from SkyDrive is now easy.
Windows Live SkyDrive offers a good amount of storage – 25 Gigabytes – and has nice photo albums. Unfortunately, at present there is not an easy way to determine the web address, URL, of images in SkyDrive. One work-around is explained over at This ‘n That: Getting the real URL of a Photo on SkyDrive. If you need to get the URLs of several photos this becomes a real pain. There is an interesting way to get the web address of all the photos in a root level SkyDrive album that has sixteen or fewer images. Still not easy or straightforward, but it works.
Getting the URLs for up to 16 photos in a SkyDrive album
Windows Live Writer has a neat tool for including a SkyDrive album. On the Insert tab in the Media group click on Photo album and select Add online album… This opens a dialog that allows you to log into your SkyDrive and then shows icons of your albums. Note that you cannot reach an album inside an album, this works only for root level albums. Click the album you want and then click Insert. Windows Live Writer downloads the photos from the album. Only sixteen will be downloaded if the album is larger than that.
The default album presentation shows a large thumbnail and a group of smaller ones. You can leave that nice grouping as part of your post, but for this discussion we are after the URLs of the photos. Click the Source tab (lower left) to view the HTML code of the post. For the album Live Writer will have generated a large block of code that includes the actual web addresses, URLs, of the photos in the thumbnails.
The Live Writer Find command does not allow copying the found text with the search box showing, so it is not of much use for this task. I copy the block of code and paste it into Notepad. Searching for the the URLs and copying them is much easier there. There are a number of URLs that are not of interest (the “VIEW SLIDE SHOW” and “DOWNLOAD ALL” links) so I like to search for “livefilestore”. Be sure to copy the address from “https:” all the way to the next quote mark. Actually the last part after the image file name is not needed, the text “?psid=1” can be safely removed from the address. Copy those URLs and save them in a document so you will not need to go through this exercise again. Also make sure that the addresses work. I always paste the first one into my browser address field and take a look. The address should take you to the image all by itself. The image on the right links to the full size photo on SkyDrive, click on it to view it large.
Using the SkyDrive Photo URLs
Once you have the URLs to your photos you can use those addresses to link to the SkyDrive image. Of course, the primary use will be to show the photos in blog posts. There is some bad news I have to share. If the photos are large, Live Writer cannot handle them. Let me explain. To insert a photo you select From the web… on the insert Picture command (on the Home or Insert tab). The URL is entered in the Insert Web Image dialog. If Live Writer is unhappy with the image you get an error message “Preview is currently unavailable.” You can click OK and then Insert. This may or may not succeed.
For photos in posts the image size need not be screen-filling, and Live Writer handles smaller images just as you would expect. The photo below is just 640 pixels in the larger dimension. This also has the advantage that it loads quite rapidly.
The photo below comes from the album collection inserted farther down, but it links to a larger photo in another album.
When you include the album feature, a viewer has access to your public albums (and documents!). Using the URLs by themselves provides no such exposure, and allows you to lay out your post just the way you want.
One other downside: Microsoft is constantly “improving” SkyDrive and Windows Live applications. The procedures given here worked as described in October 2011. They might not work by the time you read this.
© 2011 Ludwig Keck
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