Comment thématiser les vues exposées sous forme?

12

J'ai créé une vue avec un certain nombre de filtres exposés, mais elle est assez moche.

entrez la description de l'image ici

Je voudrais améliorer le thème, y compris en enveloppant le tout dans un champ ainsi qu'en regroupant certains des autres éléments (comme coupler les entrées publiées et mises à jour), mais je ne sais pas comment procéder.

J'ai essayé de var_dump le formulaire, mais il semble continuer indéfiniment et mon navigateur se bloque, donc je ne peux pas facilement apprendre quoi que ce soit sur le formulaire de cette façon.

J'ai également essayé de mettre le formulaire en tant qu'enfant fieldset dans un autre formulaire, mais l'obtention de toutes les informations d'ID de formulaire et ainsi de suite s'est avérée problématique (bien que j'aie eu le style fieldset).

Quelqu'un a des conseils?

Mise à jour:

J'ai copié le modèle du module dans le répertoire de thème de mon site et j'ai commencé.

<fieldset>
    <legend>Filters</legend>

    <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>
</fieldset>

Je n'arrive pas à comprendre comment associer les champs de date - je dois en quelque sorte modifier les propriétés du widget afin de pouvoir les encapsuler en HTML (l'utilisation de hook_form_alter ne fonctionne pas car les #prefix et #suffix sont ajoutés pour $widget->widgetqu'ils casser la sortie)

HorusKol
la source

Réponses:

22

Le formulaire exposé de Theming Views est difficile car il ne se comporte pas comme la plupart des formulaires et utilise son propre mécanisme d'étiquette. Ainsi, vous ne pouvez pas simplement utiliser un form_altercrochet pour ajouter #prefixet ajouter des #suffixéléments. Mais en utilisant THEME_preprocess_views_exposed_form, vous pouvez créer votre propre mécanisme de suffixe / préfixe:

function THEME_preprocess_views_exposed_form(&$variables) {
  if ($variables['form']['#id'] == 'views-exposed-form-VIEWNAME-DISPLAYID') {
    foreach ($variables['widgets'] as $id => &$widget) {
      switch ($id) {
        case 'first_date_id':
          $widget->prefix = '<div class="date-widgets-wrapper">';
          break;
        case 'last_date_id':
          $widget->suffix = '</div>';
          break;
      }
    }
  }
}

et dans le fichier modèle

<fieldset>
    <legend>Filters</legend>

    <div class="views-exposed-form">
        <div class="views-exposed-widgets clear-block">
            <?php foreach($widgets as $id => $widget): ?>
                <?php if (!empty($widget->prefix)) print $widget->prefix; ?>
                <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 if (!empty($widget->suffix)) print $widget->suffix; ?>
            <?php endforeach; ?>
            <div class="views-exposed-widget">
                <?php print $button ?>
            </div>
        </div>
    </div>
</fieldset>
Pierre Buyle
la source
7

Vous pouvez copier les vues-exposées-form.tpl.php de sites / tous / modules / vues / thème vers votre chemin de thème pour remplacer le modèle.

Adam S
la source
Vous pouvez également remplacer des vues spécifiques uniquement avec des modèles comme views-exposed-form--view_id.tpl.phpou views-exposed-form--view_id--display_id.tpl.php, plus d'informations
user56reinstatemonica8
3

Jetez également un œil au module Filtres mieux exposés . Vous aurez besoin de la version -dev pour obtenir l'option de filtres pliables, bien que j'espère obtenir une version 1.1 correcte bientôt ...

Mikeker
la source
3

Vous devriez regarder ce qu'il y a dans l' form['#theme']article. Une meilleure façon de faire (mieux que var_dump()) serait d'utiliser dsm($form)ou même kpr($form), ces fonctions seront disponibles après avoir installé le module de développement ( http://drupal.org/project/devel ). form['#theme']devrait être un tableau d'environ 7 éléments. Ces éléments sont des noms de crochets de thème qui sont appelés lors du rendu de ce formulaire. vous pouvez les utiliser pour implémenter votre propre façon de thématiser un formulaire.

