Filter Layouts

The filter layout displays your content in responsive grid that can be filtered to show items from a specific category or items that have a specific tag.

The filtered layout can be used for any content source. For content sources that are not able to be tagged their respective categories are used as a filter and when using images from a folder as a content source the image's folder is used to filter the content.

 

Navbar style nav and images and marginless grid with overlay

 The example below uses the navbar style navigation and displays images from a folder in a marginless grid. When the user scrolls over an item the title is transitioned onto the screen in an overlay. This module also has the filter sort buttons enabled which allow the content to be sorted in Asc, Desc or random order.

  • Show All
  • places
  • surf
  • beauty
  • photos
  • Default
  • Asc
  • Desc
  • Random

Images loading please wait ...

  • Mountains.

    Mountains.

  • Cold feet

    Cold feet

  • Above.

    Above.

  • Watching.

    Watching.

  • Bridge.

    Bridge.

  • Post surf surge

    Post surf surge

  • Plinety ablow

    Plinety ablow

  • Southside

    Southside

  • Sun

    Sun

 

Separator nav and boxed layout

The filter example below uses the separator navbar style and shows it's content in a two column boxed layout. The sort buttons have been disabled and a scale and fade transition have been applied. You can combine up to 8 effects to control how the items behave when they are filtered.

  • Show All
  • surf
  • beauty

Images loading please wait ...

  • Cold feet

    Cold feet

  • Post surf surge

    Post surf surge

  • Bridge.

    Bridge.

  • Southside

    Southside

 

Filter using the button style

The filter below uses the button style navbar (the style is inherited from your template) and uses a simple fade transition for when items in the grid are filtered.

  • Show All
  • beauty
  • surf
  • travel
  • Default
  • Asc
  • Desc
  • Random

 

 

Single column filter

The filter below displays multi-column content in a single filter column using the separator nav style.

  • Show All
  • Places
  • Sky
  • Beauty
  • City

Images loading please wait ...

  • Bamboo.

    Bamboo.

    Etiam semper eleifend sem, quis facilisis neque rhoncus quis. Mauris congue mi vitae libero dignissim facilisis. Proin a enim eu erat ultrices pharetra. Nullam efficitur, risus ac molestie gravida, ligula enim mattis leo, non venenatis libero magna cursus justo.
  • Above.

    Above.

    Etiam semper eleifend sem, quis facilisis neque rhoncus quis. Mauris congue mi vitae libero dignissim facilisis. Proin a enim eu erat ultrices pharetra. Nullam efficitur, risus ac molestie gravida, ligula enim mattis leo, non venenatis libero magna cursus justo.
  • Building.

    Building.

    Etiam semper eleifend sem, quis facilisis neque rhoncus quis. Mauris congue mi vitae libero dignissim facilisis. Proin a enim eu erat ultrices pharetra. Nullam efficitur, risus ac molestie gravida, ligula enim mattis leo, non venenatis libero magna cursus justo.
  • City.

    City.

    Etiam semper eleifend sem, quis facilisis neque rhoncus quis. Mauris congue mi vitae libero dignissim facilisis. Proin a enim eu erat ultrices pharetra. Nullam efficitur, risus ac molestie gravida, ligula enim mattis leo, non venenatis libero magna cursus justo.
  • Window.

    Window.

    Etiam semper eleifend sem, quis facilisis neque rhoncus quis. Mauris congue mi vitae libero dignissim facilisis. Proin a enim eu erat ultrices pharetra. Nullam efficitur, risus ac molestie gravida, ligula enim mattis leo, non venenatis libero magna cursus justo.
  • Watching.

    Watching.

    Etiam semper eleifend sem, quis facilisis neque rhoncus quis. Mauris congue mi vitae libero dignissim facilisis. Proin a enim eu erat ultrices pharetra. Nullam efficitur, risus ac molestie gravida, ligula enim mattis leo, non venenatis libero magna cursus justo.
  • Bridge.

    Bridge.

    Etiam semper eleifend sem, quis facilisis neque rhoncus quis. Mauris congue mi vitae libero dignissim facilisis. Proin a enim eu erat ultrices pharetra. Nullam efficitur, risus ac molestie gravida, ligula enim mattis leo, non venenatis libero magna cursus justo.

 

Options and settings

The Filter layout uses the same maximum column layout used for the responsive grid layouts.

Maximum number of columns.

This option determines the number of columns to group each category of items in. Columns within each group are defined in the layout tool.

 

Disable Margin between columns

Used to create a grid of items where there is no space between items.

 

Make items equal heights

Force all items to have the same height. Useful for maintaining the grid structure and if you have items with different heights.

 

Filter type

Determines whether to use category or tags to filter the content with. Content sources that do not have tags automatically use the category option. When using images from a folder as a content source the folder name of the image is used as thecategory.

 

Override filter

When enabled, the custom filter order specified below is used instead of the generated filter list. In order to use this feature you need to add a comma separated list of the alias's of the items you are using. 

As an example if your filter layout displays like this example when override is disabled:

Beauty / Rich Plants / Rare / Heliotropes

And you wanted to reorder the items so that the Heliotropes item was the first in the list and Beauty is the last you would need to write the following in the override input box:

Heliotropes,Rich Plants, Rare, Beauty

override filter

Items can be listed with either spaces preserved or with spaces replaced with hyphens.

Filter items need to be the same as the item alias

The filter title needs to reflect the exact word used for the item alias.

Joomla or K2 - if the title is Photos and people but the alias is Recent photos and people then the tag to override that category will need to be "Recent photos and people".

Gallery option or images from a folder - If using this option then the custom alias must reflect the name of the folder the image is found in.

 

Custom filter order

A comma separated list of items to be used for the filter navigation

 

Display show all button

Determines whether or not the filter navigation starts with a button that can be used to show all items.

 

Show all text

The text used to show all the items in the grid.

 

Hide items until images have loaded

Acts as a preloader that hides the content of the moduel until all of the images in that module have loaded

 

Display loading animation

Option to display a loading animation while the images are loaded in the background.

 

Loading Message

The text used to display while the images are loading. Leave blank to avoid showing any message.

 

Select a theme

Determines the theme to be applied to each item. Options include none, boxed, overlay and animated overlay.

 

Navbar style

Determines the style to be applied to the filter list. Options include none, buttons, separator and navbar.

 

Effects

Determines the effect to be applied to each item as the grid is filtered. You can combine any number of the effects included, however please note that some effects take precedence over others and will cancel opposing effects out. Efefcts include: fade, sclae, translate x, translate y, translate z, rotate x, rotate y and rotate z.

 

Add easing to animation

When enabled this adds an easing algorhythm to the animation so that the animation slows down at the start and the end of the transition event.

 

Effect delay

Determines the time between transitions per items in ms. Set to 0 to have each item appear ont he page at the same time when filtered. Or set to 300 to allow for an elegant scattered display after each time the grid is filtered.

 

Sort buttons

When enabled default, asc, desc and random buttons are displayed which allow the user to further sort the items on the page. Useful for large lists of items.