This is the first of several guest posts here on the Alledia blog. Brian Teeman discusses building a large community site with Joomla.
We welcome other guest posts. Simply login and click “Make a Guest Blog Post” in the right-hand menu.
About My Jeneration?
Jeneration.org aims to engage Jewish young adults, in the UK, in new ways and on their own terms. It provides:
- A space where you can expand your social networks, making connections with others wherever they may be; geographically or Jewishly and let others know about cool stuff you’ve come across.
- A space where you can find out what is going on, publicise your events .
- A space for expression and debate, a platform where your voice will be heard. Here you can engage with contemporary issues and have your say, sharing a desire to make a difference to the world we live in
Enough about the aims of the site … how did we achieve them?
Aim 1: Community Builder, Group Jive, Bookmarks and more to the rescue
Community Builder (CB) is the heart and brains behind the social networking aspects of the site. It provides everything we need for user management and together with Group Jive allows our users to create their own special interest groups etc. Bookmarks and RS Gallery allow users to both submit links and images for everyone to see and for them to be stored in their CB profile page, whilst Seyret does the same for video clips. There was very little modification required to these as they did exactly “what it said on the tin”.
We made one small modification to the CB login module which resolves a personal complaint of mine when visiting a site. Its easy to see the login box but it isn’t always obvious why you should create an account in the first place. So now there is a prominent “Why Should I Register?” link within the module.
Aim 2 required the most custom development
The aims for the site required a full featured “What’s On” section that was both visually appealing and easy to use. The closest fit was Eventlist from schlu.net although it only offered a partial set of the required functionality.?
- Tag an event as “featured”. This was perhaps the easiest hack to achieve. An extra field was added to the events table which then allowed an event to be tagged as “featured”. This meant that we could modify the query in one of the existing “Upcoming events” modules to only display those events.
- Events in multiple categories. The aim was to allow an event to be placed into up to 3 different categories. This was fairly easy to achieve but did require the code to be changed in many places and took a bit of time to find them all. 2 extra fields were created in the events table to store the additional categories and then ALL the queries had to be altered to ensure that they were included when searching for an event.
- Enter short and long descriptions for each event. Here the aim was to modify the default category view so that it displayed a short description for each event with a longer description in the events detailed view.
- Transform all event and location images to ensure a consistent style. As the site is designed primarily for people to add their own events it was a concern that all the uploaded images would need editing to maintain a consistent look and feel. Obviously we wanted to reduce the administrator work load as much as possible so some javascript was utilised to modify all the images at display time.
- Convert all event dates from text to dynamic images created with css. The designer of the site wanted the display for each event to be more visual than the default especially regarding the date. To address this a css trick was used to reformat the dates from plain text to a more appealing image. By using css to achieve this, rather than creating an image for all 365 days the display and load time is kept to a minimum.
Aim 3 was fairly easy to achieve
A combination of JA_Submit to handle user submitted articles, JomComment to allow people to discuss the articles and TAGs from phil-taylor.com to provide new ways of finding the content.
One thing we wanted to do was to make the name of the author a link to their biography. For those authors who were members of jeneration.org this was easy to do as we just had to link to their Community Builder profile and this was done using CBAuthorbot. However the site also features articles from guest contributors, many of them regular contributors to National newspapers and it wasn’t appropriate for them to create a CB profile. So instead we utilised an other bot called “BK Author Link” which links the name of the author in joomla content items to a biography “content item”. After a little experimentation we found that the two bots could co-exist with each other as long as the Author link bot was processed before the CBAuthorbot.
One side effect of installing JomComment, TAGs and the CBAuthorbot was that by default they are applied to all content items and sometimes you just don’t want people to comment or add tags to an article. JomComment handles this by allowing you to limit which categories it is to be active on. However TAGs and the CBAuthorbot? achieve the same on a per article basis by inserting a mambot tag in the head of the article, {!CBAuthorBot} and {hidetags}. We felt that it was too much for “simple” editors to remember two tags so we replaced them with a single tag {hide} using the JosReplace component. Now all our editors need to remember is one simple tag. [NOTE: we use JosReplace across the site to resolve many other repetitive tasks and to allow our editors to use a common shorthand]
“If you build it, they will come”
It may have been true for Kevin Costner in his Field of Dreams but just building a site is not enough to get people to use it. Sadly there is a 90-9-1 rule when it comes to users in online communities. 90% of users are lurkers who never contribute, 9% of users contribute a little, and 1% of users account for almost all the action (source USEIT.com). So it is really important to ensure that as many people as possible know about the site and to provide the tools for users to easily “invite” their friends to join them. One way that Jeneration.org achieves this is using the PLAXO Invite component as this will allow a user to easily invite all their friends from their email contact list.
The Extra Bits & Pieces
Every site is searching for the extra things that will attract users and keep them coming back. As these are the missing piece of the jigsaw for many sites we’ve chosen to add several rather than rely on one person’s idea. We have streaming radio stations, newsfeeds from relevant sites all on one page, a “fridge magnet” where users can leave messages or even write poetry for others to see and my personal favourite a “polaroid gallery” .
The Site Design
Personaly I have always felt that it is more important to start creating a site by first determining the content and not the design. Sadly, for me, Jeneration.org approached this the other way around and a design was created in photoshop by an agency with no experience of Joomla. This created many challenges for Arno Zijlstra, who was contracted to create an accessible Joomla template from the photoshop design. The first challenge was to create a template with a different layout on the frontpage than all the other pages. Arno achieved this by using a php switch to determine if we are on the frontpage or not and then loading the appropriate template layout based on the result. This perhaps could have been achieved using multiple site templates but Arno’s aproach allowed for easier management in the long term.
The second and larger challenge was that the site called for a specific, non-web standard font, to be used in all the module headers. We played around using SIFR for this but it added considerable delay in page rendering that was not acceptable. Another option was to create an image for each module header but again this was slow and had the effect on slower connections of watching the page being built before your eyes. The innovative approach Arno implemented was to have one image that contained all of the module headers and then using the module class suffix to select the correct portion of the image with css. This means that on the first visit to the site all the module header images are downloaded in one go and are available localy on the users computer for all subsequent pages. This did not increase the initial page load but all subsequent pages are rendered very fast as there are no additional images to download.
Unfortunately a majority of the modules used did not have the facility to assign a module class so we had to add that to the module. It was such an easy job that it is suprising that all module writers don’t do it. The code for this is available here.
Lessons Learnt and Top Tips
When building a complex site such as Jeneration.org it is all too easy to end up with a list of installed modules that is very difficult to manage, especialy for someone like me who wants to install every module available for a component to try them out. The solution I’ve found that works best for me is to create three extra module positions in the template manager, these are z-to_test, zz-not_used and zzz_core_not_used. This allowed me to keep all the unused modules at the bottom of the list in module manager and to easily see what was still to be tested or to be uninstalled.
If there is more than one person building the site then it is important that you are all kept informed on what you have each done and wether the work is complete or not. There is nothing worse than logging in to find the previous days work broken without knowing why or to receive an email that the feature you just added isnt working when you are still working on it. Everyone has their own way of working when it comes to project management and we used a combination of email, Project Fork and HP Todo List. The latter admin module was perhaps the most useful as it provided a quick and easy notepad for all the developers to use and it was always visible in the admin control panel when you logged in.
Finaly there can be no greater tip than to get to know the developers of your chosen extensions. If you find a bug let them know, if you miss a feature let them know, if you add a hack let them know and most importantly say thanks. During the development of Jeneration.org we have tried to feed all of these back to the developers and in many cases we have been rewarded by quickly seeing our bugs, missing features and hacks implemented in future versions.
Similar Site in Joomla 1.5
If you’d like to here a similar overview of a site in Joomla 1.5, listen to Pete Russell’s excellent interview with Rob Clayburn of Bobble.net.