When Smugmug released their new design, I was impressed, and I decided it made sense to move my photos and portfolio galleries over to their system. On my site, this meant replacing my existing galleries built on NextGen Gallery. I like NextGen, but I get some nice features using Smugmug, including turnkey print store and the ability to do online licensing of digital images without having to build all of the ecommerce pieces or doing any of the infrastructure for billing or fulfillment. While I don’t expect print sales to be a big part of my setup, it’s enough of a hassle to build and maintain that outsourcing it to Smugmug made a lot of sense, especially given how much I liked their redesign.
Rebuilding my site to do this went almost flawlessly — until I wanted to fire up the front page slideshow. At that point, I realized I had a problem, because the slideshow you can embed on other websites is still Flash based. They work fine anywhere Flash is supported:
Image may be NSFW.
Clik here to view.
But…
In safari?
Image may be NSFW.
Clik here to view.
Or on your iPad?
Image may be NSFW.
Clik here to view.
No love….
That’s not acceptable. I spent a couple of days experimenting with different options so that someone coming to my web site on a Flash-free system would get something: either a static image, or some other replacement for the gallery that would make the site look decent. I even considered a Javascript function that would recognize the lack of Flash and redirect those users to the front page of my Smugmug site. At least that would have given them a decent user experience and access to my images.
That concept actually gave me the idea that led me to this solution. The galleries on Smugmug worked fine on non-Flash systems; they just haven’t had time to rewrite the external embed system to use that technology. If only I could embed one of these native galleries onto my web site….
In fact, you can. The answer is to use a Smugmug page and an Iframe. Iframe is an HTML technology that lets you embed a web page inside of another web page, and it’s well-supported across browsers; the only big gotcha is that newer releases of Firefox have set the default to require the user to take an action to load the iFrame in a cross-domain situation (like my case sharing something from smugmug.com onto chuqui.com; if I’d set up my smugmug site to display as photos. chuqui.com, Firefox would load it fine. That’s on my Todo list somewhere).
To set this up on Smugmug, log onto your account and select Organize Site. Select the front page of your site, and then use the Create Page option to create a new page.
Image may be NSFW.
Clik here to view.
Then select the page and click on Visit It to go to that page.
Image may be NSFW.
Clik here to view.
Then choose Customize This site, and you’ll go into the site editor attached to that page:
First thing you want to do is delete everything Smugmug puts on the page for you. With my design, it starts with just the breadcrumbs. Delete them so you end up with a blank page.
Then under Add Content Block in the Photo section you’ll find the Slideshow option. Drag and Drop it onto the page. Now select the gallery you want. You can configure this to however you want the display to look (this is why I have a Front Page Gallery).
Image may be NSFW.
Clik here to view.
When you’re done, you have a page that looks something like this (but with your photos):
Image may be NSFW.
Clik here to view.
A couple of notes: the admin menu at the top only shows up on your account when logged into smugmug. And the smugmug blurb at the bottom can’t be removed, and if that really bothers you, encourage Smugmug to make removal an option at one of their pricing levels. Me, I don’t mind it.
Now you can create the iframe to load that page onto your web site. It takes a bit of simple HTML and CSS geekery. Here’s what my site uses:
<div style="clear: both; width: 940px;"> <iframe src="http://chuqui.smugmug.com/Test" height="700" width="940"></iframe> </div>
You’ll need to tweak the width of the DIV to fit your design, and the height and width of the iframe to fit your slideshow. There are no specific ‘right’ numbers, it’s whatever seems to look right for you. You’ll want to do your testing with a second browser that isn’t logged in to your Smugmug account so that the top banner doesn’t display (remember, that only shows for you, and only if you’re logged onto Smugmug). I typically do my coding in Chrome and testing in Safari so I can see how the site looks to a non-logged-in user.
Using the Iframe the slideshow will show up fine on every browser except Firefox, and work on Firefox once the user approves loading the iframe (trapping this so you can display a note to the user is left an an experiment, if you care. that’s a small enough percentage of users that I don’t, and I assume most users running Firefox will figure this out quickly enough). It’ll look fine on an iPad and is usable on an iPhone and should be fine on equivalent Android tablets — not as pretty as a fully responsive mobile design, but IMHO it’s reasonable and doesn’t suck.
It’ll definitely solve this problem until Smugmug has time to get rid of Flash throughout their system, which I hope they do. Mobile access to this content is too important, and requiring Flash support to embed content is going to be increasingly a problem for them until this is fixed. But for now? This is a relatively safe and stable workaround that we can use.