Creating an Image Gallery
 |
The web is an incredible tool for disseminating and sharing photos, but creating an attractive image gallery for your web site can take a little thought. Fortunately, with current tools, you can whip out attrractive web galleries in no time at all. This feature will show you how we do it here at completedigitalphotography.com |
I’ve been getting a lot of mail lately asking me how the galleries on this site are constructed.Though there are plenty of free photo sharing sites out there, if you want to present your images in a particular way, or integrate them with an existing web site, there’s really no subsitute for doing it yourself. In this article, I’m going to walk through the procedure I’ve developed for creating the image galleries that are available in the Galleries section.
This site was built using WordPress, an open source blogging platform that is free to use and offers easy installation and customization, without sacrificing features. I’ve been very pleased with WordPress, and have found it very flexible. When it came time to design the Gallery section of the site, I was hoping to find a WordPress plug-in that would allow me to create dynamic galleries. My ideal solution was a plug-in that would build a gallery on-the-fly from a directory of images on the server. Unfortunately, though there are some plug-ins like this available for WordPress, none offer much in the way of customization, and I didn’t like the look of the resulting galleries.
My ultimate solution was to forget about dynamic galleries, and commit to static galleries created with the help of iView MediaPro. With the design completed, I can now crank out a gallery with dozens of images in only a few minutes. I’ve found this to be an ideal solution, both because of the design freedom that working with MediaPro allows, and because the final workflow is so speedy and simple. What’s more, this approach will work whether you’re using a database-driven site, or a collection of static pages.
To follow along with this tutorial, you’ll need a copy of MediaPro 2.5 or later. MediaPro is available for both Mac and Windows, and a free, time-bombed demo is available here. (MediaPro is my media cataloger/organizer of choice, and you can read my full product review here.) Obviously, you’ll also need to have a web site of some kind, and understand some basic HTML, as well as how to upload material to your web server.If you’re using blogging software, then all of the techniques presented here should still work fine.
iView, uView, we_allView
iView MediaPro is, first and foremost, an image cataloger. It allows you to create catalogs from directories or volumes, whether stored locally or off-line. Once you’ve built and organized a catalog, you can search it, view it as a "light table" of thumbnails, watch the original images as a slide show, print images, and much more. Beginning with version 2.5, iView added extremely robust HTML export. You can now export a catalog as an HTML gallery, a collection of static HTML pages that includes an index of thumbnail images, and single pages – one for each image – of your full-size image (or whatever size you want the image to be). As one would expect, MediaPro automatically builds all necessary navigation, and automatically re-sizes and compresses all necessary images, no matter what their original format.
There are many programs that offer this type of exporting, including Adobe Photoshop. The advantage of MediaPro is the flexibility it provides for customizing the HTML template that is used for outputting.While Photoshop allows you to create similar exports, it does not allow you to change the base design of the resulting files.
MediaPro’s HTML customization is very simple. HTML template files are stored in a special folder within your MediaPro configuration. When you choose Make>HTML Gallery within iView, it presents you with a simple dialog that allows you select which template you want to use.
Here, you can see the seven default templates that are provided with the software (Aqua, Basic, Drawing Board, etc.) plus the two custom templates that I defined for this site. After selecting the appropriate template, hitting the Make button will tell MediaPro to output all of the currently selected images using the HTML format you chose.
MediaPro HTML templates are stored as regular HTML files in a specific location. On Mac OS 9, they’re located in:
System Folder/Application Support/iView/Plug-ins/HTML Templates
In Mac OS X, they’re stored in:
~User/Library/Application Support/iView/Plug-ins/HTML Templates
/Library/Application Support/iView/Plug-ins/HTML Templates
Network/Library/Application Support/iView/Plug-ins/HTML Templates
Windows users, I’m sorry but I don’t have access to a Windows machine, so I don’t know where the template are installed. However, the standard MediaPro installation includes an Examples HTML folder within the Documentation folder. In it, you’ll find a document called About_Templates.html, which documents the full facility, including the location of the templates folder.
Making an initial design
Building a MediaPro-based gallery mechanism begins with an initial HTML design. From the outset, I knew that I wanted a design with a neutral background, and that was evocative of a gallery-type print.I began by choosing a target image size. To speed downloads and accomodate smaller monitors, I decided on a max image size of 640 x 480. I also knew that I wanted the galleries to open in a separate, plain window without scroll bars or a toolbar. I decided on a gallery window size of 800 x 600. (This assumes that the average user has at least a 1,024 x 768 display. This might not be an entirely reasonable assumption, but I figured that most of the people who are coming to a digital photography site probably have beefy gear.) Finally, because I also knew I wanted more sophisticated typographic control than what basic HTML offers, I knew that I would be using an external style sheet for formatting the text on the page.
I started my design by creating an HTML document with an external style sheet.Because I want the entire layout to fit inside an 800 x 600 area, I created a div style called #wrapper.
| #wrapper{ | |
| position: absolute; left: 0px; top: 0px; width: 800; height: 600; z-index:1; background-color: #999999; |
|
| } | |
This defines a container which is exactly the size of the gallery window. It also defines a neutral gray background color.
With the style defined, it’s a simple matter of creating the appropriate <div> tags within the HTML template:
<div id="wrapper">
</div>
Everything else in the site is placed between these two tags.
The rest of the design is very simple. I created a text style for the gallery title, as well as styles for the picture title and specifications. These styles are nothing fancy, just straight CSS text manipulations.
The photo, title, and specs are all held within a single-cell, 640 x 480 table, so that the whole mess can be centered within the 800 x 600 div.To create the styles, I placed a picture in the table, created dummy text, and experimented with the styles until I had the design the way that I wanted it. Finally, a style was created for the "prev" and "next" navigation buttons.
With the styles finalized, the design is essentially complete.
Adding MediaPro tags
MediaPro 2.5 and later include special tags that you can embed in your HTML template. When you use the Make>HTML Gallery command, MediaPro reads your HTML template and substitutes each tag with the appropriate info from your image. The tags are well-documented in the About_Templates.html document mentioned earlier.
To use them, simply place the appropriate tag where you would normally place, say, the title for the image.The code for the content of the single-cell table in my gallery appears as follows:
| <td align="center" valign="middle"> | |
| <p>(iView:Media) <br></p> <div class="pictureTitle">(iView:Caption)</div> <div class="pictureSpecs">(iView:Model) • Lens: (iView:FocalLength) • (iView:Aperture) |
|
| </td> | |
The (iView:Media) tag is replaced with the current image that iView is processing. (iView:Caption) is replaced with the Caption information from the image. I chose to use Caption rather than Filename, as my filenames don’t always make for reasonable titles. Finally, the specs (Model, FocalLength, etc.) are replaced with the relevant EXIF data.
With these tags in place, our template is finished, and ready to be saved into the appropriate location.In the HTML Templates folder, create a new folder and give it an appropriate name. Save your document into that folder as media.html.When it builds a gallery, MediaPro also creates an index page that contains thumbnails of all of the images in the gallery. For my purposes, I wasn’t interested in having an index page, but MediaPro still needs to have an Index template to work from. Duplicate one of the supplied Index files and copy it into the same folder as your custom media.html doc.
Building a gallery
Building the actual gallery is now very easy. Import your gallery images into a MediaPro catalog, arrange them in the order that you want them to appear in the finally gallery, and then choose Make>HTML Gallery.
In the HTML Options dialog that appears, select your template from the Theme menu, and make sure the Media pop-up is set to Scale to Fit. Enter your maximum image size in the corresponding fields. In this case, 640 x 480.When exporting, MediaPro will resize your images so that they do not extend beyond the bounds of the 640 x 480 layout that you created. Hit the Make button and MediaPro will build your HTML pages.
The program will automatically create a new folder with all relevant HTML files, thumbnail images, and resized image files.As mentioned earlier, it also creates an an index screen of thumbnails. Using the default index template, you’ll end up with something like this. If you want an index for your design, simply create a template using the relevant tags, just as you did for the media.html file.
Integrating your gallery into your site
Upload your gallery to your web server, into whatever location you deem appropriate."Appropriate" may vary depending on the needs of your existing site. WordPress is a database-driven system, but the location of these types of static pages are irrelevant, so I just created a Galleries folder, and now stick all of my Gallery sub-folders in there.
Obviously, the way you want this to work is that, when the user clicks on the appropriate link, a new 800 x 600 window will open and load the first gallery page. It’s easy enough to cause a link to open in a new window by adding target="_blank" to your link tag. However, this mechanism gives you no control over the size of the new window, and it doesn’t allow you to deactivate window controls such as toolbars and scrollbars.To create this kind of window, we have to use a little Javascript.
Stick the following routine in the header of any page on which you want to include a link to a gallery. If you’re running from a database-driven site, or blogging system, then you’ll need to stick the routine on whatever page the system uses as the source for its dynamically built pages. (For my WordPress-based site, I stuck the routine in my main index.php document.)
| <script language="JavaScript"> | ||
|
<!– Hide from old browsers |
||
| { //This launches a new window and then //focuses it if window.focus() is supported. winname = ‘SQLLIMS’; newwin = window.open(winurl,winname,winfeatures); |
||
| // End hide. –> | ||
| </script> | ||
If you created your gallery for a window of a different size, then you’ll need to change the height and width parameters accordingly.Similarly, you can also choose to turn on scrollbars, or any other window niceties that you prefer. If you have galleries of different sizes, then you might want to re-tool the routine to accept parameters so that you can create different-sized windows by passing size info from your function call.
Now you need to identify which file is the first gallery image that you want to see. Take a look at the index file that MediaPro created and note the name of the HTML file of the first image in the sequence. This is the beginning of your gallery.
To create a link to your new gallery (and this can be created on a normal, static page, or from within a blog entry) use the following definition:
<a href="#"onClick="launchwin(‘http://path_to_your_1st_gallery_page’)">Gallery Link Name, or whatever</a>
This performs a call to the Javascript launchwin function that you included in your document header, and loads the new window with the page from the path you specified.
That’s it! Because MediaPro hardwired all of the navigation, the user is now into your gallery system and can navigate back and forth.
With your system set up, your workflow is now very simple:
- Load and organize photos in MediaPro
- Export HTML Gallery using your template
- Upload files to relevant server location
- Insert the link on your page. Point it to your new document.
MediaPro provides far more tags than the few that I’ve shown here. As you can see, design, setup, and configuration of this scheme is very simple, and makes for a final workflow that is extremely streamlined.
Comments
5 Comments on Creating an Image Gallery
-
Mark on
Tue, 26th Oct 2004 4:19 pm
-
Ben Long on
Wed, 27th Oct 2004 12:42 am
-
Customizing Aperture’s Web Templates at ProfeC.net on
Wed, 5th Jul 2006 9:00 pm
-
Portraits from photos on
Sun, 20th Aug 2006 10:33 pm
-
Lawyers Toms Creek on
Sun, 22nd Nov 2009 2:41 am
Very nicely done, but you should have taken a look at pictorialis II (http://pictorialis.wltc.net) It does most of the things you talk about, though it really is not a plugin solution but more of a photogallery.
Wow, Mark, thanks for the tip. I wish I’d known about this before! It looks like a very cool solution, I’ll take a look at it. One thing the iView-based approach does get me is that I can reuse my gallery design in other, non-database-driven web sites. Mostly personal photogallery stuff.
[...] As detailed here, I build the web galleries on this site using iView MediaPro and a custom HTML Export template of my own design. I tried to replicate that template within Aperture, but ran into several problems. First, the lack of multiple metadata fields makes it impossible to display the image title above the image, and a caption, or shooting specs below. [...]
I’ve been using Pictorialis too. It is a great program, although i like your plugin solution.
I’ll give it a shot and let you know how it goes.
You are truly great. very important post I already bookmark this page. It will help me alot. Now I can make picture gallary. Really great work. Thankssssss
Tell me what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!
-
Follow Me
Nothing Else to Buy!
Fifth Edition
Order Now!Complete Digital Photography
by Ben Long.Everything you want and need to know about digital photo-
graphy - from buying a camera, to editing your images, to making your final prints. Completely reorgan-
ized and loaded with more content than any previous edition!
More To Read
Real World
Capture NX2
Order Now!
by Ben Long.
Learn the ins and outs of Nikon's exceptional image editing application. Capture NX 2 provides revolutionary selective editing tools, and a fully non-destructive image editing environment that can be used on any TIFF, JPEG file or Nikon raw file.