Como tema as vistas expostas formulário?

12

Eu criei uma visualização com vários filtros expostos, mas é muito feio.

insira a descrição da imagem aqui

Gostaria de melhorar o tema, incluindo agrupar tudo em um conjunto de campo e agrupar alguns dos outros elementos (como emparelhar as entradas publicadas e atualizadas), mas não tenho certeza de como fazer isso.

Tentei var_dump do formulário, mas ele parece durar uma eternidade e meu navegador trava, por isso não consigo aprender nada facilmente sobre o formulário dessa maneira.

Eu também tentei colocar o formulário como filho do fieldset em outro formulário, mas obter todas as informações de identificação do formulário e assim por diante se mostrou problemático (embora eu tenha obtido o estilo do fieldset).

Alguém tem alguma dica?

Atualizar:

Copiei o modelo do módulo para o diretório de temas do meu site e comecei.

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

Parece que não consigo descobrir como emparelhar os campos de data - preciso modificar de alguma forma as propriedades do widget para envolvê-las em HTML (usar hook_form_alter não funciona porque o #prefix e #suffix são adicionados a $widget->widgeteles quebrar a saída)

HorusKol
fonte

Respostas:

22

O formulário exposto do Theming Views é difícil porque não se comporta como a maioria dos formulários e usa seu próprio mecanismo de rótulo. Portanto, você não pode simplesmente usar um form_altergancho para adicionar #prefixe #suffixaos elementos. Mas THEME_preprocess_views_exposed_form, usando , você pode criar seu próprio mecanismo de sufixo / prefixo:

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

e no arquivo de modelo

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

Você pode copiar visualizações-expostas-form.tpl.php de sites / all / modules / views / theme para o caminho do seu tema para substituir o modelo.

Adam S
fonte
Você também pode substituir para vistas específicos apenas com padrões como views-exposed-form--view_id.tpl.phpou views-exposed-form--view_id--display_id.tpl.php, mais informações
user56reinstatemonica8
3

Veja também o módulo Better Exposed Filters . Você precisará da versão -dev para obter a opção de filtros recolhíveis, embora eu espere obter uma versão 1.1 adequada em breve ...

mikeker
fonte
3

Você deve verificar o que está no form['#theme']item. A melhor maneira de fazer isso (melhor que var_dump()) seria usar dsm($form)ou mesmo kpr($form), essas funções estarão disponíveis após a instalação do módulo devel ( http://drupal.org/project/devel ). form['#theme']deve ser uma matriz de cerca de 7 elementos. Esses elementos são nomes de ganchos de tema chamados quando este formulário está sendo renderizado. você pode usá-los para implementar sua própria maneira de tema de um formulário.

Um dos itens será chamado views_exposed_form__VIEW_NAME__DISPLAY_ID.

No seu módulo (se você tiver um), deve haver uma implementação 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
fonte
2

Em situações anteriores, usei Hook_form_alter () para adicionar prefixo e sufixo para formar elementos para agrupá-los em div, que podem ser estilizados. Não tenho certeza sobre o agrupamento em conjuntos de campos.

por exemplo.

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

Use hook_form_FORM_ID_alter do Drupal para modificar o formulário. Foi isso que resolveu meu problema de prefixar um caractere £ no meu campo de preço (coloque isso no seu 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
fonte
0

na página de edição de uma visualização, podemos verificar as informações do tema (canto inferior direito). Ele fornece as informações sobre os arquivos de modelo usados ​​pelo Drupal para renderizar as diferentes partes da exibição na tela. Por padrão, os arquivos de modelo fornecidos pelo módulo de visualizações (dentro da pasta do tema) são usados, mas, no caso de querer modificar a maneira como uma visualização é exibida, podemos substituir esses arquivos de modelo pelos arquivos de modelo personalizados que podemos colocar dentro do nosso própria pasta de temas personalizados (ou o tema que será usado para exibir esta visualização)

Essas informações de tema nos mostram como nomear um arquivo de acordo com a hierarquia (ou o escopo do efeito do arquivo de modelo que você substituirá os próprios modelos das visualizações).

Agora, essas informações do tema podem não mostrar todos os arquivos de modelo que a exibição usa para renderizar essa exibição específica.

então, vá para sites / all / modules / views / theme e copie o views -posed-form.tpl.php (porque nesse caso queremos substituir o padrão para filtros de renderização!) e cole-o dentro da sua própria pasta de temas, agora você deve seguir o mesmo método para controlar o efeito desse arquivo de modelo superior que você colocou dentro da sua própria pasta de tema, renomeando-o de acordo. por exemplo, views-expos-form - seu painel de nome de exibição name.tpl.php (você entenderá a nomenclatura examinando theme: information na página de edição da visualização)

agora você pode adicionar css a widgets individuais (gerados por manipuladores de filtro) neste arquivo de modelo e essas configurações serão aplicadas aos filtros.

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

dresh
fonte