Photoframe

The purpose of Photoframe is to provide a general API for image-based content wrapping such as rounded corners and drop shadows. The API allows extensible styles, is easy to use, and avoids unnecessary markup.

Photoframe uses jQuery to wrap image-based 'frames' around content after the page has been loaded and is invoked by adding a single CSS style to any element.

Features

• No javascript coding needed. Just add a single class to any element to wrap the frame around it.
• Frames load after the page has been loaded, so no extra markup is needed (good for SEO and accessibility)
• Lots of current Drupal Photoframes are already available for free use, including drop shadows, several versions of rounded corners and picture frames.
• Lightweight. Just a single jQuery function (of about 10 lines), and a small CSS file for each frame loaded.
• Simple administration. On the admin page, you can preview each of the frames and select which ones to load.
• Flexible. Since the frames are image-based, they can be used in a number of different ways.
• Simple documentation is provided.

Background

I've been designing web sites for several years, and have tried a lot of different ways to wrap containers around content, including the sliding doors and onion-skinning methods described in A List Apart. These are great, in that they are fluid, require minimal markup and don't require tables. They do have a couple downsides, though, which are 1) Since they don't use repeating backgrounds, for extended content the background will eventually run out and it will break the container effect, and 2) Creating the background images are a challenge. The solution I've found that works best is to use a table with repeating backgrounds around content. The major downside is the extra table markup required (a CSS no-no). jQuery provides a nice solution, though, which lets you add markup after the page has loaded, so search engines and javascript-disabled browsers don't see it. Nice! So Photoframes is the culmination of many years of searching after the holy grail of content containers. I don't think this is it, but it's a good start.

Other modules that do similar things

Drop Shadows - This module is the closest in functionality, but works a bit differently. From the experimentation I did, it looks like it uses a system similar to sliding-doors to create the container effect. The API (once it is more fully developed) looks like it will be a bit different than the Photoframe API, since the Photoframe API will allow frame developers to use their own css styles to create a very customized frame, whereas Drop Shadoes restricts the CSS. This makes for simpler frame development, but less flexibility. It seems like these Photoframe and Drop Shadows, while similar, can co-exist becuase they approach the problem differently, and both will have benefits because of the way they are developed.

Curvy Corners - The Curvy Corners module is a wrapper for an existing javascript-based rounded corners solution. It differs from Photoframe because it is used only for creating rounded corners.

NiftyCube - This module is a wrapper for the Nifty Corners Cube javascript, which adds nice javascript rounded corners to divs using CSS. This method is right for certain applications of rounded corners, which Photoframe complements, rather than re-creates.

Rounded Corners - This module is a wrapper for JQ Corner, which provides similar functionality to NiftyCube with a few additional styles. Photoframe complements this one as well, for the same reasons.