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

A peek into the “café art” atelier

Atelier – a studio or workshop, esp. one used by an artist” – Artist? Oh, well, I will use the term anyway.

Here is an actual glimpse of my “atelier”, of course, LJK_5255-Pthe real workplace is inside that black box on the right, my computer. And my tools are a collection of software programs. In this article I will tell you a little about how I import, manage, and organize photos, a bit about “café art” post-processing and some of the tools, and lastly about presentation and sharing of the images.

But this article being about “café art”, I must show this view this way:

atelier-5254-starGY

Importing, managing and organizing photos

My AutoPlay is set to start the import process when the camera is connected and turned on. imageOver time I have collected a ton of programs that, either as their prime task, or as an added feature, provide photo management operations. The program I settled on for that task is Windows Live Photo Gallery.

Photo Gallery is what I use to do the importing. blog-120629-01In fact, this is my go-to program for most photo organizing and managing tasks.

The default setting for most programs is to use “My Pictures” as the location and that is what I use. The import routine creates a new folder with the date when the photos were created as the name. That is already a giant step to keeping photos organized.

Right after import, Photo Gallery opens. I rename all the photos in the new folder to replace the “DSC_” prefix, that my camera insists on providing, with my initials. This is a two-second operation, see How do I replace the DSC prefix on my photo file names?

imageThen I select all the photos in the new folder, right-click, and open Properties. I add some “boiler-plate” tags, and fill in the Authors and Copyright fields.

Most of the specific tagging I do in Photo Gallery, as well as assigning titles, “Caption” as PG calls them.

My photos are now organized. In Photo Gallery I can find them by folder location – or by the date they were taken. But most importantly, I can find photos by tags.

imageSome photographers keep a careful system of tags, but I don’t make a project out of it. Occasionally I discover that I have assigned similar tags like “Athens” and “Athens GA”. I have not visited Greece, so it was easy to select all “Athens” photos, assign the “Athens GA” tag to them and then delete the “Athens” tag.

Finding photos by date or tag is easy. It does not matter where on my computer the photos are, and indeed they will be in different locations. To keep the “My Pictures” folder from getting too messy, I periodically move older folders to an “archive” location on another drive. There the folders are in tear and quarter sub-folders.

That’s pretty much it for organizing and managing, but I must add one note: Other photo managing programs see the same file structure, hence in Picasa, for instance, the organization looks exactly the same.

Editing – post-processing – creating the “art”

Editing or post-processing is what you do to the photos after they are taken. Some cameras provide editing tools. The only one such camera tool I use regularly is “delete”. I prefer to do the editing in my computer when I can see the images on a large screen. A bit of touch-up can benefit just about every photo. This article will not go into enhancing photos by adjusting the exposure, doing some judicious cropping, retouching and other “tweaks” to bring out the best in pictures. This is about “café art”.

It stands to reason that I should define “café art”, so here goes:

Café art – playful, pictorial, or decorative work derived from or based on photographs. Such images do not imply deep philosophical meanings or make profound statements, they are meant to simply provide a fleeting moment of visual pleasure

Actually there is a bit more to café art: It provides a lot of fun in manipulating photos and creating totally new images. Photos that otherwise are suitable only for the “recycle bin” are often my best sources or “substrates”. On occasion I will take some pictures with the specific intent of manipulating them in a specific way. I did so for this article.

Most photo editing programs, as well as some unexpected applications, provide some “art effects”. Windows Live Photo Gallery is somewhat of an exception, imageit only offers some recoloring effects, unless you count some of the color or exposure adjustments.

imagePicasa provides a richer selection. I often use the “Pencil Sketch”, “HDR-ish” and “Neon” tools.

These Picasa tools are simple to use and provide a nice range of the effects.

A neat set of tools is provided in several of the Microsoft Office 2010 programs. imageI often use Word 2010 for its “Artistic Effects” in the “Picture Tools” ribbon. There are some delightful tools. These programs are not intended as photo editors and getting the pictures in and out is not as easy as with the photo apps, but some effects are just not available elsewhere.

image

Another tool I like is FastStone Image Viewer, it has a couple of nice effects that I use often, “Sketch” and “Oil Painting” and offers a rich selection of “Frame Masks”. You saw one of the masks at the beginning of this post.

There are many other art tools and I use several. Photo editors also include extensive manipulation tools. My long-time favorite is Corel PaintShop. This is a professional strength photo editor. Others are Adobe Photoshop and Gimp.

One of the effects that I love to use is what I call “plaster paint” and what PaintShop calls “Topography” (in “Artistic Effects”). In fact I specifically went out to get some photos to use for this article with this effect in mind. Here is one of them:

LJK_5393-C-P3-Cs

This is “Sunlight on Leaves 2012”. This gets me to my final section:

Presentation and Sharing of images

Photos, and especially “art”, is more satisfying when it is shared and presented to others for their pleasure. In this time of the Web, sharing is online. You are seeing these images on the Internet.

