In another post, Setup and Maintain a Photo Gallery Page with Live Writer, I discussed setting up a static page on a WordPress blog as a photo showplace gallery. Here I want to present some of the methods for sourcing and displaying images using Windows Live Writer with a WordPress blog. For illustrations here I will use my blog named “Gallery Ludwig”.
Using Windows Live Writer makes the “curating” job easy and straight-forward. Inserting pictures from your local computer offers the most options. Writer has some photo editing tools that present some interesting features. I wrote about the Writer photo edit tools in Photo Edit Tools in Live Writer.
In another post I talked about Sourcing blog post images from SkyDrive. There are some additional features that I did not mention there.
A reminder: Stick to sources on the web that are under your control and that you have the right to use!
Pictures, albums and slide shows from SkyDrive
Many of my photos are in the Photos section of my SkyDrive, so I would like to show those on my gallery page. The prettiest and easiest is to insert a “photo album”. So to demonstrate the methods, I will start by adding a link to an album:
One of the nice features of Writer is that it lets you connect to a SkyDrive album and presents it with pretty art. This is only available for SkyDrive albums or newly set up albums with pictures from your computer. Now to the details of adding a SkyDrive album.
Click Insert on the Ribbon. Click Photo album. Click Add online album. This is illustrated above.
A dialog window opens with a sign in request to your Windows Live service. Sign in. Writer connects to your SkyDrive albums and shows them after a short interval. Here is what mine looks like (in part, I have removed some information and albums):
Just select one of the albums and click Insert. Writer downloads the images to prepare a nice display.
A new tab on the Ribbon opens, “Photo Album Tools”.
The default album layout is called “Squares”, it can show as many as 41 thumbnails. What is especially appealing, each thumbnail when clicked shows a full-browser presentation of that picture. 
Other layouts are “Grid left” and Grid right”. Those later two only show seven thumbnails like this:
Three other layouts show overlapping thumbnails. These are called “Spread”, “Fan”, and “Scatter”.
All but the first-mentioned layout connect to a full-browser SkyDrive slide show when any part of the image (any thumbnail) is clicked. Unfortunately the slide show does not work in all browsers (as of January 2011) . The various layouts are all illustrated on my gallery page, Gallery 1.
Showing an individual photo sourced from SkyDrive is a little more complicated.
Image from SkyDrive
The command in the Insert tab Picture – From the web opens a dialog that requests the web address of the picture. When you go to your Photos section on Windows Live and click to view a photo there is information about the picture (on the right, below an ad – here removed). The information includes “Web address” and “Embed” code.
The web address is the address of the that page – that may not be what you want. The embed code works well enough (you can paste it in on the source view of Writer) and shows a thumbnail of the image. However, with that code the picture tools are not available. 
To get the actual address of the image on the SkyDrive server, click on the image so that it is displayed full-browser without any other material. The rather-long address then in the browser address bar provides the link to the full-size image. Get it by clicking in the address bar so all the text is highlighted, press Ctrl+C to copy it. That is the address to enter into the Insert Web Image dialog (Ctrl+V to paste it). Shortly (after download) the dialog window will show a thumbnail of the image and you will know that you got the correct one. Clicking Insert places it into the page. Now with Picture Tools (click the image to bring up the tab on the Ribbon) you can modify the size and placement of the picture. You will not be able to crop, rotate, or use any of the effects, the frame options will be very limited.
You can assign a hyperlink to a picture to take the viewer to another page. Above I have linked the “Insert Web Dialog” image to the slide show of that small album. Here is how to do that: On the page showing the picture find the “Slide show” command (above the picture). Click Slide show. When the show starts, copy the address from the browser address bar. In Writer click on the image, click Hyperlink on the Home tab or the Insert tab or Link to: Web address… on the Picture Tools tab. Insert the address into the dialog. You can similarly install a hyperlink to the SkyDrive album page.
Pictures, slide shows from Flickr
You can show pictures from your account hosted by Flickr. The Flickr guidelines contain the following restriction:
- Do link back to Flickr when you post your Flickr content elsewhere.
The Flickr service makes it possible to post content hosted on Flickr to outside 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.
Bringing pictures from your Flickr account is similar to the way it works with images from SkyDrive. You need the web address of the picture to enter into the Insert Web Image dialog. The primary page in Flickr is the “photostream” – that is where you get to with the “flickr.com/photos/yourname” address. 
Photos there are all shown in the “photostream” – photos can also be assigned to “sets” – equivalent to “albums”. When you click on a photo it opens up on its own page with a variety of information on the page. Right above the photo is a “Share this” link. Click this to get several options. One of them is “Grab the link”. This is the link to this page, not to the individual image. This is the address that Flickr wants you to link back to. So copy this address to use in the hyperlink for the image on your page. You still need the address to the actual image that you want to show.
There is another option “Grab the HTML…” – as with the similar code from SkyDrive, this code does contain the address, but is this is not the way to insert an image in your posts or pages. An easier way is by way of the “Action” link. Here there is a “View all sizes” option. This leads to a page with size options. Clicking on a size option places a image of that size on that page.
Click the size that you wish to use on you page. Then right-click on the image and click Copy image address. If there is no such option, select Properties and find the address there. Use that address in the “Insert Web Image” dialog. Note: If the thumbnail image does not show up there, you did not get a valid address.
Be sure to select the inserted image and assign a hyperlink to it using the address from the “Share this” – “Grab the link” – to allow the viewer to get to your Flickr page (and to satisfy your obligation).
Neat hint: Append “lightbox” after the terminal slash – so that the address looks like this:
http://www.flickr.com/photos/ludwigkeck/4147958113/lightbox
This shows your Flickr photo full-browser in a black “lightbox” – very nice.
Slide show from Flickr
You can link back to a slide show of a set (or the whole photostream). On your photostream page click on one of your sets. Click Slide show (near upper right). The show will start. Grab the address from the browser address bar. Use this address as the hyperlink for the slide show. Here I have assigned a slide show hyperlink to the illustration at the right.
Flickr slide shows work in most browsers.
Pictures, slide shows from Picasa Web Albums
Picasa Web Albums has a landing page with albums. That is the page you reach by your address of this 
form: “picasaweb.google.com/yourname”. Click on an album icon to go to that album page. Click on a thumbnail to go to the page for that photo. Right-click to get the web address of the image (you may have to select Properties first). The address so obtained is the address to use in the “Insert Web Image” dialog. If there is no thumbnail image in that dialog, you did not get a valid address. Note the image size you get with that address is the same as on the Picasa site. That should be fine for a gallery page.
Slide show from Picasa Web Albums
To get the address for slide show of an album on Picasa Web Albums go to the album page. 
In the upper left there is a “Slideshow” link. Click this to start the slide show. The browser address bar shows the address for the photo being displayed at the time. You can copy this address. It is easier with the slide show stopped (controls on the bottom of the image). If you use this address the show will display with this image first. Remove the numbers at the end so the address has the form:
http://picasaweb.google.com/LudwigKeck/MementosFromTheCoast#slideshow/
Of course, it will have your name, not mine in it, and the name of your album. I show this address here so you can try it. Compare what to get by clicking the address above and the image above.
This should get you well underway in building your gallery page with images from your various photo sharing sites. Enjoy!
2 comments
Comments are closed.