DepGal, a Pretty, Free, and Fast Flash Photo Gallery

DepGal is the result of my efforts to build an online photo gallery for myself. I decided that there’s many great photographers out there who deserve a better presentation for their photos than the standard Flickr page or a tacky Flash gallery. So, DepGal is my small contribution. I wanted something that was fast and minimalist and easy to update. It does require you to have your own hosting space. Otherwise, maintaining it is as easy as uploading your photos and adding lines to an xml file.

Download zip file here, with swf, sample images (from Flickr CC-licensed), and xml (40 MB).

Or just the swf, xml, and html, here.
(See the following embedded gallery on its own page)
(Fixed and re-uploaded on Jan. 18, 2010) Egh. I knew there was one issue I had to pound out before releasing: the borders are slightly misaligned by a pixel or two. I’ll update with a fix this weekend

DepGal features:

• Easy updating: Runs from an XML file. To add a photo, add a line pointing to its address.
• Clean aesthetic: Simple transitions, emphasis is removing as many distractions as possible from the actual photos
• Flexibility: You can customize the colors, borders, text, and image sizes to your heart’s content. Or just leave it in the default minimalist mode.
• Free: My intent is to open source this, once I feel like I have a clear path and have removed all the discardable code.

Here’s an example of the customization you can do by editing the xml file: this is my attempt at a Flickr theme, using CC-photos from the community. As opposed to the gallery shown above, which consists of my photos with nearly all the same non-cropped aspect ratio, I think this gallery really shines with the variety (see this gallery on its own page):

Screen cap of a Flickr customized album. Click to see it in operation

DepGal’s pitfalls: It’s not a solution for everyone. On an aesthetic level, I have no plans to add anything fancier than the fades and motion tweens, or features like video and music Perhaps the most notable drawback is the inability to layout images exactly where you want them to be in the thumbnail view. The gallery was meant to be easy to use and update, so the gallery automatically places the thumbnails (and crops and resizes as necessary) where there’s an open space, not necessarily in order. The layout can vary depending on the user’s screen size.

For future development

• Flickr integration and WordPress plugin
• Ability to customize fonts
• Photos separated by albums

How to use

File structure

DepGal consists of these things:

1. Two versions of each image: a full-size and a thumbnail. They must have the same name (so obviously, create one directory for thumbnails and images)
2. An xml file that specifies the look of the gallery and where the images are located
3. The .swf file, which you include as you would any typical Flash file. To specify the path of the xml, use the parameter: ?xml=whateveryourxmlfile path is
4. The html file that has the code to embed that swf file

At the bare minimum, the xml file contains tags that point to the image locations. Here is the basic structure:

<root>
	<albums>
		<album dir_full="fimages/original/" dir_tn="fimages/thumbs/">
			<images>
				<image src="2384804297_c49864b4cf_b.jpg"  caption="Worldwide Delivery Service (from Japan) by *yasuhiro" link="http://www.flickr.com/photos/mostudio/2384804297/"></image>
				<image src="2616211855_6ce07f1f25_b.jpg"  caption="Kinkaku-ji in Kyoto, Japan by syvwlch  " link="http://www.flickr.com/photos/27164521@N00/2616211855/"></image>
	</images>
		</album>
	</albums>
</root>

Right now there’s only one album (support for multiple albums will be added later). dir_full and dir_tn point to the full-size images and thumbnails directories, and each image tag points to the image filename.

Sizing

DepGal is meant to require as little configuration as possible. It will take whatever the size of your thumbnails are and resize and crop them for display…since every user’s display is a different size, the thumbnail arrangement will vary. Here’s how sizing and placement is done, if you really want to know the nitty-gritty:

