By samchok on 8 Jun 2010 at 17:18 UTC

Prossima Fermata Genova

http://www.prossimafermatagenova.it

Background

Prossima Fermata Genova The town of Genoa (Italy) in the last few years has focused his attention on digital media and the "web 2.0" phenomenon, realizing several interesting activities under the Genova Città Digitale (i.e. Genoa Digital City) project. Among those: the The Genoa Municipality Channel on YouTube, the Genoa on Facebook network, the Genova HUB on MySpace and the creation of a network of WiFi hotpots all over the city.

Genova is widely known for its seaport, its intricated historical centre and its UNESCO buildings. But city administrators also feels the need to valorize the urban areas surrounding the city centre, rich of social and folkloristic events, historical and cultural buildings, traditional food, artisan products, and so on... Those areas are divided into nine different "municipalities" (i.e. districts) each equipped with a "council" directly elected by municipality citizens during local elections and with some authority (in particularly on local territory administration).

The idea of the Genova Città Digitale team is to create a new web-portal, Prossima Fermata Genova (i.e. Next Stop Genoa), not only intended as a promotional website for the nine municipalities, but also as a community of users (both tourists and citizens) that can help the development of a "territorial identity" through exchanging experiences and knowledge.

As of today Prossima Fermata Genova only concerns the municipality of Cornigliano/Sestri, but the idea is to transform the current website into a multisite (probably taking advantage of the Domain Access module): one minisite per municipality.

Prossima Fermata Genova website has been developed by TXT e-solution using Drupal 6 on a graphic design by Andrea P., and lately mantained by Antonio P. from Genova Città Digitale; it was firstly released for internal use and content creation in early january 2010 and publicy released on april 2010.

What users can do

Prossima Fermata Genova not only contains local news, information on city events and local public services, but also guarantees a high level of partecipation for both citizens, tourists and local stakeholders. Common citizens, for example, can submit short writings about their life in the municipality (My life section), can upload local and traditional recipies (My Recipies section), and - of course - can comment most of website contents.

From their side, local no profit associations and lucrative organizations can promote themselves by managing a page (or a set of pages) in the Associations and Organizations sections. Also other entites (institutions, local projects...) could apply for managing their own set of pages in the Self managed spaces section.

The Sell and Buy board gives the user the possibility to search for or sell/give away used (or for too long unused!) objects.

Finally the Itineraries section contains itineraries that gives the user the opportunity to virtually explore the local territory and find out its beauties and "hidden treasures" through an interactive map rich of media contents (images, videos, audioguides and weblinks). Website administrators can create itineraries and insert points of interest, but also authenticated users can create their own itineraries both for private use (such as print out a PDF for the next visit to the city) or for share it with the community. In the same way, users can also add their own points of interest and related images into the map, making other users aware of previously unknown pieces of territory.

Why Drupal

Analysing the city's needs, we came to the conclusion that we strongly need a low cost CMS with the following features:

to be able to manage several different and customized content types
to be able to manage a detailed structure of roles and permission for different content types
to be rich of external modules to address all of our requirements
to be easily integrated with existing proprietary PHP/Javascript code

Also, we already have some knowledge on Drupal CMS due to previous company projects, so we have no reason to adopt a different CMS.

Website structure

A few technical notes about the website structure.

Content types

Prossima Fermata Genova is made up of about 15 customized content types for contents such as News, Associations, Companies, Events, Stories, Recipies, Sell and Buy board... Most of those content types gives the opportunity to upload documents and images (FileField module), embed videos from external sources such as YouTube (Embedded Inline Media module) and editing texts via a WYSIWYG editor (FCKeditor module). For the display of image galleries we choose to use the well-known LightBox modal window script (Lightbox2 module) because it is universally used but also for its perfect integration with Drupal Views. A few content types (such as Associations, Companies and Events) also permits an easy geolocation using a Google Map (GMap and Location modules).

A few other content types were used for display single generic Pages (the static pages created once by the administrator such as the History of the municipality, Contacts, Useful Numbers...) and pages accessible to administrators or moderators only.

