Get Started

Smart Content Filter is a Joomla site module that displays standard Joomla articles as responsive, AJAX-powered content cards with category tabs, search, tag filtering, sorting, load more, infinite scroll, custom field display, and flexible styling controls.

The module works with native com_content articles and categories. It does not require a custom content table, page reloads, or jQuery.

Key Highlights

• AJAX category filtering for Joomla articles
• Optional All tab, child category support, and multiple selected categories
• Frontend search, tag filter, custom field text filter, and sorting dropdown
• Load More button or Infinite Scroll loading
• Responsive article cards with images, category, date, intro text, custom fields, featured badge, and read more link
• Fallback image support for articles without images
• Card presets, accent color, radius, gap, shadow, button style, image ratio, and responsive columns
• Per-module custom CSS with a {module} placeholder
• Multiple module instances on the same page
• Joomla 5 and Joomla 6 ready architecture

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.

Basic Setup

1. Create or choose Joomla article categories.
2. Add published articles to those categories.
3. Assign intro images to articles if you want image cards.
4. Open the Smart Content Filter module.
5. In the basic settings, choose the categories to display.
6. Set Items Per Load to the number of cards shown at first load.
7. Choose Load More Button or Infinite Scroll.
8. Publish the module in a visible template position.

Recommended First Configuration

• Categories: Select 3 to 5 article categories.
• Include Child Categories: Enable this if your content is nested.
• Show All Filter: Enable this so visitors can return to the full list.
• Items Per Load: Start with 6 or 9 cards.
• Loading Style: Use Load More for controlled browsing or Infinite Scroll for long feeds.

Category Selection

• Categories: Choose the Joomla article categories available as frontend filter tabs.
• Include Child Categories: Includes articles from child categories under the selected categories.
• Show All Filter: Adds an All tab before the category tabs.

Article Requirements

• Articles must be published.
• Articles must be within the selected categories, or within child categories when child category support is 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. It uses the intro image when available and can fall back to the full article image or the module fallback image.

Frontend Filters

• Enable Search: Shows a search field that filters articles by title.
• Enable Tag Filter: Shows a tag dropdown using Joomla tags found in the module article pool.
• Frontend Custom Field Filter: Enter a custom field ID, name, or title to expose as a frontend text filter.
• Custom Field Filter Label: Sets the label shown for the custom field filter.
• Show Reset Button: Lets visitors clear search, tag, sorting, custom field filter, and selected category state.
• Show Results Count: Displays a live count such as Showing 6 of 24.

Sorting

• Enable Sorting: Shows a frontend sorting dropdown.
• Frontend Sort Options: Default, Newest, Oldest, Title A-Z, Title Z-A, Featured First, and Manual Ordering.
• Default Ordering: Configure fallback ordering from the module settings using publish date, created date, modified date, title, or Joomla ordering.
• Direction: Choose ascending or descending order for the default server-side ordering.

Featured Articles

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

Card Content

• Show Image: Shows article intro or full images on cards.
• Fallback Image: Used when an article has no assigned image.
• Show Intro Text: Displays article intro text below the title.
• Intro Text Limit: Controls how many characters are shown from the intro text.
• Show Category: Displays the category title on each card.
• Show Date: Displays the article publish date.
• Show Featured Badge: Displays a featured badge on featured articles.
• Display Custom Fields: Enter comma-separated field IDs, names, or titles to show field values on article cards.
• Title Heading Level: Choose H2, H3, H4, or H5 for card titles.
• Read More Label: Customize the read more link text.

Responsive Columns

• Columns: Desktop column count, from 1 to 4.
• Tablet Columns: Tablet column count, from 1 to 3.
• Mobile Columns: Mobile column count, 1 or 2.

Column values are applied through module-scoped CSS variables so each module instance can have its own layout.

Card Style Controls

• Card Style: Choose Default, Outlined, Flat, or Compact.
• Image Ratio: Choose 16:10, 4:3, 1:1, or 3:4.
• Accent Color: Sets the main highlight color used for active filters, buttons, links, and focus states.
• Card Radius: Controls rounded corners.
• Grid Gap: Controls spacing between cards.
• Card Shadow: Choose None, Soft, Medium, or Strong.
• Button Style: Choose Filled, Outline, or Text Link.

