CG Isotope Component

1 1 1 1 1 Rating 5.00 (10 Votes)
(Reading time: 2 - 4 minutes)

User Rating: 5 / 5

Compat icon 3 x longfirst look joomla 4This component, based on isotope library ( displays/sorts/filters weblinks/articles using categories, tags and fields. It respects Content-Security-Policy.

Version 3.0.24 (Update : 06/12/2022)

  • # Tag image click in offcanvas => no button displayed
Version 3.0.23 (Update : 06/12/2022)
  • # Check tags level
  • # Suppress notice on line 439
Version 3.0.22 (Update : 30/11/2022)
  • # Error onval undefined in init.js
Version 3.0.21 (Update : 30/11/2022)
  • # Remove JQuery : AJAX Call
  • # Suppress PHP 8.1 Notices
  • - Remove K2
Version 3.0.20 (Update : 07/11/2022)
  • # check article access is boolean
Version 3.0.19 (Update : 06/11/2022)
  • # incorrect Cookie update
Version 1.17.0 : add field name in field value filtering
Version 1.9.0 : fields links
Version 1.4.0 : Fields + categories filter
Version 1.3.0 : range slider + content's plugins
version 1.2.0 : AJAX : load extra JS/CSS files
Version 1.1.0 (June 2019) : K2 rewriting, Ajax/Iframe choice in Readmore parameter
Version 1.0.1 (Octobre 2018) : first version

Download CG Isotope Component J3 Download CG Isotope Component J4

(downloaded 1252 times)

(downloaded 229 times)


PHP 74PHP 80

Tim Davis talked about CG Isotope and I helped him show some of its features. It's a bit long but it's worth it.

Just install this CG Isotope Component like any other Joomla! component. 

This component takes all Simple Isotope functionalities.

You may Import parameters from Simple Isotope modules to CG Isotope.

Menu Joomla! Modules/Plugins is an example of how to use this component. You may find another example in my tests pages.

With your help, Isotope component is being improved, new features are implemented.

Filters may be displayed as a offcanvas list, they are called by a single button, you may see this behaviour on  My modules Joomla.

It may be activated in "Layouts" tab where you decide which sections are to be in offcanvas list.

Important: all offcanvas sections have to be in consecutive order (same ligne, consecutive order).

In Joomla 4,infinite scroll pagination, displays articles with no pagination.

An example of 'infinite scroll pagination' may be seen on the following page : cg-isotope-infinite

To offer more customizations, you may add javascript code.

CG Isotope Iso plugin : 3 events

  • onCGIsotopeBefore,
  • onCGIsotopeFilter,
  • onCGIsotopeRender.

- onCGIsotopeBefore : add php code before displaying CG Isotope component page
- onCGIsotopeFilter : add articles filtering
- onCGIsotopeRender : customize article display, for example, add your own shortcodes.

Note : CG Isotope Iso plugin is given as an example and may be updated according to your wishes.

  • Multi-Select Lists
  • Force featured items to be displayed first when sorting per date/title/...
  • Export/import CG Isotope parameters in JSON files
  • Copy CG Isotope parameters in a new page
  • Alphabetical index filtering
  • Field links, this help you to filter buttons. For example, you may see one city's streets from one region's country. Check our demo page.
  • Field/tag/category notes to display filter button's tooltips
  • Exclusive list for fields display (as suggested by Martin). Check our demo page.
  • Range slider on custom fields.You may see the result at Justus website :
  • 2 new tags : {new} and {subtitle}. To use {subtile} tag, just insert ~ (tilde) in your article's title : this will split it in 2 parts that you may display using {title} and {subtitle} tags. {new} tag just displays a "new" badge.
  • Readmore : Ajax et Iframe choice 
  • Session cookie that stores your latest request.

cg isotope gb

You access to already defined pages.

cg isotope gb pages

We have 4 tabs to define one Isotope page:

Général parameters page.

cg isotope gb general

Articles parameters.

 cg isotope iso

Display Customization.

cg isotope perso

Component's layout.

cg isotope layouts

cg isotope gb menu