Sometimes if you have got a lot of information to display on a website, it is easier if end users are able to filter the content. There are already numerous stacks and plugins available which can organise content between tabs, and display this information in panels when selected. However the fundamental problem with these is that you end up forcing users to pick a particular category from a predefined list. That's not aways desirable.

The new Filter stack aims to overcome this issue, by providing end users with a flexible way of filtering content. Not only can end users type their own search terms in the search box, but they can also mix-and-match multiple keywords together. This provides an altogether more powerful solution for filtering and displaying content. This is an excellent stack for providing filtering capabilities on basic content types, like text and images.

When a user starts to type keywords in the search box, some clever code scans all of the containers nested within the Filter stack. Any containers with matching search terms are set to display, and the others get faded-out and hidden from view. It really is that simple. The search field is not case sensitive and can happily accept both alphanumeric and numeric entries. When an active filter is being applied, an optional message can be displayed, highlighted that the results below are being filtered. To undo an applied filter, a user can either delete their keywords from the search box, or hit the clear button.

Loose Filtering Example

In this example, free Figure stacks were dragged and dropped into the Filter region. Each had an image and price added, a bit of blurb and a link. Then some hidden code like <div class="ftag;">green</div> was typed into each item, to act as tags (this is the information the Filter stack will try to find when a search is run). The filter type was set to 'Loose' in the stack settings. To test this demo, type colour names (e.g. green) in the box below to filter T-Shirts by colour. Or try multiple colours like orange and red combined in the same search. You could also try filtering based on pricing.

Strict Filtering Example

In this example, free Figure stacks were dragged and dropped into the Filter region. Each had an image and price added, a bit of blurb and a link. Then some hidden code like <div class="ftag;">green</div> was typed into each item, to act as tags (this is the information the Filter stack will try to find when a search is run). The filter type was set to 'Strict' in the stack settings. To test this demo, type colour names (e.g. green) in the box below to filter T-Shirts by colour. Or try multiple colours like orange and red combined in the same search. You could also try filtering based on pricing. With strict filtering enabled, only items that match all criteria are shown, unlike loose filtering which displays all items that match one or more criteria.

Other examples of use

• If you have a large document to display, you could split it up into multiple chapters and place each chapter into an individual text stack. Then an end user would be able to type search terms in the filter box, and jump straight to the chapters that match their criteria.
• When publishing a large archive of images online, you could tag images by location or date. Then an end user would have an easy way of filtering images.

Setup

1. After installation, drag and drop a Filter stack into your page.
2. Drag and drop stacks into the Filter region placeholder. For best results, use stacks which allow both text and image input, like the Text stack that comes supplied with RapidWeaver.
3. If using images, type <div class="ftag">enter, a, list, of, tags, here,</div> in the text area, and use that to define tags relating to your images. These tags can be used to aid searching, if each of the filtrable items lacks text.
4. Any of the settings shown on the righthand side in stacks edit mode can be changed (hover over each setting to see an informational tooltip).
5. Under the Filter Region settings, you may wish to adjust the item width, height or padding settings (these settings adjust the grid layout).

The Filter stack works best with simple types of content, like text and images. You can drag and drop your content into the Filter stack in any order. The Filter stack is compatible with most RapidWeaver themes and will work on all major web browsers. Please download and evaluate the free demo version before purchase.

The Filter stack was developed exclusively for RapidWeaver. You will not find the source code anywhere else and the Filter stack was engineered specifically to be used in conjunction with the Stacks plugin. By request, several settings have been added, enabling you to carefully customise the display of the search bar, message text and and clear button (to match your RapidWeaver theme). Hopefully you should find that it is daily easy to setup (with some practice) and even easier for your end users to master.

Tags

As mentioned already, tags can be used to provide search terms for the filter stack to use. Tags are especially important to use if your items lack text. To define a set of tags, type <div class="ftag">enter, a, list, of, tags, here,</div> somewhere within the individual item. There are no limits as to how many tags you can use, and multiple items can share the same tags. Using the F-Tag syntax shown above will display your tags in edit mode, but the tags will be hidden from view when the page is viewed normally through a web browser. If no text is available to filter, the Filter stack will look for tags instead. Even if your filterable items do contain text, you can still supplement this text with tags as well.

Centring the filter form and filter region

We have to use a rather primitive grid layout system, so that the filtrable items can be sorted easily when a filter is applied, and automatically flow from left to right. The downslide of this is that it can be slightly more tricky to create a nice centre-aligned Filter stack, like you see above. Many factors effect the alignment of the filter form and filter region, such as the RapidWeaver theme being used, content container width, item width and padding. To make alignment changes more easier, Left Margin settings have been added for both the filter form and filter region. These settings are located in the stack settings, and allow you to push the filter form and filter region further towards the right, to attain a more centred position.