Using Gmail with Apple Mail

I recently moved my e-mail services from a Courier-based Maildir system to Google Apps / Gmail. Times are tough and I just couldn’t make a case for paying for hosted e-mail anymore. Gmail for Google Apps is free, each user gets 7+ gigs of storage and each user can manage their own account (password changes et al).

I’ve been trying to get Gmail and Apple Mail to play nice with each other when loading mail via IMAP. The first problem to solve was how to remove the [Gmail], All Mail and Starred from showing in the folders list. The second problem was reconciling the different Sent/Trash/Draft folders that each system uses. And finally there was an issue of some emails that got out of sync between client and server.

What is IMAP? The Internet Message Access Protocol lets you read your email on a server (like Gmail) on your computer in an email reader (like Apple Mail) without having to use a slower web interface. It is the hipper version of POP3, supporting server-side folders, searching and “push” mail notification.

FWIW, I did this using OS X Snow Leopard (v 10.6.7) and Mail 4.5, with a total of 41, 388 inbox messages and 14, 545 outbox messages.

Removing “All Mail” from the folder list

Gmail’s All Mail (and Starred) are virtual mailboxes that show a special view of your mail within the Gmail interface. But outside of the Gmail  interface, they appear as real mailboxes, not virtual ones. So when creating a Smart Mailbox, emails are counted twice: once from the Inbox and once again from All Mail. In searching for a solution, I found people trying to build Smart Mailbox rules to work around this, but that is the wrong approach. The right approach is to just get rid of the damn thing. Here are the steps:

  1. Login to Gmail and go to the Settings page.
  2. One of the Settings tabs to the right is Labs – select it.
  3. Look for a Lab called Advanced IMAP Controls and enable it. Then click the button marked Save Changes.
  4. Now, go back to the Settings page and select the tab called Labels.
  5. Find the “All Mail” system label and deselect Show in IMAP. While you’re at it, do the same for “Starred”.

Reconciling the Sent, Draft, Junk and Trash folders.

Apple Mail and Gmail use different IMAP folder names for each of the special folders. That’s because IMAP does not specify a standard set of names for the special folders. So for example, Gmail puts sent messages into a folder called “Sent” and Mail puts them into one called “Sent Messages” so that there are two places for sent mail. Ridiculous! Let’s fix it:

  1. In Apple Mail, make sure you can see your Mailboxes sidebar on the left. If you can’t, go the Mail -> View menu and select Show Mailboxes.
  2. Find our Gmail account on the left hand side and expand it (click on the small triangle to the left of the name of your Gmail account), then expand the [Gmail] mailbox under that.
  3. For each of the four special folders listed under [Gmail] go the Mail -> Mailbox -> Use This Mailbox For menu and choose the special folder it should be assigned to. For example, select the “Spam” folder listed under [Gmail] and select Use This Mailbox For -> Junk. If you have multiple accounts don’t worry, Apple Mail will handle all that internally.
  4. When the original Apple Mail special folders are “released” from their duty, they will magically appear as IMAP folders in the Gmail account. Feel free to move their contents to the appropriate Sent/Trash/Draft/Junk under MAILBOXES and then delete them.
  5. Finally, in Mail -> Preferences -> Accounts -> Mailbox Behaviors, for Drafts, Sent, Junk and Trash choose to store messages on the server. For Trash, also choose to move deleted messages to the Trash mailbox.

Removing [Gmail] from the folder list

If you’ve followed along so far, the only thing showing in the folder list is [Gmail], along with any custom folders you may have created on the server. But since the [Gmail] folder is now empty, it serves no purpose and is unsightly. How to get rid of it? We have to change the server namespace (a fancy word for filepath) Apple uses by default to the one Gmail’s prefers.

But there’s a catch of course. Apple Mail uses the root as the default. Your inbox lives in root. And so do any folders you may have created on the server. Upon changing the namespace, Mail will no longer be able to see these folders. So here’s what we do:

  1. In the folder list, drag and drop all folders you’ve created on the IMAP server into the [Gmail] subfolder.
  2. In the Mail -> Preferences -> Accounts -> Advanced menu, enter [Gmail] for IMAP Path Prefix. After a brief delay, [Gmail] will disappear and all your folders will now appear to be back “in the root”
  3. But the inbox will now be empty. Login in to Gmail, move all the emails from the inbox to a temporary mailbox. Then move them all back to inbox. Synchronize the account in Apple Mail to show the changes.

Synchronizing Emails between Gmail and Apple Mail

Once I was done my transition, some emails were showing the incorrect date and incorrect content. This one is easy to fix. Choose the mailbox in Apple Mail that is misbehaving and from the Mail -> Mailbox menu select Rebuild.