L'un des éléments sera appelé views_exposed_form__VIEW_NAME__DISPLAY_ID.

Dans votre module (si vous en avez un), il devrait y avoir une implémentation de hook_theme ()

function MYMODULE_theme($existing, $type, $theme, $path) {
  return array(
    'views_exposed_form__VIEW_NAME__DISPLAY_ID' => array(
      'function' => 'my_exposed_form_theme_function',
      'render element' => 'form',
    )
  );
}

// somwhere later in code

function my_exposed_form_theme_function($vaiables) {
  //$vaiables['form'] contains a form array
  //to display a form element call drupal_render($vaiables['form']['some element'])
  //don't forget to call drupal_render($form) 
  //after you are done with rendering individual elements
  //
  //you can use template_preprocess_views_exposed_form() from 
  // views/theme/theme.inc as an example

  return "concatenated results of multiple drupal_render() calls";
}
ihor marusyk
la source
2

Dans les situations précédentes, j'ai utilisé Hook_form_alter () pour ajouter un préfixe et un suffixe pour former des éléments pour les envelopper dans div qui peut ensuite être stylisé. Je ne suis pas sûr d'envelopper dans les ensembles de champs.

par exemple.

$form['submitted']['full_name']['#prefix'] = '<div class="background">';        
$form['submitted']['message']['#suffix'] = '</div>';
Teegan
la source
1

Utilisez hook_form_FORM_ID_alter de Drupal pour modifier le formulaire. C'est ce qui a résolu mon problème de préfixe d'un caractère £ dans mon champ de prix (mettez-le dans votre module personnalisé):

function THEME_form_views_exposed_form_alter(&$form, &$form_state, $form_id) {
   // check this is the right form
   if ($form['#theme'][0] == 'REPLACE_THIS') {
      // add the prefix
      $form['price']['min']['#prefix'] = "£";
   }
}
jackocnr
la source
0

dans la page d'édition d'une vue, nous pouvons vérifier les informations sur le thème (coin inférieur droit). Il donne les informations concernant les fichiers modèles utilisés par Drupal pour rendre les différentes parties de la vue à l'écran. Par défaut, les fichiers de modèle fournis par le module de vues (à l'intérieur de son dossier de thème) sont utilisés, mais dans le cas où nous voulons modifier la façon dont une vue est affichée, nous pouvons remplacer ces fichiers de modèle par des fichiers de modèle personnalisés que nous pouvons mettre à l'intérieur de notre propre dossier de thème personnalisé (ou le thème qui sera utilisé pour afficher cette vue)

Ces informations de thème nous montrent comment nommer un fichier en fonction de la hiérarchie (ou de l'étendue de l'effet du fichier de modèle que vous allez remplacer les modèles de vues.)

Maintenant, ces informations de thème peuvent ne pas afficher tous les fichiers de modèle que la vue utilise pour rendre cette vue spécifique.

alors, allez dans sites / all / modules / views / theme et copiez le views-expose-form.tpl.php (car dans ce cas nous voulons remplacer la valeur par défaut pour les filtres de rendu!) et collez-le dans votre propre dossier de thème, vous devez maintenant suivre la même méthode pour contrôler l'effet de ce fichier de modèle prioritaire que vous avez placé dans votre propre dossier de thème en le renommant en conséquence. eg vues-exposé-formulaire - votre nom nom-volet de vue.tpl.php (vous comprendrez la nomenclature en regardant le thème: informations dans la page d'édition de la vue)

vous pouvez maintenant ajouter des CSS à des widgets individuels (générés par des gestionnaires de filtres) dans ce fichier de modèle et ces paramètres seront appliqués aux filtres.

visitez http://eureka.ykyuen.info/2011/07/07/25/drupal-theme-the-exposed-filter-in-views/

rafraîchir
la source