Get Started

Smart Content Filter (v1.2.1) 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
• Category filters as Tabs, Pills, or Dropdown
• 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
• Load More or Infinite Scroll with shareable URL state
• Sticky filter toolbar and sticky Load more bar while scrolling
• Card presets, borders, padding, shadows, hover effects, UI corners, and theme options
• Image hover effects: Zoom, Brighten, Grayscale, or None
• 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

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

1. Log in to the Joomla administrator area.
2. Go to System > Install > Extensions.
3. Upload and install the Smart Content Filter package.
4. Open Content > Site Modules.
5. Find Smart Content Filter and open the module.
6. Set the module status to Published.
7. Select a template position that exists in your template.
8. Assign the module to the required menu items.
9. Save the module and refresh the frontend.

After Installation

Select one or more Joomla article categories in the module settings. 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.

Basic Setup

1. Create or choose Joomla article categories.
2. Add published articles with intro images where possible.
3. Open the Smart Content Filter module.
4. Select categories and set Items Per Load.
5. Choose a Layout Preset (start with Standard Grid or Magazine).
6. Pick Load More Button or Infinite Scroll.
7. Publish the module in a visible template position.

Recommended First Configuration

• Categories: Select 3 to 5 article categories.
• Include Child Categories: Enable for nested content trees.
• Show All Filter: Enable so visitors can return to the full list.
• Category Filter Style: Use Tabs for a classic underline bar or Pills for chip buttons.
• Items Per Load: Start with 6 or 9 cards.
• Apply Preset Defaults: Leave enabled when switching layout presets.
• Shareable Filter URLs: Leave enabled so filtered views can be bookmarked.

Category Selection

• Categories: Choose the Joomla article categories available as frontend filters.
• Include Child Categories: Includes articles from child categories under the selected categories.
• Show All Filter: Adds an All option before category filters.
• Exclude Categories: Remove specific categories from the article pool.
• Exclude Article IDs: Hide individual articles by ID.
• Filter by Current Language: Optionally limit results to the active site language.

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.

Images

The module reads standard Joomla article image data. Choose intro image, full image, or automatic fallback. Configure a module fallback image for articles without images.

Category Filter Styles

• Tabs: Classic underline tab bar. The active category is highlighted with an accent underline and light tint.
• Pills: Separate rounded chip buttons. The active category uses a filled accent background.
• Dropdown: Compact select menu instead of visible tabs.

Frontend Filters

• Enable Search: Filters articles by title, intro, or both depending on Search Scope.
• Enable Tag Filter: Dropdown of Joomla tags found in the module article pool.
• 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.
• Enable Subcategory Filter: Shows child category tabs when a parent category is selected.
• Show Reset Button: Clears filters and category state. Choose Text or Icon display.
• Show Results Count: Displays a live count such as Showing 6 of 24.
• Sticky Filter Toolbar: Keeps filters, category tabs, results count, and the Load more bar visible while scrolling.

Sorting

• Enable Sorting: Frontend sorting dropdown.
• Frontend Sort Options: Default, Newest, Oldest, Title A-Z, Title Z-A, Featured First, and Manual Ordering.
• Default Ordering and Direction: Server-side fallback ordering.

Featured Articles

The Featured Articles option can show all articles, hide featured articles, or show only featured articles. Cards can display an optional featured badge.

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: Force title-on-image overlay for overlay cards.

Grid / List Toggle

• View Toggle: Optional icon toggle in the top-right of the module.
• Default View Mode: Grid or List when the toggle is enabled.
• View preference is stored in a cookie and can be restored from the URL when Shareable Filter URLs is enabled.

Responsive Columns

• Columns: Desktop column count (1–4).
• Tablet Columns: Tablet column count (1–3).
• Mobile Columns: Mobile column count (1–2).

Card Content

• Images, intro text, category, date, modified date, author, tags, hits, reading time, custom fields, featured badge, read more link, share buttons, and lightbox.
• Equal Card Height: Stretches cards in each row to the same height.
• Show Section Headings: Optional headings when grouping by category.

Card Appearance

• Card Style: Default, Outlined, Flat, or Compact presets with distinct borders and shadows.
• Card Radius: Corner rounding for cards (0–48 px).
• Card Border Width: Border thickness in pixels. Set to 0 for no border.
• Card Border Color and Card Background Color: Optional hex overrides.
• Card Body Padding: Inner padding around card text (0–48 px). Leave at 0 to use the preset default.
• Grid Gap: Spacing between cards.
• Card Shadow: None, Soft, Medium, or Strong.
• Hover Shadow: Shadow on card hover — 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.
• Image Ratio: 16:10, 4:3, 1:1, or 3:4.
• Image Hover Effect: Zoom, Brighten, Grayscale, or None.

