Web Events: Creating Backdrops

Simple event process: overview, load files on pc, photo gallery, announce
Special event process: overview, load files on pc, trip web, itineraries, intro pics, panoramas, photo galleries, backdrops, videos
Optional extras: people photo galleries
Time Required: ~2 hours or ~30 minutes per backdrop

Introductory photos show up on the top event welcome page. If several exist, we typically run a slideshow to change them every few seconds. Intro photos are also found by slideshows for the top level family web page and for our personal pages. This section describes how to create and upload intro photos for our web sites.

Wallpaper or backdrop files are downloaded onto peoples desktops so they can see them while they work. To make them work well, we need to create files at the same resolution and aspect ratio as people's desktops. Here are some of the common ones:

Width x Height of the picture in pixels is the format we're using below. AR is Aspect Ration or Width divided by the height.
1600 x 1200 (AR: 1.3 or 4:3): Common for laptops and medium end CRT monitors.
1920 x 1200 (AR: 1.6 or 16:10): Common for good widescreen CRT and LCD monitors.
2560 x 1600 (AR: 1.6 or 16:10): High end widescreen LCD monitor (2005 Apple Cinema Display)

Select

Load Adobe Photoshop elements, select your event tag to limit the number of files you see.
Usually the best starred files are in landscape mode and we want a landscape aspect ratio, so select the Favorites tag (the sub tags are the star ratings) to reduce the number of files to just the best ones.
Typically pick the best few photos per day of the trip; Keep the number of backdrop photos to under 10 total per event.
Apply the backdrop tag to all the photos you like. This makes it easy to split the work over several nights.
Make sure each photo has a caption and a descriptive filename. Having a good filename makes it easier to update the web page later on.

Create

