Events Blog displays JEM events as a responsive grid of image cards. It is designed for visual programmes, cultural agendas, tourism websites and event directories where visitors should discover events by image, date, category, venue, event type or country.
Available in JEM 5.0.1 and later. Events Blog is a separate frontend menu view. It uses the same JEM event records and access rules as other event views; it does not create a second copy of an event.
Purpose
Visitors use Events Blog to browse an image-led programme and progressively narrow the result by date, category, venue, event type or country. Each card links to the normal JEM Event Details view.
How Administrators Use It
Administrators create an Events Blog Joomla menu item, choose the card layout, decide which visitor controls are visible, define the permitted event scope and optionally display registration actions. These menu options affect only this page and do not modify the underlying events.
Typical Use Cases
- A visual main events page with four image cards per desktop row.
- A fixed This weekend tourism or leisure landing page.
- A category, venue, event-type or country programme with a hidden fixed scope.
- An international directory where visitors combine several visible filters.
- A registration-oriented programme that identifies available, waiting-list, sold-out and closed events.
When to Use Events Blog
| Requirement | Recommended view | Reason |
|---|
| Visual event discovery with large images |
Events Blog |
Responsive cards make images and key event information easy to scan. |
| Searchable or sortable data table |
Events List |
A structured list is better when visitors compare many event fields. |
| Compact chronological overview |
Simple List |
A compact list uses less vertical space and gives priority to dates and titles. |
| Geographical discovery |
Events Map |
A map is better when location and distance are the primary selection criteria. |
| Month, week or year planning |
Calendar views |
Calendars place events within a visible date grid. |
Create the Menu Item
In the Joomla administrator, open Menus, select the required site menu and create a new menu item. Choose:
Menus → New → JEM → Events Blog
The view is also included when Create JEM Menu is used from the JEM Control Panel. It is created in the JEM events menu group together with the other event views.
Configuration Workflow
1. Cards
Choose columns, image fit and ratio.
2. Dates
Select the default period.
3. Controls
Show only the visitor filters required.
4. Scope
Limit categories, venues, types or countries.
5. Actions
Enable registration actions where needed.
6. Verify
Test desktop, mobile and visitor access.
Card and Grid Options
| Option | Default | Purpose and behaviour |
|---|
Desktop columns
blog_columns |
4 |
Sets a maximum of 3, 4, 5 or 6 card columns on wide screens. The grid automatically reduces columns on smaller screens. When only one or two events are returned, the desktop layout keeps a minimum three-track grid instead of stretching each card across the full page. |
Card image adjustment
blog_image_fit |
Automatic |
Controls how the image occupies its configured area. Automatic covers and centres the area; Height priority fits by height; Width priority fits by width. |
Image ratio width
blog_image_ratio_width |
1 |
Defines the horizontal part of the card image ratio. Allowed values are 1 to 20. |
Image ratio height
blog_image_ratio_height |
1 |
Defines the vertical part of the card image ratio. A width and height of 1 produces a square; 16 and 9 produces a widescreen area. |
Events per page
blog_events_per_page |
12 |
Sets the maximum cards on each page. Allowed values are 1 to 100. Standard pagination is shown when more matching events exist. |
Image fit and ratio work together. Automatic mode may crop part of an image to fill the complete area. Use Height or Width priority when showing the whole dimension is more important than filling the card. Test portrait and landscape flyers before publishing the menu item.
Visible Visitor Filters
Each of the five frontend filters can be shown or hidden independently. All controls submit automatically when their value changes; there is no Apply or Reset button.
| Option | Default | Visitor control | When hidden |
|---|
Show date filter
blog_show_date_filter |
Yes |
Displays All dates, Today, Tomorrow, This week, This weekend and Next week buttons. |
The configured Default date filter remains active as a fixed period. |
Show category filter
blog_show_category_filter |
Yes |
Displays a category selector. |
Configured Available categories still limit the results. |
Show venue filter
blog_show_venue_filter |
Yes |
Displays a venue selector. |
Configured Available venues still limit the results. |
Show event type filter
blog_show_type_filter |
Yes |
Displays an event type selector. |
Configured Available event types still limit the results. |
Show country filter
blog_show_country_filter |
Yes |
Displays a venue-country selector. |
Configured Available countries still limit the results. |
Visible control and event scope are separate. Hiding a selector removes the visitor's choice; it does not remove the categories, venues, types or countries configured as fixed limits. URL values submitted manually for a hidden filter are ignored, preventing an invisible visitor filter from changing the page.
Date Periods
Date periods use civil dates in the configured Joomla timezone. Multi-day events are included when their date range overlaps the selected period.
| Period | Result | Typical use |
|---|
| All dates |
Uses the normal JEM event-list lifecycle without an additional Blog period boundary. |
Main visual event directory. |
| Today |
Events occurring today. |
What's on today page. |
| Tomorrow |
Events occurring tomorrow. |
Short-term planning. |
| This week |
Events overlapping Monday through Sunday of the current week. |
Weekly programme. |
| This weekend |
Events overlapping Saturday or Sunday of the current week. |
Leisure and tourism landing page. |
| Next week |
Events overlapping Monday through Sunday of the next week. |
Advance programme. |
Default date filter (blog_default_period) selects the initial period. If the date buttons are hidden, this value becomes the fixed period for the menu item.
Available Event Filters and Fixed Scope
The following multi-selection fields determine which values the menu item allows. Leave a field empty to allow every published and accessible value.
| Option | Empty selection | One or more selected values |
|---|
Available categories
blog_filter_categories |
All accessible published categories can contribute events and appear in the selector. |
Only events in the selected categories are included; visitors can choose only from those categories when the selector is visible. |
Available venues
blog_filter_venues |
All accessible published venues are available. |
Only events assigned to the selected venues are included. |
Available event types
blog_filter_types |
All accessible published event types are available. |
Only events assigned to the selected event types are included. |
Available countries
blog_filter_countries |
All countries used by accessible published venues are available. |
Only events whose venue uses one of the selected countries are included. |
Menu scope → JEM access and publication rules → visitor selection → date-ordered results → responsive cards
Filter Combinations
| Configuration | Result |
|---|
| Category selector visible; no Available categories selected |
Visitors can choose any accessible published category. |
| Category selector visible; Music and Theatre selected |
The page contains only those categories and visitors may switch between them or show both. |
| Category selector hidden; Music and Theatre selected |
The page is permanently limited to Music and Theatre without showing a category control. |
| Country selector hidden; Spain selected |
The page becomes a Spain-only programme without exposing a redundant country selector. |
| Date filter hidden; This weekend selected as default |
The menu item always acts as a This weekend landing page. |
| All five filters hidden; no scope selected; All dates |
A clean visual event grid is displayed with no frontend filtering controls. |
| Venue, type and country filters visible; each has an allowed subset |
Visitors can combine selections, but only within the editorial scope configured for the menu item. |
Information Shown on Each Card
Image
The event image or JEM's fallback image. Selecting it opens Event Details.
Date and time
Formatted according to JEM settings, including an end date or time when available.
Category
The first available event category is displayed as a compact label.
Title and status
The title links to Event Details. Compatible state badges identify relevant event conditions.
Location
Venue and city are shown when that data exists.
Registration
An optional action indicates Register, Join waiting list, Sold out or Registration closed.
Registration Action
Show registration action (blog_show_registration) is enabled by default. The action is shown only for events with registration enabled.
| Event state | Card action | Behaviour |
|---|
| Registration open and places available |
Register |
Opens Event Details, where JEM completes the normal registration workflow. |
| Capacity reached and waiting list available |
Join waiting list |
Opens Event Details for the waiting-list workflow. |
| No effective availability |
Sold out |
Shows a disabled status action. |
| Registration date window closed |
Registration closed |
Shows a disabled status action. |
| Registration disabled for the event |
No action |
The event card remains visible without a registration button. |
| Show registration action set to No |
No action |
Registration remains available from Event Details when otherwise permitted. |
Page Text Options
| Option | Default | Position and use |
|---|
Show Introtext
showintrotext |
No |
Controls text below the page heading and above the filters. Use it to describe the programme, area or date scope. |
Introtext
introtext |
Empty |
Joomla editor content for the introduction. |
Show footer text
showfootertext |
No |
Controls text below the event grid and pagination. |
Footer Text
footertext |
Empty |
Joomla editor content for disclaimers, submission links or editorial notes. |
Practical Examples
- Desktop columns: 4.
- Image ratio: 4:3; Automatic fit.
- Default period: This weekend; date filter visible.
- Category and event type filters visible.
- Venue and country filters hidden when the guide covers one local area.
- Select the required venues under Available venues.
- Hide the Venue filter when visitors should see the combined programme.
- Show it when visitors should be able to choose one venue from that limited group.
- Show the date and category filters.
- Show date, category, event type and country filters.
- Show venue filter only when the available venue list is manageable.
- Use 12 or 24 events per page and verify pagination performance.
- Select Available countries when the menu item should cover a defined region only.
- Hide all five visitor filters.
- Configure the required categories, venues, types and countries as fixed scope.
- Choose the fixed Default date filter.
- Use Introtext to explain the curated programme.
Responsive Behaviour and Accessibility
- The grid reduces its columns automatically as the viewport becomes narrower and uses a single column on small screens.
- Filter controls wrap and become full width where required on mobile devices.
- Date filters use native form controls with visible selected and keyboard-focus states.
- Every selector has an accessible label even though the visual interface uses compact placeholder text.
- The result count is announced as filter results change.
- Do not rely on the event image alone. Event title, date and applicable location remain textual.
- Test custom template colours for sufficient contrast, especially the active date button and featured-card border.
Access and Visibility
Events Blog uses JEM and Joomla access rules. The view does not bypass event, category, venue or type visibility. Filter choices are populated only from published records that the current visitor is authorised to view.
Always test as a guest. A Super User may see events and filter values that are correctly unavailable to anonymous or registered visitors. Use a private browser window when verifying the public menu item.
Troubleshooting
| Problem | Likely cause | Check |
|---|
| No events are shown. |
The fixed period and selected scopes have no common events, or access/publication rules exclude them. |
Temporarily use All dates, clear the Available filters and test as the intended visitor. |
| A selector contains fewer values than expected. |
Available filters, publication state or access levels limit its options. |
Review both the menu scope and the category, venue or type record. |
| A filter is hidden but the page remains limited. |
This is the intended fixed-scope behaviour. |
Clear its Available values if the menu item should include every value. |
| Images are cropped. |
Automatic fit covers the configured ratio. |
Change the ratio or select Height or Width priority. |
| Cards are too narrow. |
The desktop maximum or page content width is too high for the active template. |
Reduce Desktop columns and test template sidebars. |
| No Register button is shown. |
Registration is disabled, the menu action is hidden or the event is not currently registerable. |
Review Show registration action, event registration settings, dates, capacity and permissions. |
| Country is missing. |
No accessible published venue uses that country. |
Review the venue country, publication state and access level. |
Customization
Start with the menu options before creating a template override. Visual changes can be applied through JEM custom CSS or the active Joomla template. The packaged stylesheet is media/com_jem/css/eventsblog.css; preserve local customizations outside packaged files so updates do not overwrite them.
Useful CSS selectors include .jem-eventsblog, .jem-eventsblog-filters, .jem-eventsblog-periods, .jem-eventsblog-selects, .jem-eventsblog-grid, .jem-eventsblog-card, .jem-eventsblog-image and .jem-eventsblog-card-action.
Related Documentation
- Frontend Events — index of event-related frontend views.
- Events List — structured event listing and search.
- Simple List — compact chronological listing.
- Events Map — geographical event discovery.
- Event Details — complete event information and registration workflow.
- Add Event — event images, dates, venue, categories and registration settings used by the cards.
Operational Checklist
- Confirm the Joomla menu access level and the page heading.
- Test every enabled filter separately and in combination.
- Confirm that hidden filters retain only the intended fixed scope.
- Verify cards with missing, portrait, landscape and unusually large event images.
- Test one, two, three and more events at desktop, tablet and mobile widths.
- Test registration, waiting-list, sold-out and closed-registration states.
- Repeat the visibility test as a guest and as a registered user.
Compatibility Notes
Events Blog is documented for JEM 5.0.1 and later on supported Joomla versions. It preserves the normal JEM event, category, venue and type access rules. Template overrides and custom CSS may change its visual result, so verify the active Joomla template after updating JEM.
Source Material
- Menu options:
site/views/eventsblog/tmpl/default.xml
- Frontend layout:
site/views/eventsblog/tmpl/default.php
- Filtering and date ranges:
site/models/eventsblog.php
- Responsive card styling:
media/css/eventsblog.css
Top 5 GitHub References