There are many photo sharing sites and many other places on the Web where pictures can be viewed. I use several, the menu at the top of this page takes you to most of them.

The sharing service I like the best is not even a good photo sharing site – although it was a couple of years ago: SkyDrive. Microsoft is trying to make SkyDrive the ubiquitous sharing tool for everything, everywhere, and everyone. For sharing photos it is not in the league of Flickr, Picasaweb, Shutterfly, and the many other sites specifically designed for sharing pictures. The reason is that it is much more private, it does not provide an  easy entry “front door”. It is more like a “private club” than a “public house”.

SkyDrive

Once you construct a “Grand Entrance” to your SkyDrive albums, you have a great way for sharing photos. I like to use blogs as the “front end”. You can see this at Gallery Ludwig, and specifically for “café art” at Silver Canvas.

SkyDrive is easy to use. Uploading to SkyDrive can be done right from Live Photo Gallery, directly in a browser, “skydrive.cm”, and most recently, with a SkyDrive desktop app.

Here are some quick demonstrations.

Uploading to SkyDrive from Photo Gallery

Since I use Live Photo Gallery for organizing and enhancing photos already, using it to upload to SkyDrive is just a click away. The process is simple enough: Select the photos you want to upload, click SkyDrive and the process is underway.

A dialog opens showing your SkyDrive albums along with an option to create a new album. One small downside: You cannot upload to sub-folders this way. But that is easily fixed by creating a temporary album, uploading, then moving the photos to the sub-folder where they should be.

atelier-CL-02

atelier-CL-05

Moving the photos is done at “skydrive.com”, that is, online using your browser. It is quick and easy as you can see in the two illustrations here.

One other note: By default the photos will be resized to 1600 pixels (max dimension). There are other options, 600 pixels and “Original”, whatever size the photos are.

Uploading to SkyDrive using the SkyDrive desktop app

atelier-CL-01The SkyDrive desktop app replicates your SkyDrive on your computer and automatically keeps the contents of SkyDrive in synch with the local folder. The local folder is just like any other folder and you manage it with Windows Explorer.

Using the desktop app is just a matter of dragging photos to the folder or sub-folder. The size and other properties of the files are not affected. Note of caution: Be careful that you copy the photos and not move them, unless that is where you wish to keep them.

Uploading to SkyDrive online

Almost as easy as the two methods discussed is uploading to SkyDrive when you are signed in using your browser. You navigate to the folder and click Add files.

SkyDrive-upload-12

A window opens with a message “Drop files here…” (see illustration, you must have Silverlight installed for this option). Just drag the photos over into this window.

imageThe upload process starts right away. Of course, there is a catch. At the bottom of the dialog is a checkbox and the text “Resize photos to 2048 px”. The checkbox is checked indicating that your photos are already being resized. image

If you want the photos to be uploaded in their original size, click the checkbox to uncheck it. There will be another dialog that says “Change photo size”. Click the Yes button. The upload will be restarted and your photos will be uploaded in their full size.

A little bonus

Uploading by way of the online SkyDrive features was illustrated above with a file named “Triptych-5388.jpg”. This is indeed a rather large file and cannot be easily viewed in SkyDrive.

 SkyDrive-upload-07

You can see in the illustration that the size is 12000 x 2800 pixels. Larger than your monitor, I bet.

Here is  “Leaves – triptych” presented in a neat Microsoft service called Zoom.It, just click the image.

Leaves

.:.

© 2012 Ludwig Keck

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

Sharing Photos with myPicturetown

Nikon has offered a photo sharing service for quite some time and recently made improvements. With a claimed user base of over a million and a half it is not among the largest sharing services but offers some nice features. You do not have to be a Nikon photographer to set up an account at myPicturetown. Two levels are offered: a free account with 2 GB of storage and  a fee-based “Gold” account with more storage and additional features.

The site requires Adobe Flash Player and the user interface has some unexpected quirks, it is also unexpectedly slow in operation. In addition there is an up-loader app you install on your computer that used Adobe AIR. install-11

Sharing photos is by email – somewhat like sharing a SkyDrive album. I prefer a clean web address like you get at Flickr or Picasaweb, but that is not available. The generated email message is quite pleasant and looks like the one shown here.

The “View photos” link is extra-ordinarily long, not something to be typed by hand. If you wish to share in a way other than the email link, an URL shortening service is advised.

One nice feature is that you share just one album. The recipient can view the photos an a pleasant slide show, but cannot view the rest of your site. In my opinion that is a definite plus.

You can define the background of the album with several color and design options. The layout and appearance are attractive and functional. When the visitor gets to the album it looks about like this:

myPictT-12

Clicking a thumbnail on the right displays it in the space on the left. The little play button, image,

in the lower left starts a slide show, with music! The viewer has a set of tools to set the transition speed and effect and to pick the type of music track. Not much choice there, I don’t like any, but this is a nice touch.

The viewer can also download the set of photos in the album as a ZIP file.

Take a look at my album, either image above links to it, and see if this is something that would appal to you and your friends.

