Embedding a SmugMug Slideshow on Your Blog

I have recently joined SmugMug and been working hard to learn the system and what you can do with it. This post is more about my experience groping around the system trying to find out how to embed a slideshow, than it is about the actual embedding itself.  But I promise it gets there in the end.

Let me say at the outset that I still like SmugMug.  Whatever problems have come up, I've been able to work around them.  And their support staff is among the best I've ever dealt with. So in that context, let's continue ...

The image to the left is screen grab from SmugMug's "Professional Photo Hosting" page.  Note the offer of easy embedding of a Flash slideshow.

But how?  Remember, though a computer veteran, I am very new to SmugMug -- everything must be learned.

Start with a Search

There is a searchbox at the top of the page, so I enter "embed slideshow" and click the hourglass:

You can try it just by clicking the image above, but I'll save you the trouble:

Hmm. Nothing helpful here.

Try the Help Topics

Now I notice the "Help" link at the top of the page and try that.  Progress!  A help page with various topics in a menu on the left .I expand "Sharing" on the left and notice the "In forums & blogs" link.

Of course this is what I want, and click to open the corresponding help page.

The target help page is very good.  But there's nothing there about embedding a slideshow. They do indeed provide functions for embedding links, but none of those allow you to embed the slideshow itself.  At best the provide a link to your slideshow on the SmugMug page -- not the same thing at all.

At this point I'm pretty annoyed.  I know that I can grab the OBJECT html from the source of a slideshow page and copy it into my blog page, but that's not what I call "easy to embed".  I'm convinced there must be some support somewhere.

Search the Help System Only

Noticing a new search box on the help page, I decide to try searching once again for "embed slideshow".

This time the results appear in a popup box and are more promising, especially the first result:

This first result is only a month old, and appears to offer exactly what I want.  Hooray!  But on going there, I'm somewhat disappointed once again.  The section on embedding a slideshow is really just an example of how to grab the OBJECT html and embed it in your page. While well-written and complete, it seems to suggest that SmugMug doesn't really "support" embedding a slideshow in your blog, but at best encourages a modest hack.

First Solution: Not Quite a Hack

The clock was ticking, so I went ahead and copied the sample HTML from the Embed Slideshow section of the post by Ivar Borst. I pasted it into my blog and edited it, making only a couple of mistakes along the way.  It looks like this:

<object align="middle" height="600" width="600">
  <param name="movie" value="http://www.smugmug.com/ria/ShizamSlides-2007090601.swf">
  <param name="flashvars"
    value="AlbumID=11316063&AlbumKey=FPE9e
    &transparent=true&crossFadeSpeed=500
    &clickUrl=http://www.timelightdistance.com/Events/HSB2009/People/11316063_FPE9e#798787641_Ximsw">
  <param name="wmode" value="transparent">
  <param name="bgcolor" value="000000">
  <param name="allowNetworking" value="all">
  <param name="allowScriptAccess" value="always">
  <embed src="http://www.smugmug.com/ria/ShizamSlides-2007090601.swf"
    flashvars="AlbumID=11316063&AlbumKey=FPE9e
    &transparent=true&crossFadeSpeed=500
    &clickUrl=http://www.timelightdistance.com/Events/HSB2009/People/11316063_FPE9e#798787641_Ximsw"
    wmode="transparent" type="application/x-shockwave-flash"
    allowScriptAccess="always" allowNetworking="all"
    height="600" width="600">
  </embed>
</object>

It works fine, and several times during the following day I thought about writing a little tool to generate the code for me.

But Wait! There's More

Then tonight I decided to write a quick blog post about my experience. Along the way I clicked the second link on the help search results, the one that says "help - Create Slideshows and Badges".  It leads to the "Show off" help page (below), and guess what?  Here is exactly what I was looking for.

Yes, it turns out that under the "Share" menu for each gallery is a special "Owner Only" section with the meaningless name of "Show Off".  And that, my friend, is where you go to get your embedded slideshow HTML written for you.

At this point I'm feeling a little silly for not finding this function right away, but not as silly as I would have felt if I'd never found it at all.

