The streetartaberdeen.org system is an online gallery and map of street art in the Scottish city of Aberdeen. It was created at the start of 2022 and has been growing steadily since, at the start of May ‘22 it documents nearly 1000 pieces of street art in a wide variety of styles and mediums.
Background
Over the last 15 years I’ve created hundreds of Joomla websites and online systems, many have been directories with map elements. Historically we used extensions like K2, jReviews, FieldsAttach and others, while these provided good solutions, they have quite a few downsides compared to Joomla’s core fields. So for the last few years, since Joomla 3.7, it’s been really quick to create directory / catalogue type systems with Joomla.
Aberdeen has traditionally been a city orientated around offshore oil and gas in the north sea, often neglecting creative industries. This has been gradually changing, and one aspect of this is a new positive attitude to street art. The city council has helped fund the Nuart festival for several years, which has brought world class artists to create iconic large scale pieces of street art in the city. I’ve always had an interest in street art, but this has grown during covid, as it makes for a great way to explore our urban environment. The downside is, it is often hard to find, and also can be quite transitory, this is where streetartaberdeen.org helps. The system helps people explore street art in the city, and also documents pieces that may be removed or painted over in quite a short timescale.
The system
Everything was built from scratch with Joomla 4, it seemed like a good opportunity to get to grips with developing on the new version on an internal project, before using it on a client projects. The intention was to keep everything simple, with the minimum number of extensions possible. As such, the development consisted of the following:
- A custom template based on Cassiopeia.
- A location field plug-in, for choosing and displaying a location with Google Maps, based on one by Michael Richey (GPL2).
- An image field, allowing one image per item, with a simple browse button with image resizing. It was felt this would be easier than using a com_media type field.
- Some JavaScript code, in the front end edit form, to read and image's EXIF data, extracting the lat and lon, if there, and placing the map marker based on that. This saves quite a lot of time adding new artworks.
- A console plug-in, to enable the generation of various sized derivative images from the cli, if they need to all be re-generated.
- A reverse geo look-up to generate article titles from the address, based on lat and lon.
- A simple contact form module.
The system runs on a 1GB Linode VPS with a hardened implementation of the latest Ubuntu LTS and PHP 8. All the code is GLP3 and can be found on GitHub.
The User Experience and User Interface
The user interface was very focused on the primary user stories, as such, the interface is quite minimalist, enabling the artwork to take centre stage. The three main views are, the map view, a gallery view and the item view. Secondary user stories start from the footer menu, these include a news section, labels (tags) and a timeline of when pieces were added. It is intended that most content would be added via the front-end.
Home page and map view
Gallery page
Item page
About page
Future plan, a development roadmap
The combination of Joomla 4, core fields and the excellent Cassiopeia template allows exceptionally quick delivery of a minimum viable product. From there we were able to quickly add features and make adjustments based on feedback. It was really helpful to be able to add content whilst also adding features.
Issues encountered
The development process was all pretty straightforward. Initially we struggled with the new Joomla 4 CLI structure, but this was mainly due to it being a very new feature with developer documentation still mostly being work in progress back in January and February. We will have to address front end rendering performance of the home screen map, as it is getting a little slow to render with so many pins.
The next steps
We have a to-do list in the readme in github, but in general terms, the roadmap looks like:
- Create a way to filter map and gallery views
- Get more feedback on the add/edit screen and encourage more people to contribute
- Look at gamification of viewing in a way that's perhaps analogous to Pokemon Go
- Look at gamification of contribution, encouraging people to add more art works
- Look at creating a Flutter App, for better offline performance than as a PWA
- Look at dynamically generated walking tour routes, based on user preferences
Thoughts and reflections
It has been a fun system to develop, and I think many elements have scope for re-use in other projects. Typically I only work on a part of a system, for clients, just an API, template, middleware or similar, so it was a really different, quite liberating, experience working through the whole process. I found going out and discovering street art almost addictive, and it’s led me to get to know the city I’ve lived in for 14 years in much greater detail. I hope other people might want to adopt the system and create something similar for where they live too. Finally, and most importantly, I’d like to offer massive thanks to everyone who is, and has been, been involved in the Joomla project over the years.