.:.

© 2011 Ludwig Keck

Setup and Maintain a Photo Gallery Page with Live Writer

With the discontinuation of Windows Live Spaces the attractive “entrance page” and easy to share web address to SkyDrive albums is gone. None of the popular photo sharing sites, Flickr, Picasa Web Albums, or Windows Live Photos (on SkyDrive) have neat and customizable “front pages”.

So what to do? I am reminded of the German saying “Not macht erfinderisch” – I will render it in English as “necessity fosters innovation”. WordPress, Blogger, and other blog sites, allow you to set up static pages.

Windows Live Writer is an excellent tool for setting up and for maintaining such pages. This way you can create your photo gallery page, or pages, just the way you like. What is more, the pictures can be sourced from SkyDrive, Flickr, Picasa Web Albums, Shutterfly, and many other free photo sharing sites. You can also incorporate links to specialized sites like Zoom.it and Photosynth. Here I will describe WordPress pages since this blog is at home on WordPress.

First, of course, you need a blog account. All the blog sites make this an easy step-by-step process. If you have a blog module on your Windows Live Spaces site, you can migrate right over to WordPress (prior to March 2011 when Spaces shuts down). For some guidance on setting up a blog on WordPress see “How to set up a WordPress blog”.

For a gallery page you probably have a certain look and feel in mind. WordPress offers many “themes”, in fact over a hundred, so there is likely one that fits your bill. Set up your blog to your liking. On how to customize your WordPress blog see “How do I customize my WordPress blog?”.

In Windows Live Writer the process to connect to a blog account is also straight forward. For details see “How do I connect Windows Live Writer to my WordPress blog?”.

 

Setting up the gallery page

Here is how to go about setting up the static page. Open Windows Live Writer. It will offer a blank blog post window. You can tell by the prominent “Enter a post title”. This is not what you want.

For this demonstration I will use “Gallery Ludwig” as the demo blog site.

Click File (the leftmost tab on the Ribbon)image.

Click New post.

In the right pane click New Page.

Now you get “Enter a page title”. This not only allows you to put pictures and text on a page, but it sets it up and adds it to your blog.

Enter the title you want for that page. Be careful, make sure of the name and spelling. For this demo I will call my new page “Gallery 1”.

There are some other setup tasks to complete the static page, so add some text, maybe a picture in the main area and publish the page. You will be able to add to and modify the page later.

Click the Home tab. Click Publish.

The page will be uploaded and your browser will be opened to display the blog.

Configuring the blog

Next to configure the blog so visitors to your blog will see the static page first. Admire your initial effort and close the browser.

On the Ribbon click Bog Account. image

Click Dashboard. The browser opens and takes you to your WordPress blog dashboard (you may have to sign in).

Here there are two things to do: To set up another page that you will use to show your blog posts, and to set the static page as the landing page for visitors.

In the left pane click the down arrowhead next to Pages. Then click Add New. This opens the editor for imageimagea new page. In the field showing “Enter title here” type the title for the blog post page. I chose “News” for mine. Scroll down and find the Publish button. Click it to add the page to your blog.

image

 

In the left pane click the down-arrow next to Settings. Then click Reading.

On this page you see this:

image

 

Here you select what the front page, the one visitors see first, should display. Click on the second choice, “static page”.

Then you specify the page that is the front page and the page on which blog posts are to be shown. These are selected in the drop-down selection boxes. The page names will be available there. Here is my setting for the “Gallery 1” page to be first and the posts to be shown on the “News” page.

image

Now you will also see why you set up a new page for the posts: so it will show in this selector and you can specify it correctly.

Scroll down and click Save Changes.

Your blog is now configured for a static “landing” page and a separate blog post page. There are still some details to clean up.

 

Close the browser. In the Blog Account tab on the Ribbon click View site. The browser opens again and shows your blog site. Notice that you see your newly created static page. On the menu you can also see the newly added post page. In my case the menu line looked like this:

image

It shows “Home”, “About”, and “News”. I thought long and hard before I selected the title “Gallery 1” for my front page, and here it is called “Home”. Furthermore the “About” page is listed next. It is common for Internet sites to show the “About” page as the last item in the menu.

This can be changed as well, but not in all cases for all themes. If it is ok with you the way it is, leave it alone. If you want to change the menu this can be done with a custom menu. Click: How do I install a custom menu on my WordPress blog?

Maintaining the page

After publication of your page you can modify it, add to it, make any edit changes with Windowsimage Live Writer. If you are running Windows 7 you might be able to open the page right from the Start menu: Click the Start button, move the pointer to Windows Live Writer then to the right to see the jump list. Click on the name of your page.image

The other way is to open Writer, click File (upper left tab), Open recent post and your page should be shown in the right pane. Click on it to open it.

You can now modify the page: add to it, make any changes you wish. To refresh the modified page online just click Publish on the Home tab.

In another post I discuss some of the ways of showing material on your gallery page from other sources.

Good luck and much fun with your gallery!