Easy Articles Grid 1.0 is a Joomla site module from JoomlaX that displays standard com_content articles in polished layouts and themes.

It is layout-first: you pick a structure (Grid, Magazine, Overlay, and more), pick a skin (Classic through Neon), tune images and colours, then publish. Optional category pills, live search, and Ajax loading help visitors browse without a full page reload.

What you can do

• Show articles from one or more Joomla categories (with child categories, excludes, tags, authors, and featured filters)
• Choose from 12 layouts: Grid, Masonry, List, Compact, Magazine, News Portal, Featured List, Overlay, Timeline, Carousel, Mosaic, Bento
• Choose from 10 themes: Classic, Minimal, Editorial, Soft, Bold, Glass, Outline, Dark, Brutal, Neon
• Control images: source, display mode, fit, ratio, position, radius, lightbox, custom field images
• Control cards: meta, intro, read more, share, custom fields, featured badge
• Use Load more (with spinner), Infinite scroll, or Numbered pages via com_ajax
• Optional live search, category pills, results count, and shareable URL state
• Brand with design tokens and {module} custom CSS

Who it is for

Blogs, newsrooms, portfolios, magazine homes, content hubs, and any site that wants article grids that look intentional without a page builder.

How it differs from Smart Content Filter

Easy Articles Grid is layout-first with light optional discovery. Smart Content Filter is filter-first for Ajax catalogues with richer filter chrome. Many sites use both.

Built for modern Joomla

• Joomla 4, 5, and 6
• PHP 8.1 or later recommended
• Native JavaScript (no jQuery)
• Web Asset Manager CSS and JS
• Service provider, dispatcher, and namespaces

Before you install

• Joomla: 4.x, 5.x, or 6.x
• PHP: 8.1 or newer
• Content: standard com_content articles and categories
• Access: a Super User (or administrator) account so you can install extensions

Helpful but optional

• Articles with intro or full images (or a media/URL custom field)
• A published Articles Category Blog or Category List menu item covering your categories (for short article links)
• A template module position (for example Mainbody, Content, or Bottom)

Not required

• jQuery
• A custom content component or extra table
• Smart Content Filter (optional companion, not a dependency)

Step 1: Download

Email: After you buy from the JoomlaX store, you get an email with the download link.

Store: You can also open the Downloads section and use the same email you used when buying.

File name: EasyArticlesGrid_UNZIP.zip

Step 2: Unzip on your computer

1. Right-click EasyArticlesGrid_UNZIP.zip and choose Extract (or Unzip).
2. Inside you should see:
   • mod_easy_articles_grid_1.0.0.zip (install this one)
   • ReadMe.txt

Step 3: Install in Joomla

1. Log in to the Joomla administrator.
2. Go to System > Install > Extensions.
3. Click Upload Package File.
4. Choose mod_easy_articles_grid_1.0.0.zip and wait for the success message.
5. Clear Joomla cache: System > Maintenance > Clear Cache.

What the package installs

• mod_easy_articles_grid: the site module
• Media assets under media/mod_easy_articles_grid/ (CSS, JS, Web Asset Manager entry)

Updates

Install a newer mod_easy_articles_grid zip the same way. The package uses method="upgrade", so your module settings stay safe. An update server entry points to JoomlaX updates when configured in the store.

Follow these steps in order the first time. You can finish in about 10 to 20 minutes.

1. Prepare articles

1. Create or choose article categories under Content > Categories.
2. Publish articles with titles and, where possible, intro images.
3. (Recommended) Add a published Articles Category Blog or Category List menu item for the parent category so article links stay short. Display in Menu can be No.

2. Create the module

1. Go to Content > Site Modules > New.
2. Select Easy Articles Grid.
3. Give it a Title (example: Home Articles Grid).
4. Choose a Position that exists in your template.
5. On the Menu Assignment tab, choose the pages where it should appear.
6. Set Status to Published.

3. Content tab (what articles load)

1. Select one or more Categories.
2. Leave Include Child Categories on if you use nested categories.
3. Set Count (items per page / per load), for example 6 or 9.
4. Pick Ordering (Newest is a good start).
5. Read the Route check notice: it tells you whether Joomla can build short article links.

4. Layout and Theme

1. On Layout, start with Grid, Columns 3, Gap 20.
2. On Theme, start with Classic.
3. Leave Apply Preset Defaults on when you try other layouts.

5. Behaviour (optional)

1. Set Pagination to Load more if you have more articles than Count.
2. Turn on Category filter and/or Live search only if visitors need discovery.