Posted in OS X, Programmer | Leave a comment

Introducing Blip Slideshow: A WordPress/SmugMug plugin

It’s been two weeks since I started using WordPress and I absolutely love it. I recently blogged about my experience using Super-Slider Show to get my photography website, Ambient Photography, up and running quickly. My website and Super-Slider show both used the excellent Slideshow2 so migrating my complex set-up was relatively painless.

But I needed a way to keep my slideshow up-to-date and so I turned my attention back to the media RSS-reading slideshow plugins for WordPress. RSS feeds from photo sharing sites like Flickr contain all the most recent information about the photos you’ve already uploaded online, bypassing the need to upload the pics again to WordPress. Only one of the plugins I found was a close fit to what I needed for Ambient Photography, so I set about creating my own.

WordPress, and thus PHP is completely new to me. I am a J2EE programmer by trade and always considered PHP/Javascript a poor man’s language. Well what a poor man’s language it is! In less than four days I had learned MooTools, written my PHP plugin, debugged it for three major browsers and got it published! Introducing Blip, a Javascript slideshow WordPress plugin that reads image data from RSS feeds. Now when I update my photos on SmugMug, I can be sure that the latest pictures are appearing on my website.

Posted in Programmer, Web Design | 1 Comment

Finding a WordPress/SmugMug slideshow plug-in

Today I’m working on a new website that focuses on my wedding photography. And I want to pull in SmugMug images via RSS feeds and display them on the WordPress site. I am looking for the following:

  • (Must Have) pull images from RSS feed
  • (Must Have) display in a Javascript Slideshow via a post tag and/or widget
  • (Must Have) display multiple slideshows per page
  • (Nice to Have) caching of the feed itself
  • (Nice to Have) caching of the images downloaded (for those times when a request to SmugMug just hangs)

So begins my search. Using the Add New Plugin on my WordPress blog, I search for “Smugmug”.

The first one I try is Anyfeed Slideshow and it seems to work as advertised. Configured as a widget, it has loaded the RSS feed and shows the images in a nice jQuery slideshow. It even has a couple options for tweaking the size. Nice. This should be easy!

The next one that comes up is Lifestream, but it appears to be a general Facebook news feed-like thing and not specific enough for my use. Skip.

Next is Viewzi Site Search for WordPress, but whatever Viewzi is, it closed in 2010. Next.

I try Smuggery, but after I enter my SmugMug alias (not the RSS way, but hopefully it will let me choose an album from all my albums) it just hangs at “downloading 107 albums”. Well that IS 50 megs or so of data. Not to mention the plugin homepage is AWOL. Next.

Next up is SmugPress. Again this asks for a SmugMug alias, which I enter, and then a smart feature is shown where the album data it downloads is cached. Nice. It’s configured as a widget and I go ahead and add it to the sidebar. Then it simply fails with a useless “[ Feed Read Error ]“. And the plugin homepage is literally 404. Next.

Next up is PhotoXhibit, like SmugPress asking for a SmugMug alias AND an album ID, which I enter, and nothing happens. :p

Then I install fdsPhotoFeed, and I enter the code they have as an example and check the post. Hey! I got somethumbnails displayed! But it’s not a slideshow. The docs say I also need wp-lightbox2. De-coupled code. Nice, I approve. Except wp-lightbox2 is a Lightbox, not a slideshow. And not only that but it doesn’t Lightbox the large images. I think because for some bizarre reason, fdsPhotoFeed has removed characters from the image filename?? 1162373008_wCp7L-M.jpg has become 1162373008_wCp7-M.jpg. Now that’s just crazy. Next.

Next on the list is PhotographerConnections. It wants my alias AND my password. Well my SmugMug account IS my life so I don’t really feel like giving my password out to third-parties. I change the alias field but not the password field, maybe it will work without authentication. Wrong. Now I can’t even get back to the Plugins page because the plugin is crashing at authentication. Isn’t WordPress supposed to automatically disable misbehaving plugins? This one is crashing so spectacularly, I have to connect over WebDAV and delete the plug-in manually. Next.

SmugMug Photo sidebar widget. This Widget successfully pulled my photos from SmugMug. It links to the SmugMug album instead of just the photo, cool. But there is no slideshow. And it has added quite a significant delay to the loading of the page. Obviously pulling the RSS feed is done on the server, as opposed to in the browser. And the plug-in’s homepage is MIA. Next.

WP-SmugMug is the last one to try. Install is okay, I create a new post with its short code including my RSS feed URL and perfect! It pulls my images and nice and quick too. Unfortunately, no slideshow.

So, to summarize. Those that worked as advertised:

  • WP-SmugMug
  • SmugMug Photo sidebar widget
  • fdsPhotoFeed (sort of, kind of)
  • AnyFeed Slideshow

