Mission Beach Community Art Centre

The concrete5 site we developed, is highly mobile responsive and has some clever ways that the information is interrelated and presented.

We had the pleasure of working with the talented designer James Leech for this project, with him providing the design and direction and us taking care of the more technical/programming aspects. The design James developed was heavily focused on clarity, creating a bold look whilst ensuring the information was easy to navigate and intepret. A fun part about this project is that James is based in Yungaburra, near Cairnes in Queensland, while we're all the way down in Goolwa, near Adelaide in South Australia. This is well over 2000km of distance 'as the crow flies', but Skype and email made this geographic seperation an non-issue. It was great to have the opportunity to collabratively work on such an interesting project in this way.

The challenges

Although this project had lots of smaller, interesting, custom programming tasks, there were three broader challenges that we needed to solve:

1. Regular updates needed to be easy

It was expected that content such as new artists, artworks, exhibitions, events and news would be regularly added to the site by the staff and volunteers at the centre, perhaps on a daily basis. With these responsibilities being shared across multiple individuals, these update tasks needed to be very intiuative to learn, document and teach.

2. Dates, dates and more dates

The exhibitions and events added to the site needed to automatically update on the site, depending on whether they were current, in the future or had passed. Exhibitions in particular can last several weeks, while some events such as workshops would repeat multiple specific times. We also needed to be able to display these events in a calendar format, filtered by event type as well as interleaved, all displayed in orders that made sense to the reader.

3. Artworks for sale across the site needed to be displayed together on one page

The site was to have individual pages for artists, and underneath each artist one or more pages for their artworks. The artworks needed to be able to be given a price and marked as 'for sale', having them list together one one particular page. The artwork also needed to be categorised by medium and able to be filtered and explored.

Our solutions

1. Heavy use of the composer and custom page types

We first identified the kinds of information that would be regularly added to the site and then made heavy use of the composer with custom page types. In particular we developed the composer drives pages as seen below: 

This meant that for the majority of content placement tasks all that is required is the completion of a composer form, completing the fields and uploading images, with the system automatically taking care of the location of the new page, the formatting and tasks such as resizing images.

2. A custom built calendaring solution

Although there are several great calendaring solutions available for concrete5 as marketplace add-ons, for this project we needed to develop something highly flexible in terms of outputs, but also something that would tightly integrate with the composer.

Fortunately we had already been toying with a event system concept and were able to enhance our prototype into a fully working system. We had actually re-evaluated the way people were using calendars and dates on websites and found that systems with complex interfaces for adding dates (especially recurring ones) limited admins too much. We had found that out clients are very comfortable using the Composer, but the existing calendaring systems had their own (often complex) admins.

The calendaring system we developed is something we're already using on other projects and is described in more detail in its own blog post. In short though, the way our calendaring system works is:

• One or more dates are associated with a page by the use of a custom page attribute
• Dates that are entered into these custom attributes are entered as plain text, with the system recognising a range of common date formats, being able to be written as a single date or a date range, with or without times.
• The system parses these dates and provides a way to retrieve dates in different ways, dates in the future, past, currently on, etc
• A custom block, similar to the page list block, uses the output of the date system to retrieve the relevant pages
• Different custom block templates are used to output different calendar formats (including the current or future exhibition for the home page banner area)

This system allows the administrator to simply enter in one or more dates into a field when filling out a composer form, with the system automatically recognising the dates and outputting the event or exhibition details where appropriate.

Displaying dates that span multiple days and weeks

To provide an overview of events in a calendar format, we utilised the jQuery calendar 'FullCalendar', with it providing a great way to show events that spanned multiple days, weeks or even months. We simply created a custom block template for our calendar block and integrated this jQuery plugin. We customised it to link events to the individual pages and colour code them depending on whether they were an exhibition or an event/workshop. 

It worked - we're proud to say that the site is current full of events and exhibition details (and other pages like artists and artwork) that the centre has put in themselves. Every week we return to the site and see new content.

3. A custom template for the page list block was developed to filter artwork for sale and provide ways to filter by artwork medium

As we had created a page type for artwork (to be nested under artists to show ownership), we had an organised way to upload information about artwork, including a photo of the artwork itself, so this was a great place to include a checkbox attribute to mark a piece as for sale:

We also created a select type page attribute to store the artwork's medium types - we set this to 'Allow multiple options to be chosen', so that multiple medium types could be selected.

We then developed a custom block template for the page list block, having the page list retrieve all the artworks on the site and output thumbnails (with a bit of Javascript to make them expand and show further details). The custom block template simply checked each artwork page that it was going to output to see whether the attribute 'for_sale' was true, and only output the artwork if this was the case. This provided a quick way to filter this list.

To provide the filtering, we licensed the amazing jQuery plugin Isotope. This provided both the ability to filter the artwork by their media type (with a great animation), but also reflow the artwork grid in the event that the browser width changes. If you haven't seen the Isotope plugin, I'd suggest you check out it's demos. Also check out the filtering on the Gallery & Shop page, it's funky.

On click of an artwork thumb, the artist name, a description, the price and a link to the artist are displayed.

Summary

Ultimately, James and Mesuva have developed a site that gives the centre a very easy platform to post news, events and new content. Already the site is bristling with eye-catching artwork and we regularly find ourselves simply browsing the site ourselves for fun.

The calendaring system we've developed out of this project is something we're also proud of - if you are in need of such a system, feel free to get in contact and we can show you how it works.

Visit the Mission Beach Community Art Centre website.