6. Save and check the front end

1. Click Save.
2. Open the assigned page in a new browser tab.
3. If something looks old, clear cache and hard-refresh (Ctrl+F5).

Student tip

Change one setting at a time, Save, then refresh the front end so you can see what each option does.

Easy Articles Grid is a site module only. There is no separate component database.

Create or open an instance

1. Go to Content > Site Modules.
2. Click New and select Easy Articles Grid, or open an existing instance.
3. Set Title, Position, Status, and Menu Assignment.
4. Configure the parameter tabs described in the next sections.
5. Click Save.

Admin tabs at a glance

• Content: categories, excludes, tags, authors, featured, ordering, count, route check
• Layout: structural preset, columns, gap, lead mode, mosaic/list/timeline/carousel extras
• Theme: visual skin, colours, typography, radius, shadow, hover, entrance
• Image: source, display mode, fit, ratio, position, radius, lightbox
• Card: meta, intro, read more, share, custom fields, schema
• Behaviour: category pills, pagination, live search, URL state, empty message
• Advanced: alternate layout, class suffix, cache, disable CSS, custom CSS

Multiple instances

You can place several Easy Articles Grid modules on one site or even one page. Each instance keeps its own settings, Ajax state, CSS variables, and optional URL keys (eag_{moduleId}_*).

loadposition

You can drop a published module into an article with {loadposition your-position} or the module plugin if your site uses it.

The Content tab controls which articles enter the module pool.

Category selection

• Categories: choose the Joomla article categories to pull from
• Include Child Categories: include nested categories under the selected ones
• Exclude Categories: remove specific categories from the pool
• Exclude Article IDs: hide individual articles by ID (comma-separated)
• Exclude Current Article: hide the article being viewed (useful on article pages)

Filters and ordering

• Author IDs: optional comma-separated user IDs
• Include Tags / Exclude Tags: tag IDs, names, or titles
• Force Itemid: optional menu item used when building article links
• Filter by Current Language: limit to the active site language
• Featured Articles: Show, Hide, or Only featured
• Ordering: Newest, Oldest, Title, Hits, Featured first, Ordering, Random
• Count: how many articles per page / per Ajax load (1–100)
• Start Offset: skip the first N articles (useful for a second module on the same pool)

Route check

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 a long /component/content/article/... URL. The notice names the menu item Joomla will route through, or lists 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 navigation.

Article requirements

• Published, within access level, matching language rules
• Publish up and publish down dates are respected

The Layout tab picks the structural preset and grid geometry.

Twelve layouts

• Grid: classic responsive card grid
• Masonry: multi-column masonry-style flow
• List: rows with image and text side by side (image left, right, or alternate)
• Compact: denser directory-style cards
• Magazine: large lead with supporting cards
• News Portal: lead-forward news layout
• Featured List: featured lead with list support
• Overlay: title and meta over the image
• Timeline: chronological spine with optional date format
• Carousel: horizontal strip with optional auto-play
• Mosaic: asymmetric tile recipes (default, checker, featured row)
• Bento: mixed-size bento-style blocks

Shared layout options

• Apply Preset Defaults: when Yes, switching layout can fill empty related settings with sensible defaults
• Lead Mode: First article or Featured first (Magazine, News Portal, Featured List)
• Columns / Tablet / Mobile: responsive column counts
• Grid Gap: space between cards (0–64)
• Equal Card Height: stretch cards in a row
• Card Min Height: optional minimum card height in pixels

Layout-specific extras

• List Image Side: Left, Right, or Alternate
• Mosaic Recipe: Default, Checker, or Featured row
• Timeline Date Format: optional PHP date format
• Carousel Auto-play / Speed: only when Layout is Carousel

Student tip

Start with Grid + Classic. Then try Magazine or Overlay once images look good.

The Theme tab controls the visual skin and design tokens. Layout and theme are independent: you can use Magazine + Neon, or Overlay + Minimal.

Ten themes

Classic, Minimal, Editorial, Soft, Bold, Glass, Outline, Dark, Brutal, Neon.

Card chrome

• Card Style: Default, Outlined, Flat, Elevated, Media flush
• Card Radius, Border Width, Body Padding, Shadow
• Hover Lift and Card Hover (None, Lift, Underline, Border)
• Entrance Animation: None, Fade, Fade up, Stagger

Brand colours

• Accent Color: leave empty to inherit the template link colour when possible
• Surface, Text, Muted, Border
• Badge Background / Text
• Overlay Text Color: for Overlay layout titles (default white)

