Filtered Grids

Filtered Grids use the Isotope.Js plugin to create menus based on associated taxonomies. Normally you would not use paging with these grids, and instead display all items.

displayas

displayas defaults to ‘masonry’. Set this value to ‘filtered’ for a filtered grid.

By default, if the grid items are not queried by taxonomy, the category is used to display the filtered menu.

[featured_image_pro displayas='filtered' posts_per_page='999']

If the grid is displayed by taxonomy, the filtered menu will default to the taxonomy terms.

[featured_image_pro post_type='attachment' displayas='filtered' attachment_category_terms='297,298' attachment_category_field='id' taxonomies='attachment_category' posts_per_page=999]

filteredtaxonomies

To use an alternate taxonomy for the menu, select a taxonomy associated with the specific post type. Note that unlike the above example, the displayed items are not limited to those that have an attached taxonomy. The list below is limited to 25 posts instead of all posts.

[featured_image_pro post_type='attachment' filteredtaxonomies='attachment_category' displayas='filtered' posts_per_page=25]

filteredmenuposition

Comma delimited list of positions for the filtered menu. Valid options are left, top, right, bottom.

position menu on the bottom

[featured_image_pro displayas='filtered'  posts_per_page='999' filteredmenuposition='bottom']

position menu on the top and the bottom

[featured_image_pro displayas='filtered'  posts_per_page='999' filteredmenuposition='top,bottom']

filteredmenuwidth_left

filteredmenuwidth_top

filteredmenuwidth_right

filteredmenuwidth_bottom

Use in combination with gridwidth to lay out the menu. fitwidth should be disabled and gridalign should be left to float the grid. Defaults to 100%.

position menu to the left

[featured_image_pro displayas='filtered' fitwidth=false posts_per_page='999' gridwidth='70%' filteredmenuwidth_left='30%' filteredmenuposition='left' gridalign='left']

position menu to the right with responsive items. In this case, gridalign should also be positioned to float left after the menu.

[featured_image_pro displayas='filtered' margin-bottom=0 responsive='30%' gutter=0 fitwidth=false posts_per_page='999' gridwidth='70%' filteredmenuwidth_right='30%' gridalign='left' filteredmenuposition='right']

 

filteredmenuclass

Set filteredmenuclass to style your menu. Combine it with the uniqueid setting for even more customized styles.