JEM Wide Module

Overview

The JEM Wide Module displays events in a wider format than the compact JEM Basic Module. It is designed for homepage sections, event landing pages and other template positions with enough horizontal space to present several event details together.

Depending on the selected layout, the module can display:

• Event title, date and time.
• Category and venue information.
• Venue city and county/state.
• Event and venue images.
• Featured-event highlighting.
• Event status indicators.
• Links to events, categories, venues and associated Joomla articles.
• Custom introductory and footer content.

Version Compatibility

Requirements

• JEM must be installed and enabled.
• The module requires Joomla 5.4 or later, or Joomla 6.x.
• Events must match the selected publication state, date mode, access level and filters.
• Venue and category data are required when the corresponding display or filter options are used.
• Event or venue images must be assigned if images are expected in the selected layout.

Where to Find It

1. Open the Joomla administrator.
2. Go to System → Manage → Site Modules.
3. Select New.
4. Choose JEM - Wide Module.
5. Select a template position with enough width for the required content.
6. Configure the event selection, display, image, layout and assignment options.

Module Options

Event Selection

Title and Event Links

Event Image Options

Category and Venue Display

Category and Venue Filters

Category and venue filters can be combined. An event must satisfy both filters when both are configured.

Date and Time Display

Introductory and Footer Content

Layout, Status and Cache Options

The Joomla module editor also provides the standard title, position, status, access, language, menu assignment, publication and display options.

Available Layouts

Module Class Options

The following classes can be entered in Module Class. Multiple values can be combined by separating them with spaces.

Example:

jem-nocats jem-noimagevenue jem-imagewidth180px

For new configurations, prefer the explicit Show Category and Show Venue options where possible. The class controls remain useful for layout-specific presentation.

Event Status Indicators

The module can present statuses configured in JEM, such as cancelled, postponed or moved events.

• When the event image is visible, the status can be presented as a ribbon over that image.
• If there is no event image but a venue image is available, the ribbon can be placed over the venue image.
• If no image is available, the supplied layout can display a status badge near the event title.
• The module option must be enabled and the corresponding indicators must also be enabled in JEM Basic Settings.

Template Layout Overrides

Copy the layout that you want to customise to your active site template:

/templates/YOUR_TEMPLATE/html/mod_jem_wide/default.php
/templates/YOUR_TEMPLATE/html/mod_jem_wide/responsive.php

Do not edit the original files inside /modules/mod_jem_wide/tmpl/, because a JEM update can replace them.

CSS Overrides

Current CSS Filenames

The current filenames are based on the layout or icon mode without the old module-name prefix:

/templates/YOUR_TEMPLATE/css/mod_jem_wide/default.css
/templates/YOUR_TEMPLATE/css/mod_jem_wide/responsive.css
/templates/YOUR_TEMPLATE/css/mod_jem_wide/iconfont.css
/templates/YOUR_TEMPLATE/css/mod_jem_wide/iconimg.css

Only one layout stylesheet and one icon stylesheet are loaded for a module instance:

• default.css or responsive.css, according to the selected layout.
• iconfont.css or iconimg.css, according to the JEM icon configuration.

Stylesheet Search Order

For each requested module stylesheet, JEM uses the first matching file in this order:

1. /templates/YOUR_TEMPLATE/css/mod_jem_wide/FILENAME.css
2. /templates/YOUR_TEMPLATE/html/mod_jem_wide/FILENAME.css
3. /media/mod_jem_wide/css/FILENAME.css
4. /modules/mod_jem_wide/tmpl/FILENAME.css

Shared User Module CSS

Small rules shared by several JEM modules can be placed in:

/media/com_jem/css/custom/jem-user-module.css

This file is loaded after the normal JEM module stylesheets. Use a template-specific stylesheet when a complete layout stylesheet must be replaced, and use jem-user-module.css for smaller additive changes.

Legacy CSS Filenames

• JEM 5.0.1: use the current filenames shown above.
• JEM 5.0.2 Beta 1: temporarily supports recognised legacy filenames while giving priority to current filenames.
• JEM 5.1.0 Beta 4: loads current filenames at runtime and does not retain the temporary legacy-filename fallback.

The JEM Control Panel and CSS Manager can detect known legacy module override files and offer an explicit migration. Migration is only performed with administrator approval, never overwrites an existing destination and reports conflicts or unwritable paths.

Configuration Examples

Frontend Behaviour

• Upcoming and unfinished published events are ordered by their start date and time.
• Archived events are ordered from newest to oldest.
• Today mode includes events whose date range covers the selected day.
• Category and venue access restrictions are respected.
• Event and venue links are only generated when the visitor has access.
• When no results are found, the module either displays the No events message or disappears according to its configuration.
• Cached results can remain visible until the configured cache expires.
• The responsive table-style presentation intentionally omits the image blocks used by the normal responsive list.

Troubleshooting

Accessibility and Presentation

• Keep event titles visible unless the surrounding context provides an equivalent accessible event name.
• Do not rely only on featured styling or ribbon colour to communicate important event information.
• Use meaningful event and venue names because they are also used as image alternative text and link labels.
• Check colour contrast after applying custom CSS.
• Test the selected layout with keyboard navigation and on narrow screens.
• Avoid excessive image dimensions when the module is used several times on the same page.

Appendix: What Is New in JEM 5.1.0 Beta 4

Event Hierarchy

JEM 5.1.0 Beta 4 adds the Event hierarchy option. It determines whether the module displays top-level events, programme items/subevents or both.

Current CSS Runtime Behaviour

JEM 5.1.0 Beta 4 uses the current CSS filenames at runtime. Legacy module CSS files can be detected and migrated through the JEM Control Panel/CSS Manager, but they are not silently selected by the frontend stylesheet loader.

Structured Data Responsibility

The supplied JEM 5.1.0 Wide layouts no longer emit incomplete Event microdata for every module item. Complete canonical Event structured data belongs on the event-detail page. This avoids presenting search engines with several incomplete Event entities from a single module listing.

Related Documentation

• JEM Module Layouts
• CSS Manager and module CSS overrides
• JEM System Requirements
• Download JEM 5.0.1 stable
• Download JEM 5.0.2 Beta 1 or JEM 5.1.0 Beta 4

GitHub References

• JEM 5.0.1 Wide Module source
• JEM 5.0.2 development source
• JEM 5.1.0 development source
• #2350 — JEM Wide mobile table layout
• #2344 — Configurable module image source and display
• #2335 — Configurable event-status indicators
• #2293 — Event programmes and hierarchy
• #1949 — Module CSS override filenames and migration
• #1885 — Time display in the Wide Module
• #1865 — Image lightbox functionality