• Wednesday, 31 October 2007 11:17

A few days ago I received an email from Brian Teeman, one of the guys behind My Jeneration, describing his experiences with EventList while adjusting it to the needs of the project. Received feedback about the experiences EventList users made with our work is an important factor when we decide in which direction our development strategy goes. But Brian got one step further and also describes his hacks which could be interesting for some of you.

Talking About My Jeneration

Jeneration.org aims to engage Jewish young adults, in the UK, in new ways and on their own terms

• A space where you can expand your social networks, making connections with others wherever they may be; geographically or Jewishly.

• A space where you can find out what is going on, publicise your events and let others know about cool stuff you've come across.

• 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.

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. Brian has rewritten the code adding numerous features not available in the standard 0.8.9 download.

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.

The modified query was

SELECT a.id AS eventid, a.dates, a.locid AS locationid, a.titel AS event, b.club AS location, b.city FROM #__eventlist_dates AS a LEFT JOIN #__eventlist_locate AS b ON b.id = a.locid LEFT JOIN #__eventlist_categories AS c ON c.id = a.catsid WHERE a.published = 1 AND a.featured = 1 AND c.access <= $my->gid AND a.dates >= now() ORDER BY a.dates, a.times LIMIT $mcount

Events in multiple categories
The aim was to allow an event to be placed into upto 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.

An example changed query would be

SELECT count(*) FROM #__eventlist_dates AS a LEFT JOIN #__eventlist_locate AS l ON l.id = a.locid LEFT JOIN #__eventlist_categories AS c ON c.id = a.catsid OR c.id = a.catsid2 OR c.id = a.catsid3

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. You can see it in action here

Again a new field called "Short Description" was added to the events table and the category view was ammended to output this field as well as the default event dates and title.

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 consiant 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. We used the glossy.js script from http://www.netzgesta.de/glossy/

To do this the script had to be included in each page by adding

<script type="text/javascript" src="<?php echo $mosConfig_live_site; ?>/components/com_eventlist/js/glossy.js"></script> 
to each displayed page and then a class of "glossy" applied to the image by ammending the code to
<img src="<?php echo $thumb; ?>" class="glossy"/>

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 especialy 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.

This required modifing the output code as below

<div class="the_date">
  <div class="date_m"><?php echo strftime("%b", $time ); ?></div>
  <div class="date_d"><?php echo strftime("%d", $time ); ?></div>
</div>

and adding the following css

/* start caldate image */
.the_date {
display:block;
text-align: center;
float:;
font-family: Arial, Helvetica, sans-serif;
background-color:#efefef;
background: url(/images/calendar_images_big/pink.png) no-repeat;
width:79px;
height:80px;
}

.date_m {
display:block;
font-size: 1.7em;
margin:0;
padding-top: 0px;
font-weight: bold;
text-align:center;
}

.date_d {
display:block;
font-size:3.0em;
margin:0;
padding-top: 0px;
text-align: center;
font-weight: bold;
}

After all of these changes I hope that we have been successful in adding to the user experience of eventlist and have been able to satisfy all the demands of our designers.

It has been relatively simple to modify the eventlist code although there were times when I was pulling my hair out as each hack had to be applied into soo many places and I always managed to miss one.

I would like to pay especial thanks to Christoph for not only providing eventlist but for being on hand to answer my numerous emails.

The site uses so many other components, modules and mambots that its not possible to list them all here but a full list is available here

Next >