MBU Curator's Gallery

The mbudm#002 Curator's Gallery template is aimed at photographers, designers, architects, artists and product managers - anyone who cares a lot about how the visual presentation of their work. To this end the design is minimal, and highly customisable. The layout possibilities are endless and the site structure can handle a lot of material as well as a small portfolio of items. The features of the mbudm#002 template are designed to make things easy. Easier for you to customise the template to suit the needs of you and your client as well as easier for the users of your site to navigate, use and enjoy the visuals you are presenting.

Four modules

The mbudm#002 template lets you choose pages/site sections from four module types designed to help you customise the template to your liking. Of course a navigation item can also link to an external URL.

1. Text module

An example of the ‘text module’ is shown on this home page. This module type is for pages that are predominantly text. It has one textField with support for inline images and html/css and it includes my utility, ‘Automatic Table of Contents’ which can be switched on and positioned to your liking.

A handy feature of the text module is the table of Contents list. This text block is set to have the table of contents turned on. It is also set to search for all headings that are marked up with h2 tags. You can buy the ‘Automatic Table of Contents’ utility separately from Flashden by following this external link: Buy the Table of Contents utility. External links are easy to create - just standard html..

2. Index module

The Index module is the key to the flexibility of the mbudm#002 template. The index module provides limitless layout possibilities via the unique 'grid system'. To use the grid system, you simply follow this easy process.

• Decide which of the items in the folder you want to feature
• Decide what text you want to add to the index page (if any)
• Decide on the size of the grid - for example 5 boxes wide by 3 boxes high.
• For each of your featured items and your text, create a <thumbnail> for each item. This lets you set the size and position of your item as well as the custom text or image you want to use
• That's it, now the index module will fill in any parts of your grid not occupied by your <thumbnail> items with all the other items in your folder. If you have more items than there is space availabel, then then extra pages are created and page navigation appears.

As you browse through the mbudm#002 template you will see that I have created a different layout for almost all of the Index pages. Of course, if you want to have a plain index page, with no customisation, this is also possible as is shown with the Indexes in the Archive section.

3. Media module

The media module 'clears the decks' - the site logo becomes smaller, the navigation and footer are hidden and the navigation tools for the folder are shown. This is all done because the focus of the template is to let the visuals become the main focus of attention. Whether you are displaying photographs, paintings, product images or videos the media page ensures that only the necessary navigation and information items share the available space.

4. External swf module

This module loads a separate swf of your choice. It can be configured to receive onResize() broadcasts plus it can also be set up to call another function at the root of your external swf and pass a parameter to this function. One example of how this can be useful is for calling an initialise() function in your swf. The ‘external module’ is shown here.

Flexible Site structure

The mbudm#002 template can be used for any aount of site content, from a small collection of 10 - 15 images on one topic through to a vast busy gallery web site containing many collections of works. The site structure can be 'nested' as deeply as you like making it easy to organise large amounts of content into manageable sections.

Deep linking

The mbudm#002 template includes inbuilt methods that can be used in two ways to navigate within the mbudm#002 template itself. These utilise the Coordinate or Id system. The Coordinate system let’s you link to pages ‘relatively’, for example, page 2 of section 1 (The iguazu falls collection). The ID system let’s you target a precise page no matter where it is in the site structure. The link to the 'external module' above uses this system. The mbudm#002 template is smart enough to know what navigation option you are using and updates the main navigation site structure to enable you to see where you are.

The other aspect to deep linking is the ability to use the browser 'back' button, and to be able to bookmark any page. As you navigate through this demonstration site, you might notice that the browser location box changes to reflect where you are in the site. This is achieved by using the SWFAddress system. If you specify an ID for a particular page then the URL will use this instead of the standard coordinate system, this means that you can create 'friendly' urls that help people remember where they are (and what it is that they bookmarked) and give your URLs semantic meaning

Full SEO solution

The mbudm#002 template comes with an optional index.php file. This file is a customisation of the SWFAddress SEO solution. This file generates a text version of your site that can be read and indexed by Google. As this is a gallery template, this is particularly important for use with Google Image Search. Users who search in this way will be shown a thumbnail of your image, and when they follow the link to your site they will see the full sze image within your Flash Gallery.

To use the SEO solution you require a couple of things, these are fairly stock standard things that most web hosts provide, but check with your hosting provider if you are not sure.

• An apache web server that has php version5
• The ability to create .htaccess files on your server

Of course the standard SWFAddress dep linking mentioned above does not require these server settings.

Background Cross-Fader

You can set a background image or SWF for each page, each section, each sub section or none at all. The background will crossfade with whatever background is currently present and will resize with the browser - maintaining the image or swf scale.

Change the theme

Choose two colors to create a theme...

All graphical elements in the mbudm#001 template source their colors from the main 'theme' object. Changing the colours in the main 'theme' object is a simple matter of specifying two colours - a 'base' color and a 'composite' color. The theme object then creates tints and shades of these two colors which will be used by all the graphics in the mbudm#001 template.

...Plus use CSS to change the color of anything

In addition, if you don't like the 'theme' colour that has been chosen for a particular item, you can add a CSS override for that specific item.

Layout options with XML

The mbudm#001 template in the preview is set to a fluid layout with a 10% margin at right and left, a specific pixel margin at top and bottom and a navigation menu of 160 pixels in width. The full list of changeable layout options are:

CSS control of text styles

All text items in the template are controllable from the one CSS file. Support for embedded fonts is built in. All you need to do is add a font symbol to the library and use the export name in the CSS file. You can easily change:

Mouse Wheel scrolling

The text content areas in this module all have a smooth scrollbar, and the option of adding the Table of Contents list for easier navigation. In addition to these text scrolling options, mouse wheel functionality has been added. This cross OS functionality is made possible with the use of the 'MouseControl class' from MrSteel and the SWFObject add-on: MouseWheel on Mac OS from pixelBreaker.

Code customisation

For the more experienced actionscript developer who may want to modify this template even further, you will be pleased to hear that the code is well organised into base classes and classes for UI and design. All code is commented and the documentation provides an overview of how the code is organised so that you can quickly identify what you need to make your customisations.