After you configure your options, click "Copy Embed Code" and you'll get something like this. It's similar to what you would get by using the template found in the Ivar Borst article, but notice that it uses a much newer version of the slideshow SWF file -- December 2009 rather than September 2007 (the SWF file is slideshow code that Flash executes). And there are a ton more options.  This is why it's so much better to do this automatically.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  width="400" height="400" id="ssidx">
  <param name="movie"
    value="http://www.smugmug.com/ria/ShizamSlides-2009120303.swf
      ?AlbumID=11235053&dontpost=true
      &AlbumKey=qMyjo&newWindow=false&width=400&height=400
      &transparent=true&splash=&showLogo=false&captions=true
      &clickUrl=http%3A%2F%2Fwww.smugmug.com&showThumbs=true
      &showButtons=true&pageStyle=white&autoStart=true
      &showSpeed=true&VersionNos=2009120303&splashDelay=0
      &crossFadeSpeed=350&clickToImage=true
      &showStartButton=false&randomStart=false
      &randomize=true&mainHost=www.timelightdistance.com">
  <param name="wmode" value="transparent">
  <param name="allowNetworking" value="all">
  <param name="allowScriptAccess" value="always">
  <embed src="http://www.smugmug.com/ria/ShizamSlides-2009120303.swf?..."
    width="400" height="400" wmode="transparent"
    type="application/x-shockwave-flash" allowScriptAccess="always"
    allowNetworking="all"  >
  </embed>
</object>

Photo Collection: People and Crowds from "Hardly Strictly Bluegrass" 2009

Each year since 2001, during the first weekend in October, San Francisco hosts the Hardly Strictly Bluegrass festival in Golden Gate Park.  Now running six separate stages, it has become a free concert experience of epic proportions.

I have decided to reprocess my favorite pictures from 2008 and 2009 before posting on SmugMug.  Just finished the "People" group, 26 shots of spectators and crowds.



Note: I still need to add code so that something appears for non-flash browsers.

Organizing Galleries on SmugMug ...

Update: Shortly after posting this I saw an example that handled the problem of an "All Galleries" page somewhat differently, and later found a tutorial that describes a clever method.  I have it working now, and will post an update when I've worked out more of the kinks.

As part of setting up Time-Light-Distance, one of the first things I did was upload some albums or galleries to SmugMug.

I really wanted to have a single page for all my galleries that was separate from my SmugMug home page.  In order to do this I created a single master category called "All Galleries". Under that are subcategories such as "Events" and "Music" where you will find the actual albums.  In addition I created a separate "Smart Gallery" called "Favorites".  In order to group it with the other subcategories I had to put it in its own Favorites sub-category.

Now there are a few problems with this scheme that will become more evident as time passes.  For one thing, you only get two levels of categories on SmugMug.  So by creating a single top-level category for All Galleries I've wasted one level of the hierarchy -- I won't be able to create sub-subcategories.  This prevents having a category structure like "Travel/Hawaii2009", or "Events/HardlyStrictlyBluegrass2009" which I would use to organize multiple galleries from the same trip or event.

The other problem is that instead of navigating directly to the Favorites gallery, you have to go through the Favorites sub-category.  I could fix this by putting the Favorites gallery directly in the "All Galleries" category instead of in a sub-category.  But then it wouldn't appear with the sub-categories, I'd have to have a separate page element with the ugly name of "All Galleries Galleries".  Bleah!

Getting Consistent Color on the Web (Windows)

Every photographer's bane: you carefully adjust your pictures to look great and publish them with pride to your favorite photo sharing site. Then you're appalled to find them looking more reddish and saturated in most browsers.


Regardless of your current browser, you should see a difference between the two slices above (if not, your monitor has serious color issues and you can stop reading here).  The image is a single screenshot showing the same image as rendered in Firefox 3 (left) and Chrome (right) on Windows Vista.  I could just as well have compared Safari and Internet Explorer and you'd see the same difference.