Advanced CSS

• Disable Module CSS: Turns off the bundled stylesheet if your template handles all styling.
• Module Class Suffix: Adds a custom class suffix to the module wrapper.
• Custom CSS: Add module-specific CSS from the module settings.

Use {module} in custom CSS as a placeholder for the current module wrapper. 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, selected category, filters, sort option, and page offset. The server loads content using that module instance's saved settings and returns updated article card HTML.

Loading Modes

• Load More Button: Shows a button that appends the next batch of articles.
• Infinite Scroll: Automatically loads more articles when the visitor reaches the bottom of the current result list.

Multiple Instances

Each module instance uses its own wrapper, module ID, state, CSS variables, and AJAX request data. This allows multiple Smart Content Filter modules to run on the same page with different categories, filters, limits, and styles.

Accessibility

• Loading and error messages use live regions.
• Category tabs include selected state information.
• Keyboard navigation is supported for tab controls.
• Reset and load more controls are rendered as buttons.

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 a Custom Field

Use Frontend Custom Field Filter to expose one custom field as a frontend text filter. Visitors can type a value and the module filters matching articles.

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
• Product type
• Resource format
• Any structured article metadata stored in Joomla custom fields

Common Uses

• Blog Sections: Let visitors browse posts by category, tag, search, and date.
• News Rooms: Highlight featured stories and provide quick category switching.
• Portfolios: Display projects with images, categories, tags, and custom field details.
• Product Showcases: Present product-style article cards without needing a catalog component.
• Directories: Use custom fields to show useful metadata on each card.
• Documentation Hubs: Let visitors filter guides, tutorials, and resources.
• Case Studies: Combine category tabs, featured state, custom fields, and responsive cards.

Content Planning Tips

• Use clear category names because they become frontend filter labels.
• Use Joomla tags for cross-category themes.
• Use custom fields for structured values that should appear on cards.
• Add consistent intro images for a polished grid.
• Keep intro text short and descriptive for better card scanning.

• 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 use it without selecting categories?

  Yes. If no categories are selected, the module can load accessible Joomla articles broadly. For most production sites, selecting categories is recommended.

• Can it include child categories?

  Yes. Enable Include Child Categories to include articles from nested categories below the selected categories.

• Can visitors search article text?

  The frontend search is designed for article titles. Category, tag, and custom field filters can be used for more structured filtering.

• Can I show Joomla custom fields on cards?

  Yes. Enter custom field IDs, names, or titles in Display Custom Fields.

• Can I filter by more than one custom field?

  The frontend custom field filter exposes one configured field. You can still display multiple custom fields on cards.

• Does it support multiple modules on the same page?

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

• Does it require jQuery?

  No. The frontend behavior uses vanilla JavaScript and Joomla's native asset loading.

• Can I disable the included CSS?

  Yes. Enable Disable Module CSS and style the output from your template or custom stylesheet.

• Where do images come from?

  The module reads Joomla article intro and full images. A fallback image can be configured in the module settings.

• 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 that articles are published, assigned to selected categories, available for the current language and access level, and not outside publish up or publish down dates.
• Category tabs are missing: Confirm categories are selected and published. If Show All Filter is disabled, only selected category tabs appear.
• AJAX loading fails: Confirm the module is enabled, com_ajax is available, the module ID exists, and no security extension is blocking AJAX requests. Check the browser console and network tab.
• Load More does not show: There may be no more matching articles than the Items Per Load value. Try lowering Items Per Load or adding more published articles.
• Infinite Scroll does not trigger: Check JavaScript console errors and confirm the page is tall enough to scroll beyond the current card grid.
• Images do not appear: Confirm article intro images or full images are set, or configure a fallback image. Clear Joomla and browser cache after changing images.
• Tags are missing from the dropdown: Confirm articles have Joomla tags assigned and those articles are inside the module's selected content pool.
• Custom field values do not display: Check the field ID, name, or title entered in Display Custom Fields. Confirm the field belongs to the article context and has values for the listed articles.
• Custom CSS does not apply: Use the {module} placeholder or inspect the module wrapper class. Clear cache and check for template CSS specificity conflicts.
• Multiple instances behave unexpectedly: Confirm each published module instance has a unique module ID and that template overrides have not removed the module wrapper data attributes.