Page 2 of 6 pages  <  1 2 3 4 >  Last »

Debra’s Dynamic Gallery

Go Take a Looksee

If you’re like me, when you read these things, it’s “stop talking! Let me see the final result!” Okay, okay.

See the gallery. Then come back here.

Overview

First, I’m doing this in Expression Engine (EE). I’m going to be using EE-centric terminology, plugins, tags, etc. in this article. If you use a different CMS, you can extrapolate. The concepts will be similar between all database-driven content managment tools.

Second, I’m using Todd Dominey’s fantastic SlideShowPro for Flash to display my member albums. Why? Because I dislike galleries that present a gabillion thumbnails. It’s click. See. Go back. Click. See. Over and over. I just want to enjoy. I like slideshows. And SlideShowPro is the best of them, I think. It’s a component for Flash. So you have to have Flash MX 2004 or higher to use it. If you don’t, you might want to check out Mono Slideshow, which doesn’t require Flash, but the XML file is a lot more intense. But then again, you might just get some ideas on how you can take advantage of Flickr and EE (or your preferred CMS) and do your own tinkering. I’m also providing a sample movie file (.swf) you can use to goof around with, so even if you don’t have Flash, you can still make this work.

We have to figure out which photos from Flickr we want to display. Each Flickr user has a unique ID number. Each Flickr Group has one, too. We’ll create a weblog to hold the information we collect from the user with their ID.

SlideShowPro uses a simple XML file that feeds it the list of photos and their captions. We’ll need to create this on the fly for each user ID in our weblog. There are basically two kinds of Flickr IDs. User IDs and Group IDs. Someone might enter their own personal ID. Or, they might want to display photos from a Flickr group they belong to. The IDs don’t really matter. It’s that the Flickr API returns information a little bit differently depending on individuals or groups.

Task List

In order to make this all work, there are several tasks to complete.

1. Create the slideshow in Flash. SlideShowPro has a user guide that takes you through the steps of creating the Flash movie for your slideshow, so I’m not going to go over that here. The one thing to note is that we only need to create the movie once. SlideShowPro can grab XML files dynamically. We need to set up our movie to do just that. Check SSP’s Customization User Guide for “Dynamically Assign an XML file.” No worries. It’s super simple!  If you don’t have Flash or SlideShowPro, here’s the swf that’s running on this site which you can use for testing purposes. Upload it to your public html folder.

Weblog snapshot 2. Create a weblog in EE. All you need are three items. The title, and 2 custom fields. One for the Flickr ID. I named it “flickrid”. One for designating the ID, either Group or User. I used a drop-down field for that one, and called it “grouptype”. In that field I made a drop-down list with two choices: user_id, and group_id. That’s what the eeFlickr plugin uses.

3. We’ll be creating three EE templates. I called mine:

“gallery” (displays thumbnails and entry form) Template type: Web Page
“gallery-flickr” (displays the actual slide show) - Template type: Web Page
“ssp_xml” (the XML file) - Template type: XML

4. Create a form in your “gallery” template for folks to submit their Flickr IDs and gallery titles. Easy enough with EE’s Stand Alone Entry form and the Form Helper Plugin so they can edit their existing entries.

5. David Rencher, aka Lumis, has created a really nice module for EE called eeFlickr. The module allows you to pull your photo stream, your photos and sets and more. You can sort by date, interestingness tags etc, basically allowing you to put your Flickr photos into your ExpressionEngine templates. eeFlickr will allow your site’s visitors to sort and browse your Flickr photos however you wish using ExpressionEngines extremely flexible template management system. It’s currently in beta as of this writing, but it works really well. Get it here.

6. Download SWFObject. SWFObject is a small Javascript file used for embedding Macromedia Flash content. The script can detect the Flash plug-in in all major web browsers (on Mac and PC) and is designed to make embedding Flash movies as easy as possible. If you just want the raw .js file, (which is all we need) rather than the full download, it’s here.  Upload the swoobject.js file to your public html directory.

Next:  Putting it all Together