Combining WordPress and Live Writer photo gallery features

WordPress recently announced updates to the way media is managed from the blog dashboard (Manage Slideshows and Galleries — All in One Place). This makes using slideshows and inserting galleries in blog posts and pages much easier.

galleryEXP-32For preparing posts and pages in a fast and easy WYSIWYG (what-you-see-is-what-you-get) manner, nothing beats using Windows Live Writer. Live Writer also offers neat gallery access via SkyDrive photo albums.

So can both be used together?

Yes, indeed – sort-of.

Unfortunately, Writer doesn’t know about WordPress slideshows or galleries and has some editing quirks. The WordPress editor doesn’t understand the intricacies of the Live Writer “Photo Album” and tries to “optimize” the code. So between the two of them it is a delicate operation to get them to play together.

You can see that WordPress slideshows and galleries can be combined with Live Writer photo albums on my Gallery EXP page at Silver Canvas.

True, in the kitchen you should never use all the spices at once, and this is probably true in building a photo gallery blog as well. But my page is an exception, of course, as I am testing the gallery features of both WordPress and Live Writer.

The pitfalls and problems

Live Writer will not find a page created in the WordPress dashboard (most of the time), so to use Live Writer with a page, the page should be started in Live Writer. Besides that, Live Writer makes a mess of the gallery code generated by the WordPress editor. Example: The WordPress code for a gallery might be:

image

Live Writer will replace the quote marks and the “corrected” code will be like this:

image

You can imagine that when WordPress again gets a hold of this, the gallery won’t look the same.

Now the WordPress editor also attempts to correct and optimize code. When it gets a hold of the large set that defines the images and links of a Live Writer “Photo Album” insertion sometimes strange, and not necessarily beautiful things happen.

Especially insertions with individual thumbnails and links, like the one here, get mangled pretty badly. They get progressively more damaged on repeated use of the WordPress editor.

The strategy for getting an acceptable page or post is this: Plan ahead, minimize the use of the WordPress editor, and don’t make revisions.

Strategy and procedure

To get a post or page that combines Live Writer “Photo albums” with WordPress galleries proceed as follows:

1)  Plan ahead – Sketch out your post or page, note what photo albums and galleries you wish to include. Organize the photos for the albums and galleries.

2) Upload your SkyDrive albums – Set up the SkyDrive photo albums that you wish to include in the root of your SkyDrive. Live Writer cannot find sub-folders.

image3)  Start in Live Writer – Start the page or post in Live Writer. Include all elements and text, and any simple insertions. Insert the SkyDrive photo albums and pick the album styles and other features.

Live Writer provides a nice selection of thumbnail layouts, “Album styles”.

image

4)  Publish to blog – If you are working on a page go ahead and publish it. Since it is new it will not be included in a customized menu. If you are working on a post, select “Post draft to blog” so it will not be published immediately.

5) Edit in WordPress dashboard – Once the page or post has been uploaded the next step is to add the WordPress features – slideshows and galleries – that are not available in Live Writer.

The WordPress Media Library is one huge shoebox with all your images. The new features that make it much more user friendly really do not yet go far enough. imageSelecting the photos for a gallery or slide show is easy in principle, but messy in practice. Here is why:

When you click “Add Media” you are taken to a beautiful page like this:

image

Pretty nice. Click a thumbnail to select it. Only problem is the identification of the thumbnails. You can’t tell which image you are dealing with until you click it. imageThe pane on the right gives the details. Since the Media Library will be filled with many thumbnails and full images, the selection process is a bit cumbersome and time-consuming.

The procedure to get a gallery onto the page requires Create Gallery > Update Gallery > Update (page). The options for the type of gallery, Default, Tiles, Square Tiles, Circles, Slideshow, is a bit temperamental, galleryEXP-27and the interaction between columns and type – it it exists at all – is not obvious.

Re-arranging the pictures within a gallery is a quick drag-and-drop.

Still, WordPress galleries are nice. The slideshow works but the window size is not adjustable. The neatest gallery arrangement is “Tiles”. There is no control over the arrangement, but it is always pleasant.

For all galleries (but not Slideshow), clicking leads to a black-framed large image. A good way to view the pictures.

image

