English Ceilidh (ECeilidh)

Widgets Technical Manual

This manual explains how to put a listing of ceilidh events on your website. It assumes a reasonable knowledge of HTML and for more advanced usage, CSS is needed. You could list all the ceilidhs that eceilidh.org.uk knows about but most people will want to be more selective. Options include:

Simple Example

In this example, we make a page that will show all ceilidhs that happen at Stroud Subscription Rooms.

1. Edit your HTML page and within the <head...</head> section insert:

<script src="http://eceilidh.org.uk/cps/widgets/w.js" type="text/javascript"></script> 

2. Also in this section put:

<link type="text/css" href="http://eceilidh.org.uk/css/standard.css" rel="stylesheet" />

If you want to change the colours, formatting, etc, you will need to change http://eceilidh.org.uk/css/standard.css to something else - more of that later.

3.  Finally, put the code below in the <body>...</body> section - exactly where you want the listing to show:

<!--Eceilidh Feed Widget START-->
<div style="display: inline-block; overflow-y: auto; overflowx: hidden" id="ECFeedPlaceHolder">Please wait</div> <script>draw_widget_code("","","","GL5 1AE",0,"");</script>
<!--Eceilidh Feed Widget END--> 


4. See the finished page here

5. More detailed notes:

5.1 This isn't the same as "Stroud Ceilidhs" because Stroud Ceilidhs sometimes use other venues - and it's possible that some other organisation would put on a ceilidh in Stroud Subscription Rooms. It is possible to list "Stroud Ceilidhs" events - wherever - they might be -see further down.
5.2 We identify Stroud Subscription Rooms by it's postcode GL5 1AE.

Coding up the selection

The key part of the code is the call to draw_widget_code which takes 6 parameters:
1. Name of a band. If you specify it, only events that match that band will be listed. EG on  http://eceilidh.org.uk/events6.php we show events that feature the band Banter using the code draw_widget_code("Banter", "", "", "", 0, "")
2. Name of a caller. If you specify them, only events that match that caller will be listed. EG on  http://eceilidh.org.uk/events5.php we show events feature Sheena Masson using the code draw_widget_code("", "Sheena Masson", "", "", 0, "") This example also uses a different colour scheme - for more information, see here
3. Name of an organiser. If you specify them, only events that match that organiser will be listed. EG on  http://eceilidh.org.uk/events4.php we show events organised by Stroud Ceilidhs using the code draw_widget_code("", "", "Stroud Ceilidhs", "", 0, "") 
4. Postcode of a venue. If you specify this, only events that match that venue will be listed. EG on  http://eceilidh.org.uk/events3.php we show events organised at Stroud Subscription Rooms draw_widget_code("", "", "", "GL5 1AE", 0, "") (You also need to ensure that the fifth parameter is zero)
5. Distance in miles. This is only important if you have also given a postcode for parameter 4. The two values work together to select a list of events within a circular area. EG on  http://eceilidh.org.uk/eventsm4m5.php we show events within 30 miles of the M4/M5 junction near Bristol using draw_widget_code("", "", "", "BS32 4JZ", 30, "")
6. Controls formatting - see below

If you need a more a complicated selection, you can use several parameters. Events will be listed only if all the conditions are met. EG draw_widget_code("Banter", "", "", "BS32 4JZ", 30, "") would list all Banter gigs within 30 miles of the M4/M5 junction near Bristol

More about formatting

If you tried some of the examples in the section above, you may have noticed that the details given for each event are not always the same. That's because (for example) a listing of Stroud Ceilidhs doesn't need to say "Stroud Ceilidhs" on each line. It's assumed that the widget will be used on a page headed "Stroud Ceilidhs" 

The sixth parameter for draw_widget_code can override this . Currently only one option other than blank ("") is supported and that is "all" which lists all details on every line.

Changing colours, fonts, etc.

You can change these - perhaps to match up with the rest of your site using CSS. You do that by replacing our standard stylesheet referenced by:

<link type="text/css" href="http://eceilidh.org.uk/css/standard.css" rel="stylesheet" />

to your own style sheet, EG:

<link type="text/css" href="http://example.com/css/my-style.css" rel="stylesheet" />

There's an example of a white on black stylesheet at http://eceilidh.org.uk/css/dark.css and you can see it in action on http://eceilidh.org.uk/events5.php

The classes you need to customise:
 
ec_feed_border Sets the outside border of the widget
ec_main_data Used for the main body of the widget, IE the entries. You also need to set a.ec_main_data:hover etc. to control link styling 
ec_event_count Styles the last line of the widget that reports how many events are listed