Buttons & Controls

• Button Style: Filled, Outline, or Text for Read more and Load more.
• UI Corners: Rounded or Squared corners for Read more, Load more, category tabs, view toggle, search fields, and filter controls.
• Accent Color: Highlight color for active filters, buttons, and links.
• Theme Preset: Default or Dark surface colors.

Typography

• Title Font Size, Title Font Weight, and Title Line Clamp
• Meta Font Size for dates, categories, and card meta

Advanced CSS

• Disable Module CSS: Turns off the bundled stylesheet.
• 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; }

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.

URL State & Persistence

• Shareable Filter URLs: Stores category, search, tag, sort, view mode, and load-more page in the query string.
• Filtered views can be bookmarked, shared, and restored on reload.
• Grid/List preference is also stored in a per-module cookie.

UX Options

• Skeleton Loading: Placeholder cards while AJAX requests run.
• Filter Transitions: Subtle fade when the grid updates.
• Sticky Filter Toolbar: Pins the filter area to the top and the Load more bar to the bottom of the viewport while scrolling results.
• Empty State Message: Custom text when no articles match.

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.

Displaying Custom Fields

Use Display Custom Fields 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. Each supports text search or a select dropdown depending on the filter type setting.

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

Common Uses

• Blog Sections: Browse posts by category, tag, search, and date with Tabs or Pills filters.
• News Rooms: Magazine or News Portal preset with a featured lead story.
• Portfolios: Masonry or Grid layouts with image hover effects and lightbox.
• Product Showcases: Card grids with custom field metadata and share buttons.
• Directories: List view with author and custom field filters.
• Documentation Hubs: Sticky toolbar, search, and shareable filtered URLs.
• Case Studies: Category pills, featured badges, and lead overlays.

Content Planning Tips

• Use clear category names — they become frontend filter labels.
• Use Joomla tags for cross-category themes.
• Use custom fields for structured values on cards and filters.
• Add consistent intro images for polished grids and list views.
• Keep intro text short; use Intro Text Limit for uniform card heights.

• What is the difference between Tabs and Pills?

  Tabs use an underline bar with a highlighted active tab. Pills use separate filled chip buttons. Dropdown replaces both with a select menu.

• Does the module create its own content type?

  No. It uses standard Joomla articles, categories, tags, featured state, custom fields, images, language, and access levels.

• Can I switch between Grid and List view?

  Yes. Enable View Toggle and choose a default view. The visitor preference is remembered per module.

• Can filtered views be shared?

  Yes. Enable Shareable Filter URLs so category, search, tag, sort, view mode, and load-more page appear in the URL.

• How do I turn off all card hover effects?

  Set Image Hover Effect to None, Hover Shadow to None, and Hover Lift to 0.

• Can I add padding inside cards?

  Yes. Use Card Body Padding in Card Appearance (0–48 px).

• Can I show share buttons and a lightbox?

  Yes. Enable Share Buttons and Enable Image Lightbox in the display settings.

• Does it support multiple modules on the same page?

  Yes. Each instance uses its own module ID, state, and scoped CSS variables.

• Does it require jQuery?

  No. The frontend uses vanilla JavaScript.

• Where do images come from?

  Joomla article intro and full images, with an optional module fallback image.

• Module does not appear: Confirm the module is published, assigned to the current menu item, placed in an existing template position, and visible to the current access level.
• No articles appear: Check publish state, categories, language, access level, and publish up/down dates. Review excluded categories and article IDs.
• Category filters are missing: Confirm categories are selected and published. If Show All Filter is disabled, only selected category filters appear.
• Tabs and Pills look the same: Hard-refresh the browser (Ctrl+F5). Tabs use an underline bar; Pills use filled chip buttons. Clear Joomla cache if needed.
• AJAX loading fails: Confirm com_ajax is available, the module is enabled, and no security extension blocks AJAX. Check the browser console and network tab.
• Load More page not remembered on reload: Enable Shareable Filter URLs. The URL should include scf_{moduleId}_page.
• List view layout broken: Hard-refresh after switching view mode. Ensure the View Toggle AJAX refresh completes.
• Sticky toolbar not working: Enable Sticky Filter Toolbar and ensure at least one filter or category control is visible. Hard-refresh after saving. Some template wrappers may require a cache clear.
• Card padding not applying: Set Card Body Padding above 0 and save the module. Hard-refresh. Overlay cards respect custom padding when the value is greater than 0.
• Card hover still flickers with effects off: Set Image Hover Effect to None, Hover Shadow to None, and Hover Lift to 0.
• Images do not appear: Set article intro/full images or configure a fallback image. Clear cache after image changes.
• Custom CSS does not apply: Use the {module} placeholder. Check template CSS specificity. Clear cache.
• Multiple instances conflict: Each instance must have a unique module ID. URL parameters are namespaced per instance.