Typography

• Title Font Size / Weight
• Meta Font Size
• Intro Line Clamp: 0 disables clamping; 1–12 limits visible intro lines

Student tip

For sharp demo chrome, try Outline or Brutal with Card Radius 0. For photo portfolios, try Overlay with Overlay Text Color #ffffff.

The Image tab controls where card images come from and how they are framed.

Sources

• Show Image: turn card images on or off
• Image Source: Intro then full, Intro only, Full only, Custom field only, or Custom field then intro/full
• Image Custom Field: field ID, name, or title when using a custom source
• Image Content Fallback: try to find an image inside article content when the chosen source is empty
• Fallback Image: module-level Media Manager image when an article has none

Display and framing

• Image Display: Boxed, Full, Float, Background
• Image Fit: Cover, Contain, Fill, None
• Image Ratio: common aspect ratios
• Image Min / Max Height
• Image Position: center, top, bottom, left, right, or Custom
• Image Position Custom: for example 50% 20%
• Image Radius Mode: Match card, Custom, or None
• Image Hover Effect: Zoom and related options
• Enable Lightbox: open the image in a lightbox

If your template uses Featured Image

Check whether that value is stored as the article intro/full image or in a custom field, then set Image Source accordingly.

The Card tab controls what text and actions appear on each article card.

Meta

• Show Category, Date (with optional PHP date format), Author, Tags, Hits, Reading time
• Featured badge (with optional custom label)
• Display Custom Fields: comma-separated field IDs, names, or titles shown under the intro

Intro

• Show Intro
• Intro Format: Plain text or Safe HTML
• Intro Limit: character limit (pair with Theme intro line clamp for visual trimming)

Actions and SEO

• Read more: label and style (Link, Button, Ghost)
• Heading Level: H2–H5 for card titles
• Card Clickable: whole card acts as a link
• Share Buttons: optional X, Facebook, LinkedIn
• JSON-LD Schema: optional structured data for this module instance

Card partial override

Advanced users can copy modules/mod_easy_articles_grid/tmpl/partials/card.php into templates/YOUR_TEMPLATE/html/mod_easy_articles_grid/partials/card.php to customise markup without editing the extension files.

The Behaviour tab controls discovery and progressive loading.

Category filter

• Enable Category Filter: shows category pills for the module pool
• Show All Categories: adds an All option

Pagination

• None: only the first Count articles
• Load more: button appends the next batch. While Ajax runs, the button shows a spinner, disables itself, and sets aria-busy. When there are no more articles, the pager stays hidden (including under templates that force display with !important).
• Infinite scroll: loads near the bottom automatically
• Numbered pages: classic page links via Ajax
• Prefetch Next Page: optionally prepares the next page in the background

Live search

• Enable Live Search: debounced Ajax search
• Search Scope: Title, Title and intro, or Full text
• Empty search results use a clear empty-state message

URL state and messaging

• Show Results Count
• Enable URL State: remembers search, page, and category as eag_{moduleId}_* query keys
• Empty State Message: custom text when nothing matches

How Ajax works

Requests go through Joomla com_ajax with the module ID. The server returns HTML using that instance's saved settings. Multiple instances on one page stay independent.

Advanced options

• Alternative Layout: Joomla module layout override if your template provides one
• Module Class Suffix: extra CSS class on the module wrapper
• Caching / Cache Time: standard Joomla module cache controls (disable while designing)
• Disable Module CSS: turns off the bundled stylesheet so you can restyle from scratch
• Custom CSS: rules for this instance only. Use {module} as a placeholder for the wrapper selector.

Example:

{module} .eag-card { border-width: 2px; }

Template hardening

While module CSS is enabled, controls and cards are scoped to resist common template overrides (for example Helix Ultimate input and button rules). The HTML hidden attribute is enforced with display: none !important so Load more does not stick around when finished.

After the module is published and assigned to a page, visit that page on the front end.

Checklist if you see nothing

1. Is the module Status = Published?
2. Is the Position correct for your template?
3. Is Menu Assignment set to the page you are viewing?
4. Do you have published articles in the selected categories?
5. Check Exclude Categories, Exclude Article IDs, Featured filter, language, and access
6. Did you clear cache and hard-refresh?

Demo hub

Public demos: demo.joomlax.com/demo/content-display/easy-articles-grid

Variant pages cover Grid, Overlay, Magazine, Masonry, List, Carousel, and more so you can compare layouts before configuring your own site.

Common uses

