The JEM Banner Module (mod_jem_banner) displays JEM events as visual promotional blocks. It is suitable for home-page highlights, event cards, image-led teasers, location-focused cards and compact event campaigns.
Overview
The Banner Module combines event titles, dates, calendar sheets, event images, descriptions, categories, event types, venues and action links. Administrators can select events by date state and then restrict the result by category, venue, event ID, county/region or featured status.
Use the Basic Module for a compact text list. Use the Banner Module when images, date blocks, descriptions or stronger calls to action are important.
Access control: the module uses the current visitor's Joomla and JEM access context. A restricted event is not exposed as a public event-detail page. Depending on the configured access workflow, its link can lead to the Joomla login page.
Current Compatibility
| JEM version | Status | Joomla | Documentation scope |
|---|
| JEM 5.0.1 |
Stable |
Joomla 5.x and 6.x |
Primary reference for the common Banner Module options and examples in this article. |
| JEM 5.0.2 Beta 1 |
Maintenance beta |
Joomla 5.x and 6.x |
Uses the same Banner Module options and temporarily supports known legacy module CSS filenames. |
| JEM 5.1.0 Beta 4 |
Development beta |
Joomla 5.x and 6.x |
Includes development changes documented separately in the appendix. |
JEM 5.x requires PHP 8.3 or newer. Verify the requirements of the exact package before updating a production website.
Requirements
- JEM and the Banner Module must be installed and enabled.
- The module must be assigned to a visible template position and the required menu pages.
- Events must match the selected publication state, date mode, access level and filters.
- Archived mode returns events with the JEM archived state.
- Event images require an Intro/List or Full/Detail image assigned to the event.
- Category-based calendar colours require usable colours on the assigned categories.
- The More information action requires an accessible Joomla article associated with the event.
Create the Module
- Open System → Manage → Site Modules.
- Select New and choose JEM - Banner Module.
- Enter the Joomla module title and choose a template position.
- Configure event selection, content, image and filter options.
- Select an alternative layout if the default banner presentation is not appropriate.
- Set the Joomla menu assignment and access level.
- Publish and save the module.
Event Selection
| Option | Default | Purpose |
|---|
| Events Display-Type |
Upcoming events |
Selects upcoming, unfinished, archived, today's or open-date events. |
| Events in module |
5 |
Maximum number of events displayed. The runtime value is limited to the range 1–100. |
| Show “No events” |
Yes |
Shows the translated empty-result message. When disabled, the module returns no output if no events match. |
| Max. days |
Empty |
Limits upcoming or unfinished results to a number of days. Empty means no upper date limit. |
| Time offset (in hours) |
Empty / 0 |
Moves the date threshold forwards with a positive value or backwards with a negative value. Today's mode truncates the value to complete days. |
| Shuffle events |
No |
Randomly chooses the visible events from the retrieved result pool. |
| Shuffle pool limit |
Empty |
Controls the maximum candidate pool used when shuffling. When empty, the runtime fallback is 20 and it can never be smaller than the visible event count. |
Events Display-Type Values
| Value | Behaviour | Typical use |
|---|
| Upcoming events |
Returns published events whose start is after the current time plus the configured offset. |
Normal future-event promotion. |
| Unfinished events |
Returns events whose end is after the current time plus the configured offset. Events in progress can therefore remain visible. |
Current and upcoming events. |
| Archived events |
Returns archived events in reverse chronological order. |
Past highlights or an archive showcase. |
| Today's events |
Returns events whose date range includes the selected day. The offset is evaluated as complete days. |
Today, tomorrow or another relative day. |
| Open date events |
Returns events without a fixed event date. |
Announcements and dates to be confirmed. |
Offset example: Today's events with an offset of 24 hours displays tomorrow's events. An offset such as 12 is truncated to zero complete days in this mode.
Title and Destination Links
| Option | Default | Purpose |
|---|
| Max. Title length |
25 |
Shortens long event titles to the configured number of characters. |
| Link to Event on Title |
Yes |
Links supported titles and images to the event route when the visitor can access it. |
| Event block layout |
Default |
Selects the JEM event destination layout: global/default, Details or Compact. |
| Venue block layout |
Default |
Selects the venue block used inside the destination event page: global/default, Details or Compact. |
Do not confuse the two layout systems: Event block layout and Venue block layout control the destination event route. Joomla's Alternative Layout controls how the module itself is rendered.
Calendar Sheet and Colours
| Option | Default | Purpose |
|---|
| Show Calendar |
Yes |
Shows the calendar-sheet presentation in layouts that support this option. |
| Colour |
Red at runtime |
Selects red, blue, green, orange, category-based or user-defined calendar colouring. |
| Fallback Colour |
#EEEEEE |
Used for user-defined colouring and when category-based colouring cannot resolve one unambiguous category colour. |
When from Category is selected, one usable category colour is applied. If the event has no usable colour or has several different category colours, JEM uses the fallback colour.
Event Image Options
| Option | Default | Purpose |
|---|
| Image ratio |
1:1 |
Defines the image aspect ratio in layouts that use a card image frame. Available ratios range from square and landscape to portrait formats. |
| Show Flyer |
Yes |
Shows the event image in layouts that support the flyer switch. |
| Event image source |
Intro/List image |
Selects Intro/List or Full/Detail. If the selected Full/Detail image is missing, JEM falls back to the Intro/List image. |
| Displayed image |
Original Limited in JEM 5.0.x
Thumbnail in JEM 5.1.0 Beta 4 |
Uses the generated thumbnail or the original image constrained by the configured limits. Original Limited can download a larger source file. |
| Maximum width (px) |
800 |
Maximum displayed width for Original Limited. Accepted range: 1–4096 pixels. The image is not enlarged. |
| Maximum height (px) |
800 |
Maximum displayed height for Original Limited. Accepted range: 1–4096 pixels. The aspect ratio is preserved. |
| Ribbon scale (%) |
60 |
Scales event-status ribbons on Original Limited images. Accepted range: 50–200%. Thumbnail images use the global ribbon scale. |
| Flyer links to... |
Image on full page |
Chooses the action performed when a visitor selects the image. |
Flyer Link Values
| Value | Behaviour |
|---|
| Image on full page |
Links directly to the original image file. |
| Image in modal window |
Opens the image with JEM's lightbox/modal behaviour. |
| Event's details view |
Links to the accessible JEM event-detail route. |
| No link |
Displays the image without an image action. |
Performance: prefer Thumbnail for small cards and sidebars. Use Original Limited only when the design needs more detail, and set realistic width and height limits.
Description and Actions
| Option | Default | Purpose |
|---|
| Show Description |
Yes |
Displays the shortened event description in layouts that provide a description block. |
| Max description length |
300 |
Limits the prepared description length. The Cards layout additionally uses a compact 150-character presentation. |
| Allow Line Breaks |
No |
Preserves description line breaks. When disabled, JEM replaces line breaks with spaces. |
| Show “Read more...” Break |
No |
Displays the event Read more action as a link or button when the event has content after its read-more break. |
| Show More Information |
Yes (link) |
Displays a link or button to an accessible Joomla article associated with the event. |
| Show More Information Title |
No |
Appends the associated article title to the More information label. |
Read more opens the complete JEM event content. More information opens the associated Joomla article. They are independent actions and can appear together.
Date and Time Display
| Option | Default | Purpose |
|---|
| Date Display-Type |
Show date |
Displays the formatted event date or a relative day difference. |
| Date format |
Empty |
Optional PHP date format. Empty uses the relevant JEM/component default. |
| Time format |
Empty |
Optional PHP time format. Empty uses the relevant JEM/component default. |
Examples: j M Y, D, j F Y and Y-m-d for dates; H:i and g:i a for times.
Event Filters
| Option | Default | Purpose |
|---|
| Featured events only |
No |
Restricts the selected date group to featured events. |
| Categories |
Empty |
Restricts results to the selected JEM categories. |
| Venues |
Empty |
Restricts results to the selected JEM venues. |
| Event ID |
Empty |
Accepts comma-separated event IDs. This filter can also include matching open-date events. |
| County |
Empty |
Accepts comma-separated county/region values and filters using the event venue. |
| County Match Mode |
Complete Match |
Uses an exact match or checks whether the venue county contains the configured text. |
Filters are combined. For example, selecting a category, a venue and Featured events only returns only featured events that satisfy all those restrictions.
Module Text
| Option | Default | Purpose |
|---|
| Show intro text |
No |
Displays configured custom content above the Banner layout. |
| Intro text |
Empty |
Content displayed above the event output when enabled. |
| Show footer text |
No |
Displays configured custom content below the Banner layout. |
| Footer text |
Empty |
Content displayed below the event output when enabled. |
Advanced Options
| Option | Default | Purpose |
|---|
| Alternative Layout |
Default |
Selects a supplied layout or a compatible template override. |
| Show Category |
Yes |
Shows category information in layouts that support it. |
| Link to Category |
Yes |
Links category names in layouts that render linked categories. |
| Show Type |
Yes |
Shows the event type in the Cards and Table Advanced layouts. |
| Link to Type |
Yes |
Links the displayed event type to its JEM type-events page. |
| Show Venue |
Yes |
Shows venue information in layouts that support it. |
| Link to Venue |
Yes |
Links venue names in layouts that render linked venues. |
| Show status indicators |
Yes |
Allows the module to show event-status badges and image ribbons enabled in JEM Basic Settings. |
| Module Class Suffix |
Empty |
Adds custom classes to the Joomla module wrapper. Supplied responsive layouts also recognise selected JEM layout hints. |
| Caching |
Use Global |
Uses or disables Joomla module caching. |
| Cache Time |
900 |
Number of seconds before a cached module result is refreshed. |
Supplied Layouts
| Layout | Best suited to | Important behaviour |
|---|
default |
Classic event banners. |
Supports calendar sheets, optional flyers, descriptions, category and venue output, Read more and More information. |
responsive |
Flexible banner rows on responsive pages. |
Provides the classic information set with responsive image/content positioning. |
cards |
Modern promotional card grids. |
Uses an image panel, category badge, date box, venue, event type, short description and action links. |
cards-places |
Compact cards focused on location and registration capacity. |
Shows image or placeholder, date/time, venue/city, category and available-place progress when registration capacity is configured. |
table-advanced |
Structured, information-rich event cards. |
Supports calendar, image, category, event type, venue, description and action links. |
Layout Option Matrix
| Feature | Default | Responsive | Cards | Cards Places | Table Advanced |
|---|
| Calendar-sheet switch |
Yes |
Yes |
No; fixed date box |
No; compact date row |
Yes |
|---|
| Flyer switch |
Yes |
Yes |
Yes |
No; image/placeholder panel |
Yes |
|---|
| Image ratio frame |
No |
No |
Yes |
Yes |
Yes |
|---|
| Description |
Yes |
Yes |
Yes, compact |
No |
Yes |
|---|
| Category |
Yes |
Yes |
Badge |
Text |
Yes |
|---|
| Event type |
No |
No |
Yes |
No |
Yes |
|---|
| Venue |
Yes |
Yes |
Yes |
Venue and city text |
Yes |
|---|
| Read more / More information |
Yes |
Yes |
Yes |
No |
Yes |
|---|
| Status badge/ribbon |
Yes |
Yes |
Yes |
Yes |
Yes |
|---|
| Available places |
No |
No |
No |
Yes |
No |
|---|
The matrix describes the supplied layouts. A template override can intentionally implement a different presentation.
PHP Layout Overrides
Use Joomla's module override system to change markup without editing JEM core files:
templates/YOUR_TEMPLATE/html/mod_jem_banner/default.php
templates/YOUR_TEMPLATE/html/mod_jem_banner/cards.php
templates/YOUR_TEMPLATE/html/mod_jem_banner/my-layout.php
- Copy the closest supplied PHP layout from
modules/mod_jem_banner/tmpl/.
- Place the copy in
templates/YOUR_TEMPLATE/html/mod_jem_banner/.
- Use a new filename such as
my-layout.php when the design should be selectable independently.
- Reopen the module editor and select it under Alternative Layout.
CSS Overrides
For the default layout, create the following file in the active site template:
templates/YOUR_TEMPLATE/css/mod_jem_banner/default.css
The CSS filename must match the selected layout basename:
templates/YOUR_TEMPLATE/css/mod_jem_banner/responsive.css
templates/YOUR_TEMPLATE/css/mod_jem_banner/cards.css
templates/YOUR_TEMPLATE/css/mod_jem_banner/cards-places.css
templates/YOUR_TEMPLATE/css/mod_jem_banner/table-advanced.css
CSS Resolution Order
templates/YOUR_TEMPLATE/css/mod_jem_banner/LAYOUT.csstemplates/YOUR_TEMPLATE/html/mod_jem_banner/LAYOUT.cssmedia/mod_jem_banner/css/LAYOUT.cssmodules/mod_jem_banner/tmpl/LAYOUT.css
The first matching file replaces the supplied stylesheet for that basename. Copy the supplied CSS first when you want to preserve the original rules and adjust only selected declarations.
Colour and Icon Stylesheets
The Banner Module loads the selected layout stylesheet, a colour stylesheet and either the icon-font or icon-image stylesheet. They can be overridden with the same filename convention:
templates/YOUR_TEMPLATE/css/mod_jem_banner/red.css
templates/YOUR_TEMPLATE/css/mod_jem_banner/category.css
templates/YOUR_TEMPLATE/css/mod_jem_banner/iconfont.css
templates/YOUR_TEMPLATE/css/mod_jem_banner/iconimg.css
Because these are separate assets, inspect the browser's loaded CSS files and cascade when a colour or icon rule overrides a layout rule.
Additive JEM Module CSS
For small rules that should be loaded after the module assets and shared by JEM modules, use:
media/com_jem/css/custom/jem-user-module.css
This file is additive. A layout-specific template CSS file is a replacement for the supplied stylesheet with the same basename.
Legacy CSS Filenames in JEM 5.0.2 Beta 1
JEM 5.0.1 already supports the current paths and filenames documented above. JEM 5.0.2 Beta 1 additionally provides temporary compatibility for these known old Banner filenames:
| Legacy filename | Current filename |
|---|
mod_jem_banner.css |
default.css |
mod_jem_banner_cards.css |
cards.css |
mod_jem_banner_iconfont.css |
iconfont.css |
mod_jem_banner_iconimg.css |
iconimg.css |
mod_jem_banner_responsive.css |
responsive.css |
mod_jem_banner_table-advanced.css |
table-advanced.css |
Recommended action: rename or copy a legacy override to the current filename after checking that no current destination file will be overwritten. The compatibility fallback is transitional.
Configuration Examples
- Events Display-Type: Upcoming events
- Events in module: 3
- Max. days: 60
- Displayed image: Thumbnail
- Show Description: Yes
- Max description length: 150
- Alternative Layout: cards
- Featured events only: Yes
- Events Display-Type: Upcoming events
- Events in module: 3
- Shuffle events: Yes
- Shuffle pool limit: 20
- Colour: from Category
- Show More Information: Button
- Events Display-Type: Today's events
- Time offset: 0
- Venues: Select the required venue
- Show Venue: Yes
- Date Display-Type: Show day difference
- Show “No events”: Yes
- Alternative Layout: responsive
- Events Display-Type: Unfinished events
- Categories: Courses and workshops
- Show Category: Yes
- Show Venue: Yes
- Image ratio: 16:9
- Alternative Layout: cards-places
- Event requirement: registration and capacity configured
- Event ID: Enter the required event ID
- Events in module: 1
- Event image source: Full/Detail image
- Displayed image: Original Limited
- Maximum width / height: 1200 / 800
- Flyer links to: Event's details view
- Show Description: Yes
- Events Display-Type: Open date events
- Events in module: 5
- Show Calendar: No
- Show Flyer: Yes
- Show intro text: Yes
- Intro text: Dates will be announced soon.
- Alternative Layout: default
Frontend Behaviour and Limitations
- Category, venue, event-ID, county, featured and access filters are applied before the final visible event count.
- Upcoming and unfinished results are normally ordered from the nearest to later dates; archived results use reverse chronological order.
- Long titles and descriptions are shortened according to the configured limits and layout presentation.
- Event, venue, category and type links are generated only when the corresponding option, data and access context allow them.
- Image ribbons and text badges require both the JEM Basic Settings status switch and the module's Show status indicators option.
- The supplied layouts differ deliberately; an option can be available in the module form but unused by a layout that does not contain that presentation block.
- Complete canonical Event structured data belongs to the JEM event-detail page, where the full event, location and schedule are available.
- Module caching can delay changes to events, filters, access results and status indicators until the cache expires.
Troubleshooting
| Problem | Likely cause | Checks |
|---|
| No events are shown. |
No matching events, restrictive filters, access rules or hidden empty output. |
Check publication state, access, display type, dates, categories, venues, event IDs, county and featured-only filtering. |
| An event in progress is missing. |
Upcoming events excludes an event whose start has passed. |
Use Unfinished events when running events should remain visible. |
| The wrong day appears in Today's mode. |
The offset is converted to complete days. |
Use multiples of 24 hours and verify the Joomla timezone. |
| The flyer is missing. |
No valid selected source image, Show Flyer disabled, or the selected layout has different image behaviour. |
Check both event image fields, Event image source, Show Flyer and the layout matrix. |
| The image is soft or downloads too much data. |
Displayed image does not match the module size. |
Use Thumbnail for small blocks or lower the Original Limited dimensions. |
| The image modal does not open. |
Wrong flyer link action, JavaScript conflict or custom override. |
Select Image in modal window, test a supplied layout and check the browser console. |
| Category colour is not used. |
No usable category colour or multiple different category colours. |
Assign one unambiguous category colour or configure a suitable fallback. |
| Event type is missing. |
The event has no type or the selected layout does not display it. |
Assign a type and use Cards or Table Advanced. |
| Available places are missing. |
The selected layout is not Cards Places or registration/capacity is not configured. |
Use cards-places and set a positive event capacity with registration enabled. |
| More information is missing. |
No associated article, inaccessible article, disabled option or unsupported layout. |
Check the association, article access, module option and layout matrix. |
| A CSS override is ignored. |
Wrong active template, directory, layout basename, filename case or cached CSS. |
Confirm templates/TEMPLATE/css/mod_jem_banner/LAYOUT.css and clear Joomla, browser and optimisation caches. |
| Changes appear late. |
Module, Joomla, template, CDN or browser caching. |
Temporarily disable module caching and clear every active cache layer. |
Appendix: What Is New in JEM 5.1.0 Beta 4
Beta notice: JEM 5.1.0 Beta 4 is a development release. Test it on a staging website and keep a full backup before using it with production data.
Event Hierarchy Filter
JEM 5.1.0 Beta 4 adds the Event hierarchy option. It controls whether a Banner instance includes parent events, programme items/subevents or both:
| Value | Behaviour |
|---|
| Calendar default |
Uses JEM's normal calendar hierarchy policy. |
| Parent events only |
Shows top-level events and excludes their child programme items. |
| Subevents only |
Shows programme items and excludes their parent events. |
| Parent events and subevents |
Includes both hierarchy levels in the filtered event pool. |
- Event hierarchy: Subevents only
- Events Display-Type: Unfinished events
- Categories: Conference programme
- Events in module: 6
- Image ratio: 16:9
- Alternative Layout: cards
Thumbnail as the New-Instance Default
For new Banner instances, JEM 5.1.0 Beta 4 defaults Displayed image to Thumbnail. This is the lighter choice for event cards. Administrators can still select Original Limited when the design requires it.
Clearer Open-date Description
The Events Display-Type help text now correctly identifies the final selection as open-date events. The selectable value and its actual behaviour remain Open date events.
Current CSS Filenames
JEM 5.1.0 uses the current layout filenames at runtime and does not retain the temporary legacy-filename fallback from JEM 5.0.2. The JEM Control Panel/CSS Manager detects known legacy module overrides and offers an explicit migration. It does not overwrite an existing destination and reports conflicts or unwritable paths.
Structured Data Responsibility
The supplied Banner layouts no longer emit incomplete per-item Event microdata. Complete canonical Event structured data belongs to the event-detail page. Removing partial module markup avoids presenting multiple incomplete Event entities on listing pages.
Related Documentation
GitHub References
