Wie kann man die Ansichten in exponierter Form thematisieren?

12

Ich habe eine Ansicht mit einer Reihe von exponierten Filtern erstellt, aber sie sieht ziemlich hässlich aus.

Geben Sie hier die Bildbeschreibung ein

Ich möchte das Theming verbessern, einschließlich des Einwickelns des Ganzen in ein Feldset sowie des Gruppierens einiger anderer Elemente (wie das Koppeln der veröffentlichten und aktualisierten Eingaben), bin mir aber nicht sicher, wie ich vorgehen soll.

Ich habe versucht, das Formular mit var_dump zu versehen, aber es scheint ewig zu dauern, und mein Browser stürzt ab, sodass ich auf diese Weise nicht einfach etwas über das Formular erfahren kann.

Ich habe auch versucht, das Formular als Fieldset-Kind in ein anderes Formular zu setzen, aber das Abrufen aller Formular-ID-Informationen usw. erwies sich als problematisch (obwohl ich das Fieldset-Styling erhalten habe).

Hat jemand Hinweise?

Aktualisieren:

Ich habe die Vorlage vom Modul in das Themenverzeichnis meiner Site kopiert und einen Anfang gemacht.

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

Ich kann anscheinend nicht herausfinden, wie die Datumsfelder gekoppelt werden sollen. Ich muss die Widget-Eigenschaften irgendwie ändern, damit ich sie in HTML einschließen kann (die Verwendung von hook_form_alter funktioniert nicht, da #prefix und #suffix hinzugefügt werden, $widget->widgetdamit sie hinzugefügt werden Ausgabe unterbrechen)

HorusKol
quelle

Antworten:

22

Das exponierte Formular von Theming Views ist schwierig, da es sich nicht wie die meisten Formulare verhält und einen eigenen Beschriftungsmechanismus verwendet. Sie können also nicht einfach einen form_alterHaken zum Hinzufügen #prefixund Hinzufügen #suffixvon Elementen verwenden. Mit THEME_preprocess_views_exposed_formkönnen Sie jedoch Ihren eigenen Suffix- / Präfix-Mechanismus erstellen:

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;
      }
    }
  }
}

und in der Vorlagendatei

<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
quelle
7

Sie können views-exponed-form.tpl.php von sites / all / modules / views / theme in Ihren Themenpfad kopieren, um die Vorlage zu überschreiben.

Adam S.
quelle
Sie können auch für bestimmte Ansichten nur mit Mustern wie views-exposed-form--view_id.tpl.phpoder überschreiben views-exposed-form--view_id--display_id.tpl.php- weitere Informationen
user56reinstatemonica8
3

Schauen Sie sich auch das Modul Better Exposed Filters an . Sie benötigen die Version -dev, um die Option für zusammenklappbare Filter zu erhalten, obwohl ich hoffe, bald eine ordnungsgemäße Version 1.1 herauszubringen ...

Mikeker
quelle
3

Sie sollten sich ansehen, was in dem form['#theme']Artikel enthalten ist. Ein besserer Weg, dies zu tun (besser als var_dump()), wäre die Verwendung dsm($form)oder sogar kpr($form), diese Funktionen werden verfügbar sein, nachdem Sie das Entwicklungsmodul installiert haben ( http://drupal.org/project/devel ). form['#theme']sollte ein Array von etwa 7 Elementen sein. Diese Elemente sind Namen von Themen-Hooks, die beim Rendern dieses Formulars aufgerufen werden. Sie können sie verwenden, um Ihre eigene Art der Gestaltung eines Formulars zu implementieren.

Einer der Gegenstände wird aufgerufen views_exposed_form__VIEW_NAME__DISPLAY_ID.

In Ihrem Modul (falls vorhanden) sollte eine Implementierung von hook_theme () vorhanden sein.

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
quelle
2

In früheren Situationen habe ich Hook_form_alter () verwendet, um Präfix und Suffix hinzuzufügen, um Elemente zu bilden, um sie in div zu verpacken, die dann gestylt werden können. Ich bin mir jedoch nicht sicher, ob ich Feldsätze einschließen soll.

z.B.

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

Verwenden Sie Drupals hook_form_FORM_ID_alter, um das Formular zu ändern. Dies hat mein Problem gelöst, meinem Preisfeld ein £ -Zeichen voranzustellen (fügen Sie dies in Ihr benutzerdefiniertes Modul ein):

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
quelle
0

Auf der Bearbeitungsseite einer Ansicht können wir die Themeninformationen überprüfen (untere rechte Ecke). Es enthält Informationen zu den Vorlagendateien, die Drupal zum Rendern der verschiedenen Teile der Ansicht auf dem Bildschirm verwendet. Standardmäßig werden die vom Ansichtsmodul (in seinem Themenordner) bereitgestellten Vorlagendateien verwendet. Wenn wir jedoch die Darstellung einer Ansicht ändern möchten, können wir diese Vorlagendateien mit benutzerdefinierten Vorlagendateien überschreiben, die wir in unser Modul einfügen können eigener benutzerdefinierter Themenordner (oder das Thema, das zum Anzeigen dieser Ansicht verwendet werden soll)

Diese Themeninformationen zeigen uns, wie Sie eine Datei entsprechend der Hierarchie benennen (oder den Umfang der Auswirkung der Vorlagendatei, die Sie überschreiben möchten, um die eigenen Vorlagen der Ansichten zu überschreiben).

In diesen Themeninformationen werden möglicherweise nicht alle Vorlagendateien angezeigt, die die Ansicht zum Rendern dieser bestimmten Ansicht verwendet.

Gehen Sie also zu sites / all / modules / views / theme und kopieren Sie die Datei views-exponed-form.tpl.php (da wir in diesem Fall die Standardeinstellung für das Rendern von Filtern überschreiben möchten!) und fügen Sie sie in Ihren eigenen Themenordner ein. Jetzt müssen Sie dieselbe Methode anwenden, um die Auswirkung dieser überschreibenden Vorlagendatei zu steuern, die Sie in Ihren eigenen Themenordner eingefügt haben, indem Sie sie entsprechend umbenennen. zB Ansichten-Exposed-Form - Ihr Ansichts-Namensfenster name.tpl.php (Sie werden die Nomenklatur verstehen, indem Sie sich das Thema ansehen: Informationen auf der Bearbeitungsseite der Ansicht)

Jetzt können Sie einzelnen Widgets (die von Filterhandlern generiert werden) in dieser Vorlagendatei CSS hinzufügen. Diese Einstellungen werden auf die Filter angewendet.

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

dresh
quelle