1. Using the thumbnail_width and thumbnail_margin_x parameters, the gallery calculates a grid of columns. So, a thumbnail_width of a 100 pixels with a margin_x of 10 pixels would allow for a grid of 10 columns if the stage is 1200 pixels wide, with the remainder space being the margins on the left and right of the grid. Then, using the aspect_ratio and thumbnail_margin_y parameters, the number of rows (i.e. derived from the height of each grid space) is calculated. An aspect ratio of 75, then, would allow for
2. When the gallery loads, it reads through the xml image list sequentially, placing images from left to right, top to bottom. Using the examples above, if all your thumbnails were 100×75, you should get a uniform grid. However, you’re likely to have wanted some images to be more prominent. A thumbnail that is 210×160 should occupy a 2×2 space (two grid spaces, plus the margin in between those spots). What happens when the thumbnail dimensions aren’t neat multiples? If one of the thumbnails is 120×110, then the thumbnail is cropped and centered to fit a 1×1 spot. Same with a 201×159…though you can tinker with the thumbnail_sizing_pixel_tolerance parameter so that the gallery upscales the thumbnail when it barely falls short. In general, it’s better just to have your thumbnails generously sized, rather than precisely resizing them.
3. There may be a case when an image that is listed earlier will be placed after images that were lower in the xml list. This will happen if, in a single row, 9 out of 10 spots are filled. If the 10th image needs a 2×1 spot, then it gets pumped into the next row. The next 1×1 thumbnail will take that 10th spot in the previous row.
4. Borders don’t affect how many thumbnail column/rows there are, but they do affect the size of the thumbnail display. After the thumbnail is placed, the border is placed around it. The thumbnail is then resized, centered and cropped…so if you have an especially thick border, the image will be downsized a bit so that more of it is seen. The border+thumbnail occupies the same grid position and space as it would if there were no border.

Parameters

These are all optional. To reduce the xml file size, remove all the parameters (the default and note params) and any fields from which you aren’t deviating from the default. Here’s an xml file with all the notes and defaults listed (see gallery). Here’s an xml file (and resulting gallery) with nothing but the image listing. You also have control over the button labeling, which should be self explanatory in the xml file.
background_color: Background color (Default: 0x000000)
thumbnail_width: What the smallest thumbnail width will be. Anything bigger by a mutliple will occupy more space on the grid and cropped where necessary. Anything smaller will be scaled to fit. (Default: 150)
full_screen_thumbnail_width: When fullscreen mode is activated, this will be the new width (Default: 150)
aspect_ratio: This multiplied by the thumbnail_width is what the minimum thumbnail height will be. If a majority of your images have a certain ratio, this is where you'll want to specify it (Default: 0.75)
is_show_image_border: show a border around images, both fullsize and thumbnails? (Default: false)
image_border_color: border color for the images (Default: 0)
image_border_size: border size for the images (Default: 1)
arrow_color: The color for the arrow-icons that prev/next/up mouse contexts (Default: 0xffffff)
is_show_thumbnail_border: Show a border around thumbnails? (Default: false)
thumbnail_border_color: Border color for the thumbnails (Default: 0)
thumbnail_border_size: Border size for the thumbnails (Default: 1)
thumbnail_highlight_border_size: Border size for highlight (Default: 2)
thumbnail_highlight_color: The color of the highlight (Default: 0xff9494)
bar_border_color: The color of the 1px border around the nav and top bars (Default: 0x000000)
navbar_height: Height of the bottom navbar (Default: 30)
navbar_color: Color of the bottom navbar (Default: 0x000000)
topbar_color: Color of the top bar, where the caption is (Default: 0x222222)
topbar_height: Height of the topbar, where the caption is (Default: 30)
thumbnail_margin_x: The spacing between the thumbnails along the x-axis (Default: 8)
thumbnail_margin_y: The spacing between the thumbnails along the y-axis (Default: 8)
tween_val: The higher this integer, the more pronounced the tweening effects between page shifts (Default: 3)
caption_font_color: Default font color for captions (Default: 0xffffff)
nav_font_color: Color of the menu buttons' font (Default: 0xffffff)
nav_roll_font_color: Color of the menu buttons' font on rollover (Default: 0xfafdb2)
about_font_color: Color of the about screen's font (Default: 0xffffff)
show_link_button: Show a button to permalink for this image. The destination is the url parameter; if this is not set, then the destination will be the actual filepath to the fullimage (Default: true) is_thumbnail_width_flexible: If this is set to true, the gallery will consider shrinking the thumbnail_width value to fit another thumbnail in on a row, rather than have significant empty space along the x-axis (Default: true)
"thumbnail_width_flexibility" If is_thumbnail_width_flexible is 'true', this is the threshold of thumbnail_width space that will cause the gallery to fit an extra thumbnail in. default="0.6"
thumbnail_sizing_pixel_tolerance If a thumbnail's width or height is just X pixels short of occupying another space on the grid, rather than it being cut down an entire space, it will be upscaled to fit the extra space default="10"

