UI and Theme Development Simplified in Gallery 3!

The next version of Gallery 3 is a complete rewrite from the ground up. It's coming along nicely thanks, in part, to jQuery and jQuery UI. Here's a bit of background on the project's decision to use jQuery and highlights of Gallery 3's theme system changes.

Why rewrite Gallery 2?

Despite Gallery 2's success, there are some big issues in the core product. These issues cannot easily be addressed within the current code base. So last October, the development team got together and decided to rewrite the product from the ground up. The primary goals of Gallery 3 are to make it easier for the Project's core developers to maintain the product while lowering the bar for users to build their own modules and themes.

Theming in Gallery 3

Gallery 2 themes each have a PHP class file which "hooked" the theme and it's settings into the Gallery 2 framework. To create a new theme you either have to create this class file from scratch or copy and edit another theme's class file. If you want to alter or extend a Gallery 2 theme template you also need to know Smarty PHP template syntax. These requirements are gone in Gallery 3. Just copy and rename an existing theme folder, enable it through the administration interface, and you're set to go. If you've worked with Wordpress, Drupal, or Joomla themes, Gallery 3's theme system will look very familiar.

jQuery and jQuery UI in Gallery 3

Gallery 2 currently ships with several YUI 2.x components which provide Ajax, dialogs, drag and drop, and autocomplete features. Integrating YUI widgets into Gallery 2's core has been relatively easy but there are few, if any, third-party modules or themes which implement additional YUI-based features.

After research and comparison of the YUI (2 and 3PR), Dojo, and jQuery the team decided that Gallery 3 would be built with jQuery. Of the three, jQuery took less time to learn and implement. While each framework has it's strengths, the following points summarize why jQuery was selected.

• jQuery's selectors make basic DOM manipulation and effect building quick and easy with minimal code.
• jQuery has proven itself easily accessible to a wide range of web developers and designers.
• jQuery is light and performs comparatively well.
• jQuery UI is providing a stable and growing selection of widgets and effects.

Gallery 3 is currently using the following jQuery plugins and jQuery UI components:

• jQuery UI 1.6rc6
  • Interactions: Draggable, Droppable, Resizable, Sortable
  • Widgets: Accordion, Dialog, Datepicker, Progressbar, Tabs
  • Effects: Highlight
  • CSS framework - buttons and bars
  • Redmond ThemeRoller theme
• Superfish - we expect to replace Superfish with jQuery UI Menu when it's released
• jQuery.LocalScroll
• jQuery.form
• jQuery.cookie
• jQuery.jeditable

Gallery 3's default theme also uses the YUI's Reset, Font, and Grid CSS collections for foundational type styles and page layout. The YUI CSS collection coupled with jQuery UI ThemeRoller themes should allow Gallery 3 users to easily alter page layout and widget appearance in their themes.

More to come

Take a look at the first Gallery 3.0 preview release. Documentation's thin right now, but it shouldn't be too difficult to create a copy of the default theme. Would love to get feedback on the default theme and the current state of our jQuery implementation.