The point isn't whether one is better than the other, the point is that they are different.  The browser on the left is interpreting the ICC v2 color profile embedded in the image, while the browser on the right is ignoring it.   For that matter many other programs, such as Picasa, also ignore color profiles.

I'm not using an "unusual" color profile such as Adobe RGB in my image. I'm using the accepted internet standard profile sRGB (IEC 61966-2.1) and have been under the impression that browsers render using this profile by default.  So why are the results different?

Chris MacAskill of SmugMug once advocated saving images without embedded profiles in order to get consistent results across browsers.  But that wouldn't actually solve my problem, it just makes all browsers consistently "wrong" relative to the colors I saw when editing the photo.

What I need is consistency between my photo editing software and the universe of web browsers.

My Problem: Incorrect WCS Settings

Eventually I discovered a problem in my Windows Color System (WCS) settings (Control Panel::Color Management).  At one time I had set up my system workflow for Adobe RGB, which included setting the WCS default device profile.

Don't do that.  Instead set your default device profile to sRGB IEC61966-2.1 like this:

You can (and should) still use your calibrated monitor profile.  For a while I was afraid that I would have to set it to the default sRGB profile as well, but no:

You shouldn't have to restart your computer, but you will need to restart color managed applications, such as PhotoShop, Safari and Firefox before you can see the change.

Results

Here's a comparison of the image after the change. The left-most image is PhotoShop, showing the PSD file rendered in sRGB 8-bit color.  I saved that image as an 80% JPEG with the embedded sRGB profile, then displayed it in various browsers.   These look really close to me.

From left to right: (1) PhotoShop (PSD file, sRGB 8-bit), (2) Safari (color managed), (3) Chrome (not color managed), (4) IE 8 (not color managed).

I wondered just how close they really were so did another screen capture of just the ear at 100% in all four programs.  Then using PhotoShop I compared the average RGB values of an 11x11 region:

The results ...

PhotoShop (original)	rgb(220,176,154)
Safari (managed)	rgb(220,176,154)
Chrome (unmanaged)	rgb(221,177,156)
IE 8 (unmanaged)	rgb(221,177,156)

Very close indeed.

If You're Interested ...
The International Color Consortium (ICC) has a handy web page for checking whether your browser supports color management and, if so, whether it supports v4 or just v2.

Chris MacAskill of SmugMug has written several popular blog posts on this subject.  His conclusion that embedded color profiles are spawn-of-devil may be controversial, but it does represent some practical thinking in the real world of publishing photos on the web.

• "SmugMug Alters My Colors - Updated" (May 2008)
• "SmugMug Alters My Colors" (June 2005)

On the separate-but-related topic of color gamuts, SmugMug also has a clearly written explanation of sRGB versus Adobe RGB that I found highly informative.  For even more details see this tutorial at Cambridge In Color. I used to think Adobe RGB was superior for the wider gamut, but not only is there little to gain, but the limited precision of 8-bit color channels will result in greater quantization errors.  In short, always use sRGB for 8-bit color.

Microsoft's Windows Color System (WCS) was introduced with Vista and provides a lot more control than older versions of Windows.  But it's easy to get it slightly wrong, as I did.

Introducing Time-Light-Distance

I've been keeping a personal blog for a few years now.  While it is reflective of my diverse interests -- careening between Literature, Music, Philosophy, Photography, Computer Technology and more -- the lack of any coherent theme makes it difficult for anybody else to follow.

So lately, as I've been posting more about photography, I have been thinking about creating a separate, specialized blog as the new home for all my photo-related posts.  And I was still thinking about it when, a couple of weeks ago, Trey Ratcliff (StuckInCustoms.com) challenged his readers to consider trying out SmugMug.  Well, I'd been thinking about that too.

So I decided to do both at the same time.

The result is Time - Light - Distance.  As much as possible I am trying to integrate the SmugMug photo sharing site with Blogger.  My goal is not only to offer a better photo and video sharing experience, but also to give myself a forum to discuss my work.

So, for anyone who finds the things I'm doing helpful or interesting, I hope T-L-D will make it easier to follow.  For myself, I hope that the sharper focus will make a difference in the quality and quantity of my work.