• Blog sections: Grid or Masonry with Load more and optional live search
• News rooms: News Portal or Magazine with Featured first lead mode
• Portfolios: Overlay or Mosaic with lightbox and strong images
• Dense directories: Compact or List with meta and custom fields
• Timelines: Timeline layout for chronologies and project histories
• Home strips: Carousel with a fixed Count and no pagination
• Squared demos: Brutal or Outline theme with radius 0

Content planning tips

• Use clear category names if you enable category pills
• Add consistent intro images for polished grids
• Keep intro text short for card grids; use Safe HTML only when you need styled blurbs
• Add a Category Blog menu item (Display in Menu = No) for short article URLs

With Smart Content Filter

Use Easy Articles Grid for layout-led showcases. Use Smart Content Filter when visitors need rich Ajax filtering (tags, date, multiple custom field filters, sticky toolbars). Both can live on the same site.

Content

• Categories, Include children, Exclude categories, Exclude article IDs, Exclude current
• Author IDs, Include tags, Exclude tags, Force Itemid
• Filter language, Featured, Ordering, Count, Start offset, Route check

Layout

• UI layout (12 presets), Apply preset defaults, Lead mode
• Columns, Tablet, Mobile, Grid gap, Equal height, Card min height
• List image side, Mosaic recipe, Timeline date format, Carousel auto/speed

Theme

• UI theme (10 skins), Card style
• Accent, Surface, Text, Muted, Border, Badge, Overlay text
• Title size/weight, Meta size, Intro line clamp
• Radius, Border width, Body padding, Shadow, Hover lift, Card hover, Entrance

Image

• Show image, Source, Custom field, Content fallback, Fallback image
• Display, Fit, Ratio, Min/Max height, Position, Custom position
• Radius mode, Radius, Hover effect, Lightbox

Card

• Category, Date, Author, Tags, Custom fields, Hits, Reading time, Featured badge
• Intro show/format/limit, Read more label/style, Heading level
• Card clickable, Share buttons, Schema

Behaviour

• Category filter, Show all categories
• Pagination mode, Prefetch, Live search, Search scope
• Results count, URL state, Empty message

Advanced

• Alternative layout, Module class suffix, Cache, Disable CSS, Custom CSS

• Module is missing

  • Check Published, Position, and Menu Assignment. Clear cache.

• No articles appear

  • Confirm published articles in selected categories. Review excludes, featured filter, language, access, and publish dates.

• Load more stays visible when finished

  • Update to 1.0.0+ and hard-refresh. Module CSS forces [hidden] { display: none !important; } so template display rules cannot keep the button visible.

• Load more looks idle while loading

  • 1.0.0 shows a spinner before the label and disables the button until Ajax finishes.

• Images missing

  • Match Image Source to where the template stores the image (intro/full vs custom field). Set Fallback Image if needed.

• Overlay titles look dark or wrong colour

  • Set Overlay Text Color on the Theme tab (default #ffffff). Hard-refresh after saving.

• Article links look like /component/content/article/...

  • Add a published Category Blog or Category List menu item covering those categories. Display in Menu can be No. Read the Content tab Route check notice.

• Ajax fails

  • Confirm com_ajax is available and no security extension blocks it. Check the browser console and network tab.

• Custom CSS does not apply

  • Use the {module} placeholder. Clear cache. Check template specificity.

• Old look after changing settings

  • Save the module, clear Joomla cache, then hard-refresh (Ctrl+F5).

• Masonry looks uneven after Load more

  • Hard-refresh. Masonry reflows after Ajax appends; confirm Layout is Masonry and module CSS is enabled.

• Which Joomla versions are supported?

  • Joomla 4, 5, and 6. PHP 8.1 or later is recommended.

• What file do I install?

  • Unzip EasyArticlesGrid_UNZIP.zip, then install mod_easy_articles_grid_1.0.0.zip from System > Install > Extensions.

• Does it create its own content type?

  • No. It uses standard Joomla articles and categories.

• How is this different from Smart Content Filter?

  • Easy Articles Grid is layout-first. Smart Content Filter is filter-first for richer Ajax catalogues. Many sites use both.

• Can I place several modules on one page?

  • Yes. Each instance is independent, including Ajax and URL state keys.

• Does it need jQuery?

  • No. Easy Articles Grid uses native JavaScript.

• Where can I get help?

  • Visit support.joomlax.com. Include your Joomla version, PHP version, page URL, and a short description of what you expected versus what you saw.

Documentation: joomlax.com/documentation/easy-articles-grid

Demo: demo.joomlax.com/demo/content-display/easy-articles-grid