Introduction
Smart Content Filter (v1.4.2) is a Joomla site module that displays standard com_content articles as responsive, AJAX-powered content cards with category filtering, search, tags, sorting, load more, infinite scroll, custom fields, share buttons, image lightbox, and extensive styling controls.
The module works with native Joomla articles and categories. It does not require a custom content table, page reloads, or jQuery.
Key Highlights
- AJAX filtering without full page reloads
- Filters Display: always show, hide completely, or a Filters toggle beside the grid/list controls
- Filters tab grouped into Filter Panel, Category, Search, Tags, Author/Date/Custom Fields, and Sort/View/Reset
- Category filters as Tabs, Pills, or Dropdown, with a switch to hide the category filter while keeping the rest
- Tag filters as Dropdown or clickable Pills, with single or multi-select and OR/AND match
- Polished filter toolbar (search with icon, sort, Reset) with CSS protected against template overrides while module CSS is enabled
- Optional subcategory tabs, author filter, date range filter, and dual custom field filters
- Grid / List view toggle with URL and cookie persistence
- Layout presets: Standard Grid, News Portal, Magazine, List, Masonry, and Carousel
- Lead story support with automatic or manual title-on-image overlays
- Intro Text Format: Plain text or Safe HTML for styled catalogue intros
- Card images from intro/full article images or a custom media/URL field
- Shareable Filter URLs: only active filters are written to the query string (for example
?scf_143_tag=16), so filtered views stay short and easy to bookmark or share
- Load More or Infinite Scroll with that same URL state restored on reload
- Sticky filter toolbar and sticky Load more bar while scrolling
- Card presets, borders, padding, shadows, hover effects, UI corners, and theme options
- Share on X, Facebook, and LinkedIn; optional image lightbox
- JSON-LD schema, skeleton loading, and accessible live regions
- Multiple module instances on the same page
- Joomla 5 and Joomla 6 ready
Admin Tabs
Module settings are grouped as: Content Source, Filters, Ordering, Article Arrangement, Card Appearance, Card Content, and Advanced.
Installation
System Requirements
- Joomla: Joomla 5.x or Joomla 6.x
- PHP: PHP 8.1 or newer recommended
- Content Component: Standard Joomla
com_content articles and categories
Install the Module
- Log in to the Joomla administrator area.
- Go to System > Install > Extensions.
- Upload and install the Smart Content Filter package.
- Open Content > Site Modules.
- Find Smart Content Filter and open the module.
- Set the module status to Published.
- Select a template position that exists in your template.
- Assign the module to the required menu items.
- Save the module and refresh the frontend.
After Installation
Select one or more Joomla article categories under Content Source. If no category is selected, the module can display articles from all accessible content categories.
For development and testing, disable module caching while adjusting styles so changes appear immediately.
Content Source
The Content Source tab controls which articles enter the module pool.
Category Selection
- Categories: Choose the Joomla article categories available as frontend filters and as the content pool.
- Include Child Categories: Includes articles from child categories under the selected categories.
- Exclude Categories: Remove specific categories from the article pool.
- Exclude Article IDs: Hide individual articles by ID (comma-separated).
- Filter by Current Language: Optionally limit results to the active site language.
- Featured Articles: Show all, hide featured, or show only featured articles.
- Items Per Load: Number of articles loaded per AJAX request (1–100).
Links to Your Articles
After you save, this tab reports whether Joomla can build short links to the listed articles. Joomla shortens an article URL only where a published Articles menu item covers the article category or one of its parents. Where none exists, Joomla falls back to /component/content/article/my-article?catid=8&Itemid=101, which works but is untidy, and no module can shorten it because the com_content router owns that decision.
The notice names the menu item Joomla will route through, or lists the categories that have none. To fix missing coverage, add one Articles menu item of type Category Blog or Category List for the parent category, and set Display in Menu to No if you do not want it in your navigation.
Article Requirements
- Articles must be published.
- Articles must be within the selected categories, or within child categories when enabled.
- Article access level must be available to the current visitor.
- Article language must match the current site language or be set to All.
- Publish up and publish down dates are respected.
Frontend filter chrome (Show All, category style, Filters Display) lives on the Filters tab. Card image and intro options live on Card Content.
Filters & Sorting
Everything visitors use to narrow results lives on the Filters tab. Settings there are grouped to match the admin form. Default sort lives on Ordering.
Filter Panel
- Filters Display: Always show, Hide filters (no filter UI), or Toggle button beside the grid/list controls.
- Filters Toggle Default: Start Open or Closed when Toggle button is used.
- Sticky Filter Toolbar: Keeps filters, results count, and the Load more bar visible while scrolling.
- Show Results Count: Live count such as
Showing 6 of 24.
- Empty State Message: Custom text when no articles match.
- Shareable Filter URLs: Persist category, search, tag(s), sort, view mode, and page in the query string. Only active filters are written, so a single tag filter reads
?scf_143_tag=16 instead of a full parameter list. Reset clears the module's filter parameters from the URL.
Category Filter
- Enable Category Filter: Set to No to hide the category tabs, pills, or dropdown and keep the other filters. The listing still shows the categories selected on Content Source.
- Show All Filter: Adds an All option before category filters.
- Category Filter Style: Tabs (underline bar), Pills (filled chips), or Dropdown.
- Enable Subcategory Drill-down: Shows child category tabs when a parent category is selected.
Search
- Enable Search: Filters articles by title, intro, or both depending on Search Scope.
Tag Filter
- Enable Tag Filter: Shows tags used in the module article pool.
- Tag Filter Style: Dropdown (default) or clickable Pills for catalogue-style browsing.
- Tag Selection: Single (default) or Multiple.
- Tag Match Mode (multiple only): Match any selected tag (OR) or Match all selected tags (AND).
- Show All Tags: Clears the active tag filter.
- Include Tags / Exclude Tags: Limit the list by tag ID, name, or title.
- For tag-led catalogues, use Tag Pills + Multiple and set Enable Category Filter to No.
Author, Date & Custom Fields
- Enable Author Filter: Filter by article author.
- Enable Date Filter: Filter by publish date range.
- Frontend Custom Field Filters: Up to two custom fields as text or select filters.
Sort, View & Reset
- Enable Sorting: Frontend sorting dropdown (Default, Newest, Oldest, Title A-Z, Title Z-A, Featured First, Manual Ordering).
- Grid/List Toggle: Optional icon toggle in the top-right chrome, with a default view mode.
- Show Reset Button: Clears filters and category state. Choose Text or Icon display.
Ordering Tab
- Ordering and Direction: Server-side fallback sort field and direction when the visitor has not chosen a frontend sort.
Layout & Views
Layout presets, columns, and load behaviour are on Article Arrangement. Grid/List toggle controls are on Filters.
Layout Presets
- Standard Grid: Classic responsive card grid.
- News Portal: Full-width lead story with horizontal image and content split on desktop.
- Magazine: Large lead story with smaller supporting cards in a publishing-style grid.
- List: Single-column rows with thumbnail and text side by side.
- Masonry: Multi-column masonry-style card flow.
- Carousel: Horizontally scrollable card strip.
Lead Story Options
- Lead Mode: Use the first article or the first featured article as the lead card.
- Overlay Lead Automatically: Places title and meta over the lead image in News Portal and Magazine presets.
- Title Overlay on Image (Card Appearance): Force title-on-image overlay for overlay cards.
Responsive Columns & Loading
- Columns: Desktop column count (1–4).
- Tablet Columns: Tablet column count (1–3).
- Mobile Columns: Mobile column count (1–2).
- Grid Gap: Spacing between cards.
- Loading Style: Load More Button or Infinite Scroll.
- Prefetch Next Page: Optionally preloads the next page in the background.
- Show Section Headings: Optional headings when grouping by category.
Grid / List Toggle
- Enable under Filters, then set Default View Mode to Grid or List.
- View preference is stored in a cookie and can be restored from the URL when Shareable Filter URLs is enabled.
Card Content & Images
What appears on each card is configured on the Card Content tab. Visual polish (ratio, hover, lightbox) is on Card Appearance.
Images
- Show Image: Turn card images on or off.
- Image Source:
- Intro, then full image
- Intro image only
- Full image only
- Custom field only (media or URL custom field)
- Custom field, then intro/full fallback
- Image Custom Field: Field ID, name, or title when using a custom image source.
- Fallback Image: Module-level image when an article has none.
- Article image URLs are normalised (Joomla
#joomlaImage:// suffixes are stripped).
- Image Ratio and Enable Image Lightbox are under Card Appearance.
If your template only exposes a Featured Image control, check whether that value is stored as the article intro/full image or in a custom field, then set Image Source accordingly.
Intro Text
- Show Intro Text: Show or hide the intro on cards.
- Intro Text Format: Plain text (default, tags stripped) or Safe HTML (sanitised markup such as paragraphs, links, lists, spans, classes, and inline styles).
- Intro Text Limit: Character limit. Use 0 to keep the full intro.
- Use Fulltext When Intro Is Empty: Fall back to full article text when intro is blank.
Meta & Actions
- Category, date, modified date, date format, author, tags, hits, reading time, featured badge, and display custom fields.
- Read more link (label and target), share buttons, and title heading level (H2–H5).
Styling
Visual styling lives on Card Appearance. CSS overrides live on Advanced.
Card Appearance
- Theme Preset: Default or Dark surface colors.
- Card Style: Default, Outlined, Flat, or Compact presets with distinct borders and shadows.
- UI Corners: Rounded or Squared corners for Read more, Load more, category tabs, view toggle, search fields, and filter controls.
- Accent Color, Card Background Color, Card Border Color, Card Border Width
- Card Radius: Corner rounding for cards (0–48 px).
- Card Body Padding: Inner padding around card text (0–48 px). Leave at 0 to use the preset default.
- Card Shadow: None, Soft, Medium, or Strong.
- Hover Shadow: None, Soft, Medium, Strong, Boost, or Same as resting shadow.
- Hover Lift: Vertical lift on card hover (0–16 px). Set to 0 with Hover Shadow None and Image Hover None for a static card.
- Equal Card Height: Stretches cards in each row to the same height.
- Button Style: Filled, Outline, or Text for Read more and Load more.
- Image Ratio: 16:10, 4:3, 1:1, or 3:4.
- Title Overlay on Image, Image Hover Effect (Zoom, Brighten, Grayscale, or None), Enable Image Lightbox
Typography
- Title Font Size, Title Font Weight, and Title Line Clamp
- Meta Font Size for dates, categories, and card meta
Filter Toolbar
- Search uses an in-field icon, sort uses a custom chevron, and Reset is a compact control aligned with the fields.
- While module CSS is enabled, toolbar input styles are scoped to the module wrapper and resist common template overrides (for example Helix Ultimate search padding).
Advanced CSS
- Disable Module CSS: Turns off the bundled stylesheet. Only then can template styles fully restyle the filter toolbar.
- Module Class Suffix: Adds a custom class to the module wrapper.
- Custom CSS: Module-specific CSS with a
{module} placeholder for the wrapper ID.
Example: {module} .scf-card { border-width: 2px; }
AJAX & UX
How AJAX Works
Smart Content Filter uses Joomla's com_ajax endpoint. The frontend script sends the module ID, category, filters, sort option, view mode, page offset, and load-more page. The server returns updated article card HTML using that module instance's saved settings.
Loading Modes
- Load More Button: Appends the next batch of articles. The current page is stored in the URL when shareable state is enabled.
- Infinite Scroll: Loads more articles automatically near the bottom of the list.
- Prefetch Next Page: Optionally preloads the next page in the background (Article Arrangement).
URL State & Persistence
- Shareable Filter URLs (Filters tab, Filter Panel): Stores category, search, tag(s), sort, view mode, and load-more page in the query string as
scf_{moduleId}_* parameters.
- Only filters that differ from their defaults are written. A single tag filter becomes
?scf_143_tag=16. Adding a search on top becomes ?scf_143_tag=16&scf_143_search=H21001.
- Reset clears that module's filter parameters from the URL and leaves unrelated query parameters untouched.
- Filtered views can be bookmarked, shared, and restored on reload.
- Grid/List preference is also stored in a per-module cookie.
- To stop writing filter parameters altogether, set Shareable Filter URLs to No. Filtered views can then no longer be bookmarked or preselected by link.
UX Options
- Skeleton Loading and Filter Transitions (Advanced)
- Sticky Filter Toolbar, Empty State Message, and Filters Display (Filters)
- Output JSON-LD Schema (Advanced)
Multiple Instances
Each module instance uses its own wrapper, module ID, AJAX state, CSS variables, and URL parameters (scf_{id}_*). Multiple instances can run on the same page independently.
Custom Fields
Displaying Custom Fields
Use Display Custom Fields on Card Content to show selected Joomla custom fields on article cards. Enter field IDs, names, or titles separated by commas.
Example: audience, level, location
Filtering by Custom Fields
Configure up to two Frontend Custom Field Filters on the Filters tab. Each supports Auto, Text, or Dropdown input depending on the filter type setting.
Card Images from a Custom Field
If images are stored in a media or URL custom field (for example a template Featured Image field), set Image Source to Custom field only or Custom field, then intro/full, and enter the field ID, name, or title in Image Custom Field.
Field Matching
- Field ID is the most precise option.
- Field name is useful for portable configuration between sites.
- Field title works when editors recognize the label more easily than the field name.
Recommended Use Cases
- Audience or user type
- Difficulty level
- Location or region
- Department or product type
- Resource format or any structured article metadata
- Template Featured Image stored as a custom field
Parameter Reference
Complete list of every module parameter as shown in the Joomla administrator, grouped by tab.
Content Source
- Categories (
catid): Joomla article categories used as filters and as the content pool.
- Include Child Categories (
include_children): Include articles from nested child categories.
- Exclude Categories (
exclude_catid)
- Exclude Article IDs (
exclude_article_ids): Comma-separated article IDs.
- Filter by Current Language (
filter_language)
- Featured Articles (
show_featured): Show all, hide featured, or show only featured.
- Items Per Load (
count): Number of articles loaded per AJAX request (1–100).
Filters
Grouped in the admin form as Filter Panel, Category Filter, Search, Tag Filter, Author/Date/Custom Fields, and Sort/View/Reset.
Filter Panel
- Filters Display (
filters_display): Always show, Hide filters, or Toggle button.
- Filters Toggle Default (
filters_toggle_default): Open or Closed when Toggle button is used.
- Sticky Filter Toolbar (
sticky_toolbar)
- Show Results Count (
show_results_count)
- Empty State Message (
empty_state_message)
- Shareable Filter URLs (
enable_url_state): Writes only active filters to the query string (for example ?scf_143_tag=16). Reset clears them.
Category Filter
- Enable Category Filter (
enable_category_filter): Set to No to hide the category filter and keep the rest.
- Show All Filter (
show_all)
- Category Filter Style (
category_filter_style): Tabs, Pills, or Dropdown.
- Enable Subcategory Drill-down (
enable_subcategory_filter)
Search
- Enable Search (
enable_search)
- Search Scope (
search_scope): Title, Intro text, or Title and intro.
Tag Filter
- Enable Tag Filter (
enable_tag_filter)
- Tag Filter Style (
tag_filter_style): Dropdown or Pills.
- Tag Selection (
tag_selection): Single or Multiple.
- Tag Match Mode (
tag_match): Match any (OR) or Match all (AND).
- Show All Tags (
show_all_tags)
- Include Tags (
include_tag_ids): Optional IDs, names, or titles.
- Exclude Tags (
exclude_tag_ids): Optional IDs, names, or titles.
Author, Date & Custom Fields
- Enable Author Filter (
enable_author_filter)
- Enable Date Range Filter (
enable_date_filter)
- Frontend Custom Field Filter (
custom_field_filter)
- Custom Field Filter Label (
custom_field_filter_label)
- Custom Field Filter Input (
custom_field_filter_type): Auto, Text, or Dropdown.
- Second Custom Field Filter (
custom_field_filter_2)
- Second Custom Field Filter Label (
custom_field_filter_2_label)
- Second Custom Field Filter Input (
custom_field_filter_2_type)
Sort, View & Reset
- Enable Sorting (
enable_sorting)
- Grid/List Toggle (
view_toggle)
- Default View Mode (
default_view_mode): Grid or List.
- Show Reset Button (
show_reset)
- Reset Button Style (
reset_display): Text or Icon.
Ordering
- Ordering (
ordering): Default server-side sort field (publish date, created, modified, title, or manual ordering).
- Direction (
direction): Ascending or Descending.
Article Arrangement
- Article Arrangement (
layout_preset): Grid, News Portal, Magazine, List, Masonry, or Carousel.
- Apply Preset Defaults (
apply_preset_defaults)
- Lead Story Mode (
lead_mode): First result or Featured first.
- Overlay Lead Automatically (
overlay_lead_auto)
- Section Headings on All (
show_section_headings)
- Columns (
columns): Desktop columns (1–4).
- Tablet Columns (
columns_tablet): 1–3.
- Mobile Columns (
columns_mobile): 1–2.
- Grid Gap (
grid_gap): 0–64 px.
- Loading Style (
load_behavior): Load More Button or Infinite Scroll.
- Prefetch Next Page (
prefetch_next)
Card Appearance
- Theme Preset (
theme_preset): Default or Dark.
- Card Appearance (
card_style): Default, Outlined, Flat, or Compact.
- UI Corners (
ui_corners): Rounded or Squared.
- Accent Color (
accent_color)
- Card Background Color (
card_bg_color)
- Card Border Color (
card_border_color)
- Card Border Width (
card_border_width): 0–8 px.
- Card Radius (
card_radius): 0–48 px.
- Card Body Padding (
card_body_padding): 0–48 px.
- Card Shadow (Resting) (
card_shadow)
- Card Shadow (Hover) (
hover_shadow)
- Hover Lift (
hover_lift): 0–16 px.
- Equal Card Height (
equal_card_height)
- Button Style (
button_style): Filled, Outline, or Text.
- Image Ratio (
image_ratio): 16:10, 4:3, 1:1, or 3:4.
- Title Overlay on Image (
title_on_image)
- Image Hover Effect (
image_hover_effect): None, Zoom, Brighten, or Grayscale.
- Enable Image Lightbox (
enable_lightbox)
- Title Font Size (
title_font_size)
- Title Font Weight (
title_font_weight)
- Title Line Clamp (
title_lines): 0–6 lines; 0 disables clamping.
- Meta Font Size (
meta_font_size)
Card Content
- Show Image (
show_image)
- Image Source (
image_source): Intro then full, Intro only, Full only, Custom field only, or Custom field then intro/full.
- Image Custom Field (
image_custom_field): Field ID, name, or title.
- Fallback Image (
fallback_image)
- Show Intro Text (
show_intro)
- Intro Text Format (
intro_format): Plain text or Safe HTML.
- Intro Text Limit (
intro_limit): Character limit; 0 shows full intro.
- Use Fulltext When Intro Is Empty (
intro_fallback_fulltext)
- Show Category (
show_category)
- Show Date (
show_date)
- Show Modified Date (
show_modified_date)
- Date Format (
date_format): Optional PHP date format string.
- Show Author (
show_author)
- Show Tags on Card (
show_tags_on_card)
- Show Hit Count (
show_hits)
- Show Reading Time (
show_reading_time)
- Show Featured Badge (
show_featured_badge)
- Display Custom Fields (
display_custom_fields)
- Show Read More Link (
show_readmore)
- Read More Label (
readmore_label)
- Read More Target (
readmore_target): Same tab or New tab.
- Show Share Buttons (
enable_share_buttons)
- Title Heading Level (
heading_level): H2, H3, H4, or H5.
Advanced
- Alternative Layout (
layout): Joomla alternate module layout override.
- Module Class Suffix (
moduleclass_sfx)
- Disable Module CSS (
disable_css)
- Custom CSS (
custom_css): Use {module} as the wrapper placeholder.
- Skeleton Loading (
enable_skeleton)
- Filter Transitions (
enable_transitions)
- Output JSON-LD Schema (
enable_schema)
- Caching (
cache): Disabled or Use Global.
- Cache Time (
cache_time): Seconds when caching is enabled.
Note: image_hover_zoom is a legacy hidden field kept for backward compatibility. Use Image Hover Effect instead.