Complete list of every module parameter as shown in the Joomla administrator, grouped by fieldset.

Basic Options

• Categories (catid): Joomla article categories used as filters and as the content pool.
• Include Child Categories (include_children): Include articles from nested child categories.
• Items Per Load (count): Number of articles loaded per AJAX request (1–100).
• Show All Filter (show_all): Adds an All option to category filters.
• Loading Style (load_behavior): Load More Button or Infinite Scroll.

Filters

• Enable Search (enable_search)
• Search Scope (search_scope): Title only, Intro only, or Title and Intro.
• Enable Tag Filter (enable_tag_filter)
• Enable Sorting (enable_sorting)
• Frontend Custom Field Filter (custom_field_filter)
• Custom Field Filter Label (custom_field_filter_label)
• Custom Field Filter Input (custom_field_filter_type): Text or Select 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): Text or Select dropdown.
• Show Reset Button (show_reset)
• Reset Button Style (reset_display): Text or Icon.
• Enable Author Filter (enable_author_filter)
• Enable Date Range Filter (enable_date_filter)
• Category Filter Style (category_filter_style): Tabs, Pills, or Dropdown.
• Enable Subcategory Drill-down (enable_subcategory_filter)
• Filter by Current Language (filter_language)
• Exclude Categories (exclude_catid)
• Exclude Article IDs (exclude_article_ids): Comma-separated article IDs.
• Show Results Count (show_results_count)

Ordering

• Ordering (ordering): Default server-side sort field (publish date, created, modified, title, or manual ordering).
• Direction (direction): Ascending or Descending.
• Featured Articles (show_featured): Show all, hide featured, or show only featured.

Article Arrangement

• Article Arrangement (layout_preset): Grid, News Portal, Magazine, List, Masonry, or Carousel.
• Apply Preset Defaults (apply_preset_defaults): Auto-tune related options when a preset is selected.
• Lead Story Mode (lead_mode): First article or First featured article.
• Overlay Lead Automatically (overlay_lead_auto)
• Grid/List Toggle (view_toggle)
• Default View Mode (default_view_mode): Grid or List.
• 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.

Card Appearance

• Card Appearance (card_style): Default, Outlined, Flat, or Compact.
• Equal Card Height (equal_card_height)
• Title Overlay on Image (title_on_image)
• Image Hover Effect (image_hover_effect): None, Zoom, Brighten, or Grayscale.
• Accent Color (accent_color)
• Card Radius (card_radius): 0–48 px.
• Grid Gap (grid_gap): 0–64 px.
• Card Shadow (Resting) (card_shadow): None, Soft, Medium, or Strong.
• Card Shadow (Hover) (hover_shadow): None, Soft, Medium, Strong, Boost, or Same.
• Card Background Color (card_bg_color)
• Card Border Color (card_border_color)
• Card Border Width (card_border_width): 0–8 px.
• Card Body Padding (card_body_padding): 0–48 px.
• Hover Lift (hover_lift): 0–16 px.
• Button Style (button_style): Filled, Outline, or Text.
• UI Corners (ui_corners): Rounded or Squared.
• Theme Preset (theme_preset): Default or Dark.
• 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 Ratio (image_ratio): 16:10, 4:3, 1:1, or 3:4.
• Fallback Image (fallback_image)
• Image Source (image_source): Intro image, Full image, or Intro with full fallback.
• Show Intro Text (show_intro)
• 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 Read More Link (show_readmore)
• Read More Target (readmore_target): Same window or New tab.
• Read More Label (readmore_label)
• Show Share Buttons (enable_share_buttons)
• Enable Image Lightbox (enable_lightbox)
• Output JSON-LD Schema (enable_schema)
• Show Featured Badge (show_featured_badge)
• Display Custom Fields (display_custom_fields)
• Title Heading Level (heading_level): H2, H3, H4, or H5.

Advanced

• Alternative Layout (layout): Joomla alternate module layout override.
• Disable Module CSS (disable_css)
• Module Class Suffix (moduleclass_sfx)
• Custom CSS (custom_css): Use {module} as the wrapper placeholder.
• Empty State Message (empty_state_message)
• Skeleton Loading (enable_skeleton)
• Filter Transitions (enable_transitions)
• Shareable Filter URLs (enable_url_state)
• Sticky Filter Toolbar (sticky_toolbar)
• Prefetch Next Page (prefetch_next)
• 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.