CG Isotope Component

1 1 1 1 1 Rating 5.00 (10 Votes)

(Reading time: 2 - 4 minutes)

You have already read 0%

Compat icon 3 x long This component, based on isotope library (https://isotope.metafizzy.co/) 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 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 3.0.18 (Update : 06/11/2022)

# check article access
# error if search button not defined

Version 3.0.17 (Update : 31/10/2022)

# update isotope.css
+ Get component version in database

Version 3.0.16 (Update : 31/10/2022)

# Offcanvas : custom fields handling
+ Offcanvas : clear filters button

Version 3.0.15 (Update : 31/10/2022)

# Offcanvas : touchscreen fix

Version 3.0.14 (Update : 11/10/2022)

# Clear offcanvas button on page reload

Version 3.0.13 (Update : 11/10/2022)

# Fix : show empty first time
# Imageloaded 5.0

Version 3.0.12 (Update : 03/10/2022)

# Import : countable error during import from isotope module
# Tags : display all available tags in module's parameters
+ look for updates/changelog files on github
- Remove Jquery dependencies

Version 3.0.11 (Update : 16/09/2022)

# offcanvas : missing isotope.css update

Version 3.0.10 (Update : 16/09/2022)

# offcanvas : missing page.form update

Version 3.0.9 (Update : 16/09/2022)

+ offcanvas : choose offcanvas position

Version 3.0.8 (Update : 16/09/2022)

+ offcanvas : move isotope grid when offcanvas shown

Version 3.0.7 (Update : 13/09/2022)

# admin : save only button fix

Version 3.0.6 (Update : 12/09/2022)

# admin : add save only button in page edit
# css : add border-color to bootstrap buttons

Version 3.0.5 (Update : 11/09/2022)

# date/time : timezone applied twice in displayDate field only

Version 3.0.4 (Update : 10/09/2022)

# php 8.1 compatibility
# offcanvas : fix after tests
# date/time : timezone applied twice in articles dates

Version 3.0.3 (Update : 05/09/2022)

# offcanvas : fix after tests

Version 3.0.2 (Update : 05/09/2022)

# offcanvas

Version 3.0.1 (Update : 04/09/2022)

+ offcanvas range filter

Version 3.0.0 (Update : 02/09/2022)

+ offcanvas filter buttons
^ use bootstrap 5

Version 2.3.3 (Update : 09/07/2022)

# infinite scroll : update alpha buttons
^ admin parameters : clean up admincss : use admin.js and css_admin.css

Version 2.3.2 (Update : 07/07/2022)

# hide infinite scroll btn parameter

Version 2.3.1 (Update : 07/07/2022)

# hide infinite scroll btn parameter

Version 2.3.0 (Update : 07/07/2022)

+ infinite scroll
+ display or not online parameters help

Version 2.2.3 (Update : 25/04/2022)

# wrong xml version

Version 2.2.1 (Update : 25/04/2022)

# wrong cookie search reloading

Version 2.2.0 (Update : 06/04/2022)

# use choicesjs and field-fancy-select for lists
+ load init.min.js or init.js depending on debug mode
+ use webassetmanager to load css and script files

Version 2.1.3 (Update : 25/03/2022)

# K2 SQL error if K2 not installed

Version 2.1.2 (Update : 04/01/2022)

# admin : suppress pages notice
# admin : fix css
# admin : copy pages error

Version 2.1.1 (Update : 20/12/2021)

+ Phoca collapse compatibility

Version 2.1.0 (Update : 16/12/2021)

# replace boostrap tab by uitab

Version 2.0.13 (Update : 28/11/2021)

# sql : set created default value
# sql : datetime defaults
# uninstall : drop cgisotope_page table

Version 2.0.11 (Update : 24/11/2021)

# SEF URL

Version 2.0.10 (Update : 01/10/2021)

# PHP 8 error : array undefined

Version 2.0.9 (Update : 30/09/2021)

# suppress PHP 8 notice

Version 2.0.8 (Update : 28/09/2021)

# PHP 8 strpos error

Version 2.0.7 (Update : 26/09/2021)

# PHP 8 compatibility

Version 2.0.6 (Update : 15/09/2021)

# PHP 8 compatibility
# Replace JModelLegacy in CGHelper

Version 2.0.5 (Update : 30/08/2021)

# page Publish/unpublish error

Version 2.0.4 (Update : 29/08/2021)

# Yes/No buttons in config.
+ Weblinks 4.0

Version 2.0.3 (Update : 04/07/2021)

+ Show unpublished items, if user is authorized

Version 2.0.2 (Update : 03/07/2021)

+ Customization via CG Isotope Plugin : events onCGIsotopeBefore, onCGIsotopeFilter, onCGIsotopeRender
+ Add Javascript Customization

Version 2.0.1 (Update : 28/06/2021)

+ changelog.xml
^ update script.php

Version 2.0.0 (Update : 21/06/2021)

+ Joomla 4.0 RC2 compatibility

....
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

CG Isotope J3

(downloaded 1252 times)

CG Isotope J4

(downloaded 229 times)

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.

CG Isotope plugin

- 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 : agrarservice-ellermann.de
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.