¿Cómo tema las vistas expuestas de forma?

12

He creado una vista con varios filtros expuestos, pero tiene un aspecto bastante feo.

ingrese la descripción de la imagen aquí

Me gustaría mejorar la temática, incluyendo envolver todo en un conjunto de campos, así como agrupar algunos de los otros elementos (como emparejar las entradas publicadas y actualizadas), pero no estoy seguro de cómo hacerlo.

Traté de var_dump el formulario, pero parece que continúa para siempre y mi navegador se bloquea, por lo que no puedo aprender nada sobre el formulario de esa manera.

También intenté poner el formulario como un elemento secundario del conjunto de campos en otro formulario, pero obtener toda la información de ID del formulario, etc., resultó problemático (aunque sí obtuve el estilo del conjunto de campos).

¿Alguien tiene alguna sugerencia?

Actualizar:

Copié la plantilla del módulo al directorio de temas de mi sitio y comencé.

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

Me parece que no puede encontrar la manera de emparejar los campos de fecha - tengo que modificar de alguna manera las propiedades del widget para que pueda envolver en HTML (usando hook_form_alter no funciona debido a que el #prefix y #suffix se añaden a $widget->widgetlo que romper la salida)

HorusKol
fuente

Respuestas:

22

La forma expuesta de Theming Views es difícil porque no se comporta como la mayoría de las formas y usa su propio mecanismo de etiqueta. Por lo tanto, no puede simplemente usar un form_altergancho para agregar #prefixy #suffixelementos. Pero usando THEME_preprocess_views_exposed_form, puedes crear tu propio mecanismo de sufijo / prefijo:

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

y en el archivo de plantilla

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

Puede copiar vistas-expuestas-form.tpl.php de sites / all / modules / views / theme a su ruta de tema para anular la plantilla.

Adam S
fuente
También puede anular vistas específicas solo con patrones como views-exposed-form--view_id.tpl.phpo views-exposed-form--view_id--display_id.tpl.php, más información
user56reinstatemonica8
3

También eche un vistazo al módulo de Mejores filtros expuestos . Necesitará la versión -dev para obtener la opción de filtros plegables, aunque espero obtener pronto una versión 1.1 adecuada ...

mikeker
fuente
3

Deberías mirar lo que hay en el form['#theme']artículo. Una mejor manera de hacer esto (mejor que var_dump()) sería usar dsm($form)o incluso kpr($form), estas funciones estarán disponibles después de instalar el módulo de desarrollo ( http://drupal.org/project/devel ). form['#theme']debe ser una matriz de aproximadamente 7 elementos. Estos elementos son nombres de ganchos de tema a los que se llama cuando se representa este formulario. puede usarlos para implementar su propia forma de crear un formulario.

Se llamará a uno de los artículos views_exposed_form__VIEW_NAME__DISPLAY_ID.

En su módulo (si tiene uno) debe haber una implementación 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
fuente
2

En situaciones anteriores, he usado Hook_form_alter () para agregar prefijo y sufijo para formar elementos para envolverlos en div que luego se pueden diseñar. Sin embargo, no estoy seguro de envolver en conjuntos de campos.

p.ej.

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

Use hook_form_FORM_ID_alter de Drupal para modificar el formulario. Esto es lo que resolvió mi problema de prefijar un carácter £ en mi campo de precio (poner esto en su módulo personalizado):

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

En la página de edición de una vista podemos verificar la información del tema (esquina inferior derecha). Proporciona información sobre los archivos de plantilla utilizados por Drupal para representar las diferentes partes de la vista en pantalla. De manera predeterminada, se utilizan los archivos de plantilla proporcionados por el módulo de vistas (dentro de su carpeta de temas), pero en el caso de que queramos modificar la forma en que se muestra una vista, podemos anular esos archivos de plantilla con archivos de plantilla personalizados que podemos poner dentro de nuestro propia carpeta de tema personalizada (o el tema que se utilizará para mostrar esta vista)

Esta información del tema nos muestra cómo nombrar un archivo de acuerdo con la jerarquía (o el alcance del efecto del archivo de plantilla que va a anular las plantillas propias de las vistas).

Ahora, esta información del tema puede no mostrar todos los archivos de plantilla que la vista usa para representar esta vista específica.

así que vaya a sites / all / modules / views / theme y copie el archivo views -posed-form.tpl.php (porque en este caso queremos anular el valor predeterminado para los filtros de representación) y péguelo dentro de su propia carpeta de temas, ahora tiene que seguir el mismo método para controlar el efecto de este archivo de plantilla sobresaliente que ha colocado dentro de su propia carpeta de temas renombrándolo en consecuencia. por ejemplo, vistas-expuestas-forma: su nombre de panel de nombre de vista.tpl.php (comprenderá la nomenclatura al ver el tema: información en la página de edición de la vista)

ahora puede agregar css a widgets individuales (generados por controladores de filtro) en este archivo de plantilla y esa configuración se aplicará a los filtros.

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

dresh
fuente