left col

Directory Filter Options

Filters are the tools that give end users the ability to scope info block data. They are generally on the left or right side in sections that open with checkbox items. Starting with version 5.18 the ability to dymanically change these sections and reorganize the checkboxes within them can be done where they are used by adding CSS styles to the page.

right col

left col

Why do I need this?

While something works great on one page, it might need to be prefiltered, or reduced for another page. Rather than creating another info block, use these styles to alter the interface without any changes to the original info block file.

Filters must be enabled for these styles to work, if the info block is set to use no filters, it will remove them from all places where it is used.

A non-destructive workflow

The classes outlined below are used per page, per section. Each section on the page can now determine what is the best way to display the data.

These classes are used on the section where the content is displayed and not within the info block data file.

Jump to Topics:

Open all filters

Hide filters

Reorder filters

Order items within filters

right col

left col

Out of the box

To save space the info block is using the directory-catalog style with no extra css. The filter settings on the example below have been configured inside the info block interface setup which has filters checked for search, categories, tags, location, department, unit, role, and position.

If there is no data for a particular filter, it is automatically hidden. The items within each filter section are sorted A to Z.

ajax space

right col

left col

Automatically open the filters

Use class name:

open-options

This style will automatically force the filters to be open instead of the default closed. If you have only a few items, this could be helpful to desktop users. It limits the need to make one additional click. Be aware that auto opening all options can be overwhelming when there are a lot to choose from.

ajax space

right col

left col

right col

left col

right col

left col

right col

left col

right col

left col

Hide a filter

The info block interface set up allows optional filters to be selected. While there is no mandate to have filters if you decide to add them in the info block they will automatically show up every place you use that content.

If you want to hide specific filter options on any page you can use a class file to turn them off. This style is simple and has no spaces in it, instead use a hypen "-" between fields. The section will automatically hide that section when loading the data.

right col

left col

Standard Filter Names

While you can rename filters using field mapping, the css will only see these default names.

collection
categories
tags
location
department
unit
role
status
position
lifespan
medium
subject

Build the style

To hide the selection start your class name with "filter-hide-" and then add the filters you do not want to see.

In the example below we are hiding the department and role.

The css style we build is:

filter-hide-department-role

There is no order you need to specify just remember to use "-" between each filter name.

right col

left col

ajax space

right col

left col

Set the filter order, show only what you want

If you have the need to specify which filters show and in what order you can now dictate that per section. This also has the added benefit of only showing the filters you specify. You will need to specifiy each filter in the order you want them; otherwise, the program will assume it was not selected and will hide it automatically.

right col

left col

Standard Filter Names

While you can rename filters using field mapping, the css will only see these default names.

collection
categories
tags
location
department
unit
role
status
position
lifespan
medium
subject

Build the filter order

Unless you specify otherwise the order in which filters will display is the same order as in the standard filter names list. Remember that if there is no data, or the info block has not enabled it, the filter is automatically hidden.

If the need is to have Role come before unit, and hide eveything we can build it using the "filter-order" style.

The CSS we build is:

filter-order-role-unit

right col

left col

ajax space

right col

left col

Reorder items within a filter group

In some situations having items sorted A to Z is not always optimized. For instance there is no easy way to sort the months of the year without using numbers, but that can look messy. If you have the need to put items within a filter in a very specific order this will allow you to do it. Remember this is a per-page filter and NOT part of the info block interface set up.

As this is designed to be flexible it will require a bit of content editor knowledge and set up, if content changes, editors will need to update their section CSS to accomodate.

right col

left col

Standard Filter Names

While you can rename filters using field mapping, the css will only see these default names.

collection
categories
tags
location
department
unit
role
status
position
lifespan
medium
subject

Control The Filter's Item Order

Use the standard filter names to target the filter, and then put the order of the item inside a bracket list [ ]. Items are grouped using a semi-colon to allow values that include commas in them.

The basic CSS: item-sort-<filter>-[name; name; name]

For Example:
If you wanted to use the "role" filter and sort items by month it would look like this.

item-sort-role-[january; february; march; april; may; june; july; august; september; october; november; december]

If there are extra items that are not included in the list they will be sorted A to Z after the items that are declared.

This way even if items change value, they will still appear. If no matching item is found from the declared order it will be ignored.

right col

left col

In this example we have removed the Departments and Units filters and used the open-filter class to automatically open the Roles filter. We decided that "Department Chair" and "Guest Relations" needed to be our top two choices, with the rest of the items below that.

Our CSS style here looks like this (in a list for easier display)

directory-catalog
open-options
filter-order-role
item-sort-role-[department chair; guest relations]

ajax space

right col

left col

right col

left col

right col

left col

right col