Isotope Filters

WordPress Plugin Staff List – Isotope Filters

Isotope pages use JavaScript to filter staff members. Items that match that filter will be shown. Items that do not match will be hidden. Filtering results are instantaneous and doesn’t require page refresh.
Isotope templates.
Staff List plugin has a set of Isotope templates and page layouts that are almost identical to the standard templates. The main difference being the requirement to have categories menu or filters.
There are quite a few scenarios where Isotope template may be not the one you want to choose. The standard templates, provide more features and can be a better option. See requirements and limitations.
Isotope page layouts.
  • List Isotope
  • Grid A Isotope
  • Grid B Isotope
  • Grid C Isotope
Free version of the plugin has only a single layout option: List Isotope.

Live previews

Isotope requirements and limitations.

Menus or filters are required.
Isotope script is used to show/hide page items. There’s no point creating this type of layout with no filtering option.
Only staff categories can be used as filters.
No data fields can be used for filtering the records.
Isotope is not a good candidate if your application requires complex search and filtering.
No paging.
Paging option is not available.
Large number of records will slow down the page load.
All staff member records are added during the initial page load. Anything above 50 items may require some testing. There are no specific limits. The deciding factor seems to be your web server and image optimization. Page caching may also improve the performance.
Images should be well optimized.
Smaller file sizes will significantly decrease the page load time.
Staff Search extension is not supported.
Currently our Staff List Search plugin extension can’t be used with isotope layouts.
JavaScript can’t be disabled.
Today, nearly all Internet browsers have JavaScript installed and enabled by default. Consequently, if JS has been disabled by the user, the Isotope page won’t function as intended.

How to create and publish a staff list page.

This process is identical to creating a standard staff page: Instructions.

How to add menu.

Isotope and standard menus are added the same way. See Adding Menu to a Page
Please disregard the ajax option. It’s not needed or used by isotope script.

Shortcode option – imagesLoaded.

There is additional script available – imagesLoaded. It detects when images have been loaded and then triggers isotope resizing events. It’s an old script and may be no longer necessary, since most of the modern browsers can work without it.
In case you wish to use it, add images-loaded parameter to the isotope shortcode.