Views theming : mettre en forme les filtres exposés d'une View

Un tuto écrit plein de code PHP pour vous montrer comment améliorer la mise en forme des filtres exposés d'une View, surtout lorsqu'il y en a beaucoup ...

La situation

Exposer à l'internaute des filtres d'une Views, c'est pratique mais difficile à mettre en forme, surtout lorsque les filtres sont nombreux et de nature diverses (checkbox, select, ...), voilà à quoi on peut arriver par défaut :

C'est d'autant plus le bordel que les filtres sont placés à l'intérieur d'un formulaire en float CSS via les CSS du module Views. De plus, il n'y a pas de class et d'ID pour différencier les filtres :

Pas facile dans l'état actuel de mettre en forme ces .views-exposed-widget sans class et ID CSS, surtout lorsqu'il faut arriver au résultat suivant d'une maquette PSD :

Le template de Views

Le module views utilise un template générique pour afficher les filtres, vous le trouverez dans le module ici : /views/theme/views-exposed-form.tpl.php
Faites une copie de ce dernier et placez-le dans votre thème, videz le cache du registre (theme registry). Notez que ce template n'apparaît pas dans la section "Thème: Informations" dans l'admin de la View, tentez malgré tout un scan via le bouton "Rescan template files"

Ce template s'applique pour toutes les views de votre site, on va donc le renommer pour cibler note view spécifique de cette façon : views-exposed-form--NomDeLaView--DisplayID.tpl.php
Dans mon cas, ma view s'appelle recherche et l'ID de l'affichage (qui est une page) est page_3; je renomme donc en views-exposed-form--recherche--page-3.tpl.php

Pour trouver l'ID de l'affichage (display ID), il suffit de survoler les affichages (display) à gauche et de noter l'url qui apparaît dans votre navigateur, en bas dans mon cas :

Si vous avez un doute, observez les nommages dans la section "Thème: Informations", et pour aller plus loin : Views' template files

Le contenu du template views-exposed-form.tpl.php :

<?php
// $Id: views-exposed-form.tpl.php,v 1.4.4.1 2009/11/18 20:37:58 merlinofchaos Exp $
/**
 * @file views-exposed-form.tpl.php
 *
 * This template handles the layout of the views exposed filter form.
 *
 * Variables available:
 * - $widgets: An array of exposed form widgets. Each widget contains:
 * - $widget->label: The visible label to print. May be optional.
 * - $widget->operator: The operator for the widget. May be optional.
 * - $widget->widget: The widget itself.
 * - $button: The submit button for the form.
 *
 * @ingroup views_templates
 */
?>
<?php if (!empty($q)): ?>
  <?php
    // This ensures that, if clean URLs are off, the 'q' is added first so that
    // it shows up first in the URL.
    print $q;
  ?>
<?php endif; ?>
<div class="views-exposed-form">
  <div class="views-exposed-widgets clear-block">
    <?php foreach($widgets as $id => $widget): ?>
      <div class="views-exposed-widget">
        <?php if (!empty($widget->label)): ?>
          <label for="<?php print $widget->id; ?>">
            <?php print $widget->label; ?>
          </label>
        <?php endif; ?>
        <?php if (!empty($widget->operator)): ?>
          <div class="views-operator">
            <?php print $widget->operator; ?>
          </div>
        <?php endif; ?>
        <div class="views-widget">
          <?php print $widget->widget; ?>
        </div>
      </div>
    <?php endforeach; ?>
    <div class="views-exposed-widget">
      <?php print $button ?>
    </div>
  </div>
</div>

Explorer les $variables avec dpm()

Une des solutions serait de créer une fonction pour générer un ID unique au niveau de la DIV .views-exposed-widgets, cependant, cela va pas me permettre de placer les filtres de façon ciblée pour matcher ma maquette PSD. Il faut que je puisse les placer dans 4 colonnes distinctes via un squelette HTML.

Le template de views opère une boucle foreach sur la variable $widgets, nous allons explorer ce que contient cette variable php.

Pour ce faire, installez et activez le module Devel.
Ensuite, on va placer un dpm($widgets) dans notre template, que je simplifie comme ceci :

<?php if (!empty($q)): ?>
  <?php
    // This ensures that, if clean URLs are off, the 'q' is added first so that
    // it shows up first in the URL.
    print $q;
  ?>