Since we also need to create subpages for certain content types, another content type has been created specifically for subpages. Every subpage has a hidden reference field to the parent page, the reference is automatically generated thanks to Node Reference URL Widget module: this module reads the current node from URL and fill the hidden field with its node ID. This way we can easily reconstruct pages hierarchy using the Views module. We followed this approach instead of the more conventional Book or Node Hierarchy modules, because it results easier to use from users side (they don't need to explicitly manage the hierarchy).

Roles

Prossima Fermata Genova organizes its user's database with six different roles:

anonymous user, can only view published contents.
authenticated user, can create comments and a few content types (moderator review is required).
editor, can create every content type, but can only edit his own and can't delete any.
association/blockowner, can edit own content of type Association or Block.
moderator, have full access to all content types and comments.
administrator, have full access to all content types, comments, users and some more option during content editing.

Basically anonymous users can access all contents in read-olny mode, authenticated users can make comments and create a few content types, but moderation is required before any authenticated user's content is published. On the contrary, editors, moderators and administrators can create any content type and it is instantly published by default (we used the Rules module to achieve this).

Local associations and other interested users can "adopt" a page and have full access to this page and its subpages only. Unfortunately the process to give full access to a single page is not a straightforward task for the administrator. As a matter of fact an administrator should:

Create a new content.
Give the user association/blockowner role.
Mark the user as author of the new content.

However, this routine has proved to work, and we'll probably continue using it.

Layout

The layout of the website has been created customizing an existing theme and its template files. In order to show only the relevant information into every content type's node and display it the way we need it, the Content Templates (Contemplate) module has been used. All mainpages of the various sections of the website as well as administration pages have been generated using views and the look & feel has been customized mainly via CSS.

Since every content type consists of a main image together with some additional content and this image has a fixed predetermined size (it is used as a sort of header for that node), we used the ImageCache module to define a custom image preset. This way, images uploaded into, for example, the News content type are automatically cropped to the right size. The Imagecache Javascript Crop module gives the user the ability to manually resize and crop every uploaded image, this way we can crop an image around the more interesting image detail instead of cropping it around its center (as ImageCache module only permits).

Events agenda

The latest events regarding the municipality have been retrived via RSS from an existing Events agenda of the city. The latest events are periodically imported and stored into a new content type using the Feed API module and displayed into the website with the Views module as usual.

Glossary

The aim of the glossary section is to provide a tool for better understand the local territory and its traditions. The Glossary is built as a wiki, so every authenticated user can edit and improve its contents with his own knowledge of the territory. In order to create a content type editable as a wiki we used the following modules:

At first we decided to use Flexifilter module in order to manage WikiTags, but we failed to integrate Flexifilter with the FCKeditor module, so we came to the conclusion that a WYSIWYG editor will suffice most user's needs and we replaced Flexifilter with the Freelinking module, that adds the possibility to link other pages of the same wiki in a MediaWiki fashion.

Itineraries

Prossima Fermata Genova An Itineraries section gives users the possibility to explore existing itineraries through the city (taking advantage of Google interactive maps), create their own customized itineraries and download them as PDF, create their own POIs and add images to them using Flickr's API... This section, together with an administration panel for managing the geolocated content, has been developed by my company as part of a previous project, and has been succesfully integrated into Prossima Fermata Genova website. The integration of the Itineraries section had a major role in the development process, however since it does not rely on Drupal CMS we'll avoid further description.

Reports of inappropriate contents

Since most of Prossima Fermata Genova contents are user generated, it is important to provide an easy way to report erroneus or inappropriate contents. Instead of using the traditional Flag module we choose to create a new content type (Report) and automatically prepopulate it with information about the reported content using both the Node Reference URL Widget and the Prepopulate modules. This way we were able to use the Report content type also in our proprietary Itineraries section thanks to the REST usage of the latter module.

Modules

Here is the list of the most important modules that were used to develop Prossima Fermata Genova:

Content Access: for managing content types permissions.
Pathauto: for creating automatic URL aliases.
Administration menu: for better administration experience during development.
AJAX Comments and Fasttoggle: for giving AJAX behaviour to certain activities.
Better Formats: for customize content type's forms.
Wikitools, Diff, Freelinking and Talk: for creating a wiki section.
FCKeditor and Image Assist for provide a WYSIWYG editor during content's creation and let the user upload images through it.
Lightbox2: for displaying image galleries inside modal windows.
Search config: for customize searching options.
Content Construction Kit (CCK) and Content Templates (Contemplate): for creating custom content types and customize their appearence.
FileField and Embedded Inline Media: for adding images, files upload and remotely hosted videos to CCK module.
Date and Calendar: for adding recurring dates and calendar capabilities to CCK module.
Node Reference URL Widget and Prepopulate: for automatically populate custom fields of Report and Subpage content types.
ImageCache and Imagecache Javascript Crop: for automatically crop new uploaded images to standard sizes and let users manually adjust the cropping region.
GMap and Location: for adding interactive map based geolocation for certain content types.
Private messages: for adding the ability to send messages to other users without making their email address public.
Rules: for automatically publish certain roles posts and redirect to specific pages after login.
CAPTCHA: for adding CAPTCHA challange to registration form.
External Links: for visually highlight email and external links and open it in external browser window.
Views, Views Bulk Operations, Views date range and Views Custom Field: for displaying latest added contents and manage user contents in administration section.
Google Analytics, for easily add customized Google Analytics statistics.
Terms of Use: for require users to accept custom Terms of Use during the registration process.

Issues and help requests

This is a list of issues and bugs that were encountered during the development process:

As you can see, they both concern the Imagecache Javascript Crop module. It is really a good module and on common Drupal installations it does a great job, anyway on our webserver we couldn't get it fully working on major browsers. Thanks to the module maintainer we fixed the main issue a few days before the official release of the website.

Drupal community has been very helpful during the development process. Here is a list of the questions we've raised in Drupal forums. We think they can be of interest for other developers too.