Using The Theme Method

This method is demonstrated in isotope_example.module.

Outputting the Grid

A basic example is:

  $return[] = array(
    '#theme' => 'isotope_grid',
    '#items' => array(
      'value' => '<p>Item</p>',
      'data' => array(
        'color' => 'Blue',
      ),
    ),
  );

The #items that you pass to the theme function is an array where the 'value' is what should be displayed and the 'data' is what should be used for filtering.

Additional properties you can pass are:

• '#instance' => 'myinstance', If you have multiple grids on a single page, this is how you determine which filters relate to which grids.
• '#config' => 'isotope_default_config', If you have multiple configurations set up in /admin/structure/isotope, this is how you choose which one to use.

Outputting the Filter

  $return[] = array(
    '#theme' => 'isotope_filter',
    '#items' => array(
      'blue' => 'Blue',
      'red' => '<span class="thisIsCustomisedLabel">Red</span>',
    ),
  );

The #items that you pass to the isotope_filter theme function is an array where the key is what is used for filtering (should match the values of the data property in the grid output), and the value is what is displayed in the filter link. This can be an image or anything else you like, but keep in mind the entire thing will be wrapped in an tag.

Additional properties you can pass are:

• '#filtername' => 'color', A unique machine-readable filter name to distinguish it from the other filters on the page.
• '#filtertitle' => t('Colour'), A human-readable filter name displayed as a list title.
• '#instance' => 'myinstance', If you have multiple grids on a single page, this is how you determine which filters relate to which grids.

Outputting the Sorter

  $return[] = array(
    '#theme' => 'isotope_sorter',
    '#sorts' => array(
      'shape',
      'color',
      'Color then Shape' => array('color', 'shape'),
    ),
  );

The #items that you pass to the isotope_sorter theme function is an array where the key (optional) is the label displayed as a link, and the value is what is used for filtering. The value can be an array where each sort would be applied in order. The values should match the keys for the data property in the grid output.

Additional properties you can pass are:

• '#original' => t('Original'), If you want to allow the user to revert to the original sort, which you can implement yourself. The value is displayed as the link.
• '#instance' => 'myinstance', If you have multiple grids on a single page, this is how you determine which sorters relate to which grids.