The winner (for me) is clearly AnyFeed Slideshow, as it is the only one that actually builds a Javascript slideshow. Unfortunately I don’t particularly like the animation of the jQuery slideshow. One image is faded in, and when that is done, the previous image fades out. It’s fine if your images are all the same dimension, but looks odd when a portrait image is replaced by a landscape image or vice versa. It also waits for all images to be read before beginning the slideshow, which is quite a long pause on my page. And it seems to support only one slideshow per page. But at least it is a beginning! Time to hack.

Posted in Programmer, Web Design | 2 Comments

WordPress, SuperSlider-Show plugin and the FromFolder option

I love the Slideshow 2 all-Javascript slideshow. It’s what powered my slideshow at Ambient Photography for the last two years. But I recently converted to WordPress and the SuperSlider-Show plugin to provide the same functionality. Out of the box it works great. But for a more complex presentation like mine it took a bit of tweaking.

Installation

I followed the instructions at http://wp-superslider.com/2008/how-to-use-superslider-show-plugin/, and then http://wp-superslider.com/2009/slideshow-how-to-use-the-from-folder-option/ but they only got me so far. And the forum seems devoted to cosmetic issues between browsers rather than customization.

One of the first things I did was opt for SuperSlider-Show to not link to it’s CSS stylesheet via the configuration panel. Whoops! Fail. Unfortunately I don’t know any PHP, but like most successful programmers I thrive on challenge, so this was my opportunity to learn. There’s a bug in v2.7.7 of superslider-show.php2:

if (($css_load == 'off')) return;

should be

if (($css_load == 'off')) break;

Okay, things seem to work now. Next!

The Title Page

http://www.ambientphotography.ca/

The first page shows a simple slideshow with no bells or whistles in a repeating loop. All the images exist in a sub-folder from the old site already. And to help things load even faster, I’ll use fixed-sized images. The shortcode for that gallery looks like this:

[gallery image_size="full" height="400" width="800" loop="true" controller="false" captions="false" thumbnails="false" loader="true" linked="false" fromfolder="smugmug-images/title" first_slide="1"]

Whoops! Weird fail. Apparently I didn’t read the instructions all the way to the bottom. The thumbnails are being used in the slideshow. As it turns out if you load images from a directory using fromfolder, the thumbs have to be a certain size so as not to get picked up as sldieshow images. This is odd since SuperSlider-Show is already configured to know which images are thumbs, as explained in the Advanced tab of the plugin configuration. But I digress. The following code change for my 150×150 thumbs was necessary:

$minwidth = "200";

to

$minwidth = "150";

and