Download zip file here, with swf, sample images (from Flickr CC-licensed), and xml (40 MB).

Or just the swf, xml, and html, here.

I intend to keep this gallery free, and at some point, open-source. If you want some custom work done for you, feel free to email me. If you want to donate, consider donating to a Haiti relief fund (Lifehacker’s guide).

Disclaimer

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Contact dan@danwin.com if you have questions.

Special Thanks

In the sample gallery are Creative-Commons licensed photos from the following Flickr users:
Worldwide Delivery Service (from Japan) by *yasuhiro
Kinkaku-ji in Kyoto, Japan by syvwlch
2/52 – It’s Raining Men! by ξωαŋ ThΦt
The Great Wall of China
Pulse: The feeling of what happens by DerrickT
Portrait of a wild lizard by Tambako the Jaguar
Two equestrian riders, girls on horseback, in low tide reflections on serene Morro Strand State Beach by mikebaird
Cranes In The Sky. by Jakob Montrasio
Chinese White Goose by (Bill and Mavis) – B&M Photography
Epidemia de Pánico / Panic Epidemy by Eneas
Eid Mubarak by Hamed Saber
Maid In Japan by ThisParticularGreg
Male Pallas’s cat closeup by Tambako the Jaguar
by *Zephyrance – don’t wake me up.
he thinks he is a zebra. by a tai.
Copa by laszlo-photo
SAF#2 by Roby Ferrari
Freedom by _ambrown
Innocence by fofurasfelinas
by NMCIL ortiz domney
by Mitra Mirshahidi-
Photography is not a crime by photographer padawan *(xava du)
get the flock outta here by hedonaut
Conductor by Thomas Hawk
Day Seventy-Eight: Thunder on Sunday by Anna Gay
OMG MACRO! [p52 w1] by Don Solo
Now that’s what a hamburger’s all about! by jakerome
♥ is in the water by AHMED…
Mountain view with sheep by Jule_Berlin
The Inner Workings Of A Groom’s Mind by Ioannis P. Skaltsas
~ Face to Face ~ by ViaMoi
Lonely tree by Jule_Berlin
Extremely Loud and Incredibly Close by matt.hintsa
tokyo subway by Gustty
Shinjuku by bass_nroll
a big catch! by bass_nroll
Sculpture Symposium (Russia) by tamaki
Russia yonder by dvd3141
072406-104353-Baikal Lake-Russia.JPG by PnP!
Sculpture Symposium (Russia) by tamaki
Iris Farm by farlane
by Wha’ppen
Wattle Point wind farm by penagate
South American Rheas – Wigfield Farm by Paul Denton Cocker
Farm House Ruins by sufw
Asian Bowl by Joe Pitz
Portrait of an asian woman by Frederic Poirot
888 by Denis Collette…!!!
Untitled from K_iwi
summer palace by Fred Kranich
Resting Student – Tiananmen Square, Beijing by cromacom
The Fairy Lady by VelvetMomoKo