Seamless Vimeo movies in your Smugmug site

Although Smugmug supports video better than any other photo site, the player experience while good, still lags a bit behind Vimeo. Also, I don’t like how one must click through the gallery view to the Lightbox view to watch a video. In my case this is an extra step because my videos are normally the only thing in a gallery, one-per.  So I’d like to skip the gallery view put the video front and center, ready to click play.

Before I go further, note that although I’m using Vimeo, this approach works for embedding Smugmug or YouTube videos, or any other custom content.

My goals are:

  1. Vimeo videos are single-page events with ready-to-play videos
  2. Video events are listed inline and chronologically among my other events.

The “New” Smugmug now has a nice Page feature that let’s you build a page from scratch with any of their custom widgets, one of which is even a Vimeo embed. This would solve the player problem, however the remaining problem is that in any of Smugmug’s list views, pages are kept separate from galleries. There is no way to have a custom page intermingled with your galleries.

This is a blocker because for #2 I want a seamless chronological presentation of events, and for that Smugmug would have to treat my Vimeo video pages as first class citizens in the gallery listing widgets, without having to micro-manage things too badly.

As an aside, chronology is something that SmugMug has never made easy (there’s still no support for event dates after all these years). But that’s another story, and although today I still need to manually sort my galleries by date, the new Smugmug makes this easier to manage than it was previously.

So here’s my solution. It’s pretty simple: Create a gallery, and customize it to hide the gallery images and instead embed your video.

Here’s the step-by-step:

1. Create a gallery and give it a title, description, and anything else. Go ahead and upload an image to use as the thumbnail for the gallery.

2. Turn off slideshow in the gallery settings to hide the slideshow link.

3. Customize the gallery’s page to add the Vimeo widget (or whatever custom content you want). Important: Be sure you selectJust this Gallery so that you’re not changing all gallery pages.

4. Add a CSS widget to hide the gallery content. We need this because you can’t delete the gallery widget from a gallery page. The CSS is a one-liner. To add it, add a CSS widget anywhere on the page, and edit it thusly:

.sm-gallery-images { display: none; }

Note that step 4 is required to be done for each gallery page you do this with. Unfortunately with the new Smugmug there are no longer category or keyword CSS classes added to the body tag. If they fix this, you could define the CSS only once, and then just use a keyword like “hideme” on each gallery you want to affect.

5. Save and test. The gallery should show just your custom video or content, and the actual gallery is hidden. But because it’s a real gallery, it shows up in listings right where you place it in the gallery order, for a seamless view.

Here are a few screenshots of how this looks on my site:

 

Share this page: Email this to someoneTweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInPin on PinterestShare on Reddit

I love your comments. Don't be shy, reply!

There are 13 replies to “Seamless Vimeo movies in your Smugmug site

  1. Alexa

    Thank you so much for this tip! I have many, many videos on Vimeo but have always been bummed that they weren’t integrated with my photos – having to give out multiple URLs was a bummer! I just moved to Smugmug from Phanfare, so this is awesome! THANKS!

    Reply
      1. Alexa

        Actually, I have a follow-up question. Is there a way to replicate that gallery with its custom settings and then just change out the Vimeo link and the one photo for the gallery thumbnail? That way, I don’t have to go through the steps to create 82 (gulp – yes 82) custom galleries? Thx!

        Reply
        1. sebastian Post author

          I looked into this at the time I wrote this post and there wasn’t a way of copying a gallery that would help this process. I’m pretty sure I even posted on the DGrin forum about it too.

          Reply
      2. Alexa

        And, one more follow up b/c you are a Smugmug/Vimeo person. If I have the actual video files for the videos that are also on Vimeo, would you upload those directly to Smugmug (where I believe they’d be backed up along with my photos?) or would you just link to the Vimeo page? Just curious. Thx!

        Reply
        1. sebastian Post author

          Yes! This is a great technique. In addition to uploading the preview image to the gallery, I have been uploading the original video there too just for archival purposes. This keeps things nice and neat. Of course Vimeo has it too, and that’s where it’s downloadable by my viewers, but having it on smug servers as well is great peace of mind.

          Reply
  2. Alexa

    Thank you so much for your responses, I appreciate it! Hopefully Smugmug will work on the ability to “duplicate” a gallery soon. I know that there is a “quick setting” option, but that doesn’t mean it replicates a page itself. Thanks again for the tips!

    Reply
    1. sebastian Post author

      Hi Mark, are you a “Vimeo Plus” subscriber? Vimeo limits HD embedding to Plus accounts. Then, under your Vimeo account settings, there’s a checkbox for “Always play my videos in HD, when possible”. That should get it going.

      Reply
      1. Mark Coons

        Not yet. I wondered if that was what the problem was.

        I’ve been considering upgrading and I really like the way this looks so I’ll have to give this some thought.

        Thanks for the information and the idea Sebastian!

        Reply
        1. sebastian Post author

          Your Smugmug site looks great. Nice work. Remember to put a photo in the video’s “gallery” so that you get a preview image on your main listing page.
          Cheers!

          Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

The "are you a human" quiz *