if($width > $minwidth){ // if this image is larger than min_width

to

if($width >= $minwidth){ // if this image is greater than or larger than min_width

Okay looks good! Except when I click on the slideshow I see the image. The plugin appears to be ignoring the linked=”false” parameter I added to the gallery, though only when reading from a directory. Another code change is required to remove the captions and links the plugin is forcing upon each picture. This is a quick patch though and not a true fix:

$file = "'".$file ."': { caption: '".$caption."', href: '".$link_file."'}";

becomes

$file = "'".$file ."': {}";

Ok! Now this slideshow is looking the way I want. Next!

The Services Page

http://www.ambientphotography.ca/services/

This page shows four little slideshows, side-by-side, with no controls at all. And they all link to static pages. Fairly straightforward. The shortcodes are:

[gallery image_size="full" height="150" width="150" loop="true" controller="false" captions="false" thumbnails="false" loader="false" fromfolder="smugmug-images/portraits-small" clear="none" href="http://www.ambientphotography.ca/2011/services/toronto-portrait-photographer/"]

[gallery image_size="full" height="150" width="150" loop="true" controller="false" captions="false" thumbnails="false" loader="false" fromfolder="smugmug-images/weddings-small" clear="none" href="http://www.ambientphotography.ca/2011/services/toronto-wedding-bridal-photographer/"]

[gallery image_size="full" height="150" width="150" loop="true" controller="false" captions="false" thumbnails="false" loader="false" fromfolder="smugmug-images/engagements-small" clear="none" href="http://www.ambientphotography.ca/2011/services/toronto-engagement-photographer/"]

[gallery image_size="full" height="150" width="150" loop="true" controller="false" captions="false" thumbnails="false" loader="false" fromfolder="smugmug-images/headshots-small" clear="both" href="http://www.ambientphotography.ca/2011/services/toronto-headshot-photographer/"]

Notice that they all have clear=”none”, except for the last, which has clear=”both”. This is so that the slideshows all float:left in a row.

The gallery page

http://www.ambientphotography.ca/gallery/wedding-gallery/

There are four of them that look the same, so I’ll just show one. This is a slideshow with thumbnails, clicking on the thumbnail jumps to the image, and clicking on the image opens it up in a lightbox. Here’s the shortcode:

[gallery loader="true" controller="false" loop="true" delay="750" center="true" overlap="false" resize="length" captions="false" thumbnails="true" fast="true" linked="lightbox" fromfolder="smugmug-images/weddings" clear="none"]

Resize=”length” is not one of the options presented when you are inserting a gallery into your post, but it is available in the plugin configuration in the Image Options tab. Because I am pulling my images from a SmugMug feed, and they vary in dimension depending on their orientation, resize=”length” is a must-have. Unfortunately it doesn’t work in v2.7.7 of SuperSlider-show. Another PHP fix:

resize: ".$resize.",

becomes

resize: \"".$resize."\",

All finished!

It took a bit of time, a lot of swearing but in the end I am really happy that I was able to get the slideshows to look and feel the way they did in the old site. And the tools available to me now mean that it’s much easier to separate my content from my presentation which I love.

The finished site: Ambient Photography

Thanks to Daiv Mowbray for his work on SuperSlider-Show and of course the Slideshow 2 team.

Posted in Programmer, Web Design | Leave a comment

My new user experience with WordPress 3

I’ve launched a new website using WordPress 3, my commercial photography site Ambient Photography. It’s actually an old website, hand-coded in HTML, that I transformed to a WordPress site. There are two main reasons I did this:

  1. More of my IT clients are asking for PHP skills (though truthfully, configuring the site required almost no PHP knowledge)
  2. I wanted a content manangement system (CMS) running my site so that updates to it were easier to make.

For reference, the old site is now here: http://www.ambientphotography.ca/2010/

Before any of this began I had to make the decision on which CMS to use. The big ones to look at are Joomla, WordPress, Drupal and MovableType. A friend at One-Nyne Design suggested Symphony as well, but that turned out to be more of a programmer’s framework rather than a ready-to-go CMS. A few years back I ran a MovableType blog and I found it a little complicated to setup. According to market share, WordPress and Joomla lead the pack. So I bought two books on Joomla (it seemed to offer the most flexibility and a largest assortment of extensions) and one on WordPress. Installation of Joomla was a breeze, but after a week trying to customize it, watching dozens of video tutorials, and half a book later I was ready to tear my hair out. Opening the WordPress book I installed the software and customized a majority of the site in less than a day. Decision made.

WordPress can be downloaded and installed on your own webserver, or you can get an account at WordPress.com with a pre-fab site ready to go. I’m still a J2EE guy at heart, but the WordPress install took all of five minutes, including creating the MySQL databases, configuring Apache and installing WordPress. There’s no way I could do a J2EE deploy of a new Struts web application in anything under an hour. As a busy entrepreneur, I just don’t have the time to tinker anymore.

WordPress has two types of content entries:

  1. Article-style “posts”
  2. Webpage-style “pages”

Since my photography site is a more traditional website and not a blog, the majority of the content I created in WordPress are Pages. But the Posts functionality in WordPress now allows me to streamline the “news” pages I was creating in hand before, and even shows an excerpt of the most recent news item on my homepage.

With the content created, my next task was to replicate the style of my old site. WordPress uses a PHP template system to transform the content and style into the look you want. Pre-fab themes are easily installed from http://wordpress.org/extend/themes/. But rolling your own custom theme is as easy as dropping an index.php (peppered with WordPress PHP tags) and a style.css stylesheet into a new sub-directory. The default WordPress 3 theme, called Twenty Ten, is an excellent reference of how to get the functionality you need into your custom theme. And better yet, all themes can be tweaked, or extended as child themes, to suit your specific needs – everything is open source.

Plugins easily extend the functionality of WordPress without writing code. I used four plugins for my site:

  1. Contact Form 7 – to create a contact form with a quiz – something I consider better than CAPTCHA at eliminating spam.
  2. Graceful Email Obfuscation – I looked at several email obfuscators – many were easy to beat leaving behind giveaways like mailto’s and specific CSS classes but this one appears pretty fool proof.
  3. PJW Page Excerpts – this allows me to use excerpts for pages (as the Meta Description tag), since be default excerpts are only input by WordPress for posts.
  4. Super Slider-Show – encapsulates the all-Javascript Mootools Slideshow2, which I was already using on the old site. I also made several modifications to this plug-in to get it do what I wanted.

There were a few hiccups along the way:

An in all, I spent about a week’s worth of spare-time getting everything going. I’m very happy with the results and I look forward to creating more WordPress sites in the future. Thanks Internet!

Posted in Programmer, Web Design | 1 Comment