Updating the Mixed Gallery

Updating the mixed gallery can get tricky. If Live Writer is used the WordPress Galleries are messed up. If the WordPress editor is used the photo albums inserted by Live Writer may get spoiled.

Editing in WordPress editor

The WordPress galleries can be easily maintained and modified in the WordPress editor.

image 

Clicking the Edit Gallery link in the gallery placeholder opens the Edit Gallery page which allows re-arranging, deleting or adding to the gallery, as well as changing gallery parameters. “Add to Gallery” can be done from the Media Library or by uploading. Uploading would be the preferred method – it is also a drag-and-drop process and avoids the confusion posed by the Media Library.

The only downside is that Live Writer Photo Albums might get mangled.

Updating Live Writer Photo Albums

Maintenance on the Live Writer Photo Albums is a matter of updating the corresponding SkyDrive album. That is a snap, especially when using the SkyDrive Desktop App. Just manage the folder like any other folder on the PC and let the app do the updating. Even relocating the album will not affect the operation of the blog post or page – it will continue to work just fine.

If you don’t mind the occasional update headache, combining the features offered in Windows Live Writer and the WordPress online editor can lead to some gorgeous looking photo galleries.

.:.

© 2012 Ludwig Keck

LiveWriter-credit-360

Advertisements

Slide Shows compared

Showing your album as a slide show can come in handy in many situations. Most online photo sharing services offer a slide show feature with automatic advance. Since Windows Live SkyDrive recently disabled this feature I have received many inquiries about how to present photos automatically.

Here is a comparison of a photo album as presented by Flickr, Picasaweb, myPicturetown and Shutterfly. The album, consisting of 16 reduced-resolution images (1024 pixel horizontal dimension), was uploaded to each photo sharing service.

Here is the set of photos and below are links to view the album – and run the slide show – in the three services:

collage

view Flickr album

view Picasaweb album

view myPicturetown album

view Shutterfly album

 

My impressions:

flickr

Flickr

There is a short download delay, but the images download rapidly. The slide show runs right from the link, no need to click a play button. The slide show does not automatically cycle after it has played through. The default setting is to scale images to the browser window or to the full screen(F11). The option menu calls this quaintly “Embiggen small things to fill screen”.

It is possible to get to the author’s “Photostream” with a keyboard shortcut (“m”).

 

picasawebPicasaweb

The slide show has to be manually started with the “play” button in the control strip at the bottom. Tools for managing the slide show timing are right there. The images are not enlarged beyond the actual size. For this album the photos do not fill a large screen but are surrounded by black.

Not scaling has the advantage that the photos do not become unsharp as is the case when they are enlarged beyond their actual pixel size.

 

 

myPicturetownmyPicturetown

With this service there is a significant download delay before the album appears. The slide show does not start by itself but is started with the “play” button (lower left). The slide show goes immediately to full screen and the images are scaled up to fill the screen.

Accompanying the slide show is a music track. The viewer can turn the music off or make another selection (from 5). By default the show recycles and starts over again and again.

 

shutterflyShutterfly

The Shutterfly slide show starts right away. Images are not enlarged beyond their actual size. The show plays just once and must be manually repeated.

The controls at the top of the photo remain even when full screen mode (F11) is selected.

 

 



The viewer of these slide shows cannot get to other parts of the author’s shared photos, except for the Flickr show, as noted.

Obtaining the web address, URL, of a slide show is just a matter of starting a slide show when you are signed in to your account and copying the address from the browser address bar. This is not available for a show in myPicturetown. For that service, the address is obtained by a “share album” feature (it sends an email with the URL).

 

Which photo sharing service provides the best slide show?

That depends, of course, on your preferences. All of these photo sharing services, and there are many others, do things a little bit differently. We all have our on individual likes and dislikes. If you would like to share your opinion, please comment on this post.

.:.

© 2011 Ludwig Keck

Sourcing content for your WordPress Gallery Page

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:

image_thumb5

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.image_thumb7

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”.

image_thumb9

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. image

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

image

The command in the Insert tab PictureFrom 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.

image

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. image

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. imagePhotos 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.

imageThere 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.

image

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 Flickrimage

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 imageform: “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. imageIn 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!