<?php endif; ?>
    <div class="views-exposed-form">
      <?php dpm($widgets); ?>
      <div class="views-exposed-widgets clear-block views-exposed-widget">
        <?php print $button ?>
      </div>
    </div>

N'oubliez pas de vider à chaque modification le cache du registre (...)

Vous devriez arriver à quelquechose comme cela :

J'ai dans mon cas 7 filtres qui sont stockés dans le tableau PHP (array) $widgets. Chaque filtre étant un Objet PHP. Je passe les explications techniques PHP (...) mais on va pouvoir afficher chaque filtre/widget de la mannière suivante :

<?php print $widgets['filter-title']->widget; ?>
<?php print $widgets['filter-date_filter']->widget; ?>
<?php print $widgets['filter-date_filter_1']->widget; ?>
<?php print $widgets['filter-tid_3']->widget; ?>
<?php print $widgets['filter-tid_4']->widget; ?>
<?php print $widgets['filter-tid_5']->widget; ?>
<?php print $widgets['filter-tid']->widget; ?>

Le résultat

En explorant et en choisissant les variables PHP dont j'ai besoin, je vais pouvoir répartir les filtres dans diverses colonnes avec des DIV.
Au final, voici à titre indicatif, mon views-exposed-form--recherche--page-3.tpl.php :

<?php
// $Id: views-exposed-form.tpl.php,v 1.4.4.1 2009/11/18 20:37:58 merlinofchaos Exp $
/**
 * @file views-exposed-form.tpl.php
 *
 * This template handles the layout of the views exposed filter form.
 *
 * Variables available:
 * - $widgets: An array of exposed form widgets. Each widget contains:
 * - $widget->label: The visible label to print. May be optional.
 * - $widget->operator: The operator for the widget. May be optional.
 * - $widget->widget: The widget itself.
 * - $button: The submit button for the form.
 *
 * @ingroup views_templates
 */
?>
<?php if (!empty($q)): ?>
  <?php
    // This ensures that, if clean URLs are off, the 'q' is added first so that
    // it shows up first in the URL.
    print $q;
  ?>
<?php endif; ?>

<?php// dpm($widgets); ?>


    <div class="ra-weapper clearfix">
      <div class="racol racol01">
        <div class="filter-block">
          <h3 class="filter-title">
            Titre
          </h3>
          <?php print $widgets['filter-title']->widget; ?>
        </div>
        <div class="filter-block">
          <h3 class="filter-title">
            PubliÈ aprËs le
          </h3>
          <?php print $widgets['filter-date_filter']->widget; ?>
        </div>
        <div class="filter-block">
          <h3 class="filter-title">
            PubliÈ avant le
          </h3>
          <?php print $widgets['filter-date_filter_1']->widget; ?>
        </div>
      </div><!-- /racol -->
      <div class="racol racol02">
        <div class="filter-block">
          <h3 class="filter-title">
            Saison
          </h3>
          <?php print $widgets['filter-tid_3']->widget; ?>
        </div>
        <div class="filter-block">
          <h3 class="filter-title">
            Quoi ?
          </h3>
          <?php print $widgets['filter-tid_4']->widget; ?>
        </div>
      </div><!-- /racol -->
      <div class="racol racol03 filter-block">
        <h3 class="filter-title">
          Miam !
        </h3>
        <?php print $widgets['filter-tid_5']->widget; ?>
      </div><!-- /racol -->
      <div class="racol racol04 last filter-block">
        <h3 class="filter-title">
          Auteurs
        </h3>
        <?php print $widgets['filter-tid']->widget; ?>
      </div><!-- /racol -->
    
    
    <div class="rabutton clearboth"><?php print $button ?></div>
    
    </div><!-- /ra-weapper clearfix -->

Et le résultat côté frontend, après un peu de CSS :

Vous l'aviez surement deviné, il s'agit d'un système de recherche pour des recettes de cuisine !

Sources Webs:

• Theme views exposed filters (search filter) fields
• Views module: theming exposed filters
• Theming Exposed Filters Forms
• Drupal Views2 Exposed Form how to change
• (Displaying Views' exposed filters in a block)
• http://www.delicious.com/gazwal.com/exposed_filter