Follow these directions for each backdrop photo you wish to create.
Edit each picture; the crop, resize, save, and revert to the original file for each resolution listed above.
Save it in a special area, do NOT save over the original file!
In Photoshop elements:
- Right click on the picture in the Organizer and select "goto standard edit".
- If your camera takes pictures in aspect ratio 4:3 (both Rob and Kerstin's do at the moment), then you should create your 1600x1200 backdrop photo first.
- 1600x1200: Select image->resize->image size. Make sure "Constrain Proportions" and "Resample Image" are checked. Enter 1600 for the width. The height should go to 1200. If it doesn't you'll need to crop the photo first. Select ok. Save the file in a special spot, make sure you capture the resolution in the filename. (see below) Save as quality level 5 jpeg. Select edit->undo (or type control-Z) a few times to revert to your original picture.
- 2560x1600: Select the crop tool. For width, type 256 and for height type 160. Drag a crop selection across your photo and capture the best area. Press ok. Select image->resize->image size. Make sure "Constrain Proportions" and "Resample Image" are checked. Enter 2560 for the width. The height should go to 1600. If it doesn't you'll need to redo the crop again. Select ok. Save the file in a special spot, make sure you capture the resolution in the filename. (see below) Save as quality level 5 jpeg. There is no need to undo this time, as we'll want to make a smaller resolution file with the same aspect ratio.
- 1920x1200: Select image->resize->image size. Make sure "Constrain Proportions" and "Resample Image" are checked. Enter 1920 for the width. The height should go to 1200. If it doesn't you'll need to crop the photo first. Select ok. Save the file in a special spot, make sure you capture the resolution in the filename. (see below) Save as quality level 5 jpeg.
- Close the file, do NOT save over the original. Edit the next one.
Directory and filename suggestions: Save the image to a backdrop photo directory for your event. It's important to use the filename format shown below for a proper caption on the web site. Note the filename prefix tells the year, month, day, and time in a YYYY_MMDD_HH.MM format. It also specifies the file resolution 1600x1200. For example, Rob used these values for one of his trips:
- Folder: d:\robl\My Archive\Collections\web\2005\0327.tasmania_overland_hike\backdrops
- Filename: 2005_0327_14.07b. wombat in the wild; 1600x1200.jpg

Upload

First make sure your event has it's own web site. If not, create a simple one by copying from another event.
Upload all backdrops for this event's backdrops directory.
Update the large index page to point to each backdrop, create thumbnails, and rate the picture.
Use your web browser, go to the event site, make sure the backdrops listing looks ok. Try a couple to make sure.
Update the top level backdrops page and add links to your events and a copy of your backdrop table.
In FrontPage:
- Start Microsoft FrontPage. Select File->Open Site. Enter the web site, such as laddish.org or hikepics.laddish.net. For username and password, ask Rob or see the help on that web site.
- Open a my documents window on your local PC, navigate to the web collections folder for your trip. Select the details view, then right click on the header and add a column for camera model to see who took the picture. Place the camera model column next to the size column, and arrange the window side by side with the Front Page window.
- Left click/drag the backdrops folder into the web site, or create a backdrops sub-folder for your trip on the web site and drag and drop one file at a time.
- Update Large File: Open the large.shtml file for your trip inside FrontPage. Scroll down to the backdrops section, and if this is the first time you're adding backdrops, remove all rows from the table except for the top 2: the header row and the first data row. Right click and drag the 1600x1200 backdrop from the folder list into the File column of your table and select Create Thumbnail. Edit the date, rating, description and owner. For description, enter the name of the location followed by a ; if you visited many places in this trip or event. Leave the file size numbers and hyperlinks alone for now, we'll come back to them later. Copy and paste the row you just edited to create a new one below it. Delete the duplicate thumbnail, then repeat the process with each of your other backdrops until the table is full.
- Update size and owners: Refer back to the local windows explorer window, and update the entries for each backdrop, and fix the size and owner columns.
- Update size links: Go back to the top of your backdrops table, select the first size link and type Control-K, or right click and select edit hyperlink. Navigate to your backdrops directory for this event, then select the correct file and resolution. Sometimes the resolutions are hard to see, but you can guess as they're in alphabetical order. Fill out the rest of the size links for this backdrop, then continue with the next photo.
- Save Large File: When you save the file, it will raise a "Save Embedded Files" window asking you where to save the thumbnails you just created. If the you just created a backdrop and the folder is set to /events/.../backdrops/thumbs, press ok. If not, press the change folder button, and navigate back to your event web folder, then into the backdrops sub-folder, and create and name a new folder called thumbs if it does not exist. Press ok for the folder selection window, then ok for the save embedded files window, and your thumbnails will be saved to the backdrops/thumbs subfolder.
- Validate: Open a web browser, go to your event web site, and look at the large file. Does the backdrops table look ok? When you click on the backdrops files, do they to the correct file? The most common mistake is to miss or set one of the size hyperlinks to the wrong photo or resolution. Run your cursor up and down each size column and look at the status window. Make sure it references the correct resolutions for each photo. If not, go back and fix things now.
- Update site-wide Backdrops Collections page: Go back to the Folder list, scroll to the bottom and open up the backdrops.shtml collection file. Copy and paste your backdrops table from the large.shtml file into the backdrops.shtml file. Place it into a special section for your trip, and update the hyperlinks to find this section from the top of the file, and to point to your trip html files from the new section. It's usually easiest to copy and past another event section from that file, then edit it as needed. Note that the newly pasted table will point to the backdrops and thumbnails back in your event web site. Pretty cool! We place a copy of your files in this global collection file to allow people to see all backdrops at once.
- Save and Validate: Save the site-wide backdrops collections page, and navigate to it with your web browser. Make sure all the links work ok, and try opening a file or two.

Future Ideas

Owner in Filename: When resizing the images, you'll see the native resolution. We can safely guess that if either the original width or height is < 2000 pixels, it was probably taken with Kerstins 5MP camera. Add "KML;" to the filename just before the resolution. This will call out owners other than Rob.
Ratings in Filename: We may want to save the 1-5 star backdrop rating that we use in our table in the filename. If we later write a program to cycle through all filenames, and if the owner and ratings are in the filename, we can use it as options in the program.
Aspect Ratio: We may want to simplify things, and save pictures at the highest resolution possible in the most common aspect ratios. We can note the common resolutions for those aspect ratios in the columns. Most "set as desktop" programs will resize the image, though we may want to create our own resize program and hook it into the download columns hyperlink. This will save some effort in making the columns, and let our highest res images work when we get higher res displays in the future.