Como adicionar classes CSS a um bloco gerado por Views? (NÃO para o conteúdo gerado, o próprio bloco!)


8

Não sei por que, mas o Views não adiciona nomes de classes CSS "legíveis por humanos" (como, por exemplo, o nome da máquina da visualização) aos blocos que ele cria ( apenas adiciona suas classes à parte "conteúdo" gerada quando adicionando classes à parte " CSS class " no editor de exibição (veja as capturas de tela abaixo!)).
Ele apenas adiciona as classes usuais block block-viewse possivelmente contextual-links-regionCSS ao (s) bloco (s) e gera um ID exclusivo (não classe) como este: block-views-3d8f7966168beeec655c8ead69336789(porque seu delta é esse código de hash gerado).
Não faz sentido escrever regras CSS para essas classes e IDs (como .block-views-3d8f7966168beeec655c8ead69336789 { /* ... */ }), porque essas classes / IDs podem mudar ao alterar o bloco Views.

Como posso adicionar algumas classes CSS personalizadas em uma implementação de hook_block_view_alter(), se eu não consigo nem identificar esses blocos por causa de seu delta de hash gerado?


Eu não quero usar a classe de bloco , porque sinto que é um exagero adicionar apenas algumas classes a um ou dois blocos gerados por visualizações (BTW, verifiquei o módulo e sinto a SELECT css_class, module, delta FROM {block_class}consulta block_class_preprocess_block()como um exagero, porque verifica TODAS as classes adicionadas, mesmo que o bloco esteja oculto ...).

Então, eu gostaria de resolvê-lo do meu próprio módulo.


EDITAR

Um exemplo:

Minha visão com o nome da máquina e as classes CSS adicionadas: Vista - nome e classe da máquina

O código HTML do bloco gerado no inspetor: Visualizar - o código HTML do bloco gerado no inspetor

Respostas:


7

Primeiro. Você tem "hash" - porque visualiza o nome da máquina muito longo.

Segundo - você pode adicionar suas próprias classes para visualizar

insira a descrição da imagem aqui


Essa captura de tela que você tem em relação aos blocos de visualização, certo?
cherouvim

não - é na página vista de edição - admin / estrutura / views / view / [youviewname]
Gaydabura

11
"Você tem" hash "- porque você visualiza o nome da máquina é muito longo". - e por que isso importa? Também posso adicionar regras nas folhas de estilo CSS aos nomes de classe REALMENTE longos sem problemas ... A parte "Classe CSS" que você marcou NÃO está correta, porque essas classes são geradas apenas na parte "conteúdo" - foi assim que iniciei o meu pergunta com! Então, eu tenho que adicionar classes ao wrapper do conteúdo. Veja as capturas de tela que colei na pergunta original.
Sk8erPeter

Está bem. Nesse caso, a maneira mais simples é criar modelos personalizados para o bloco - você deseja alterar. este link pode ser útil drupal.org/node/1089656 - explica sugestões de nomes de modelos
Gaydabura 11/11

Mas dessa maneira eu tive que usar um block--views--3d8f7966168beeec655c8ead69336789.tpl.phparquivo e, neste caso, estou no mesmo ponto como se tivesse usado uma if($variables['block']->delta == '3d8f7966168beeec655c8ead69336789')condição hook_preprocess_block(). Era isso que eu queria evitar, porque pensei que poderia usar um nome mais legível por humanos no meu lugar. Por exemplo, e se eu quiser mover a visualização para outra com os mesmos parâmetros, excluo a anterior, mas uso o mesmo nome de máquina e classes CSS, mas o hash exclusivo gerado é alterado? Nesse caso, perco minhas modificações.
Sk8erPeter

2

Essa é uma pergunta antiga, mas não há resposta adequada. Me deparei com o mesmo problema. As soluções em que pude pensar foram o seletor pai CSS (que ainda não existe) OU alguma manipulação do Drupal.

Adicionei um hook_preprocess_block para adicionar uma classe CSS de wrapper a todos os blocos de exibição que definem uma classe CSS. Isso não é trivial, então vou colocar meu código aqui. Pode não funcionar com todos os blocos de exibição. Se você tiver um problema com este código, fique à vontade para atualizá-lo e publicar sua própria versão.

Exemplo: a exibição com a classe CSS "test" estará contida em um bloco com a classe CSS "test-wrapper".

function <MY_THEME>_preprocess_block(&$variables) {
    $default_display_id = 'default';
    // Trying to access the field:
    //     $display_id =      $variables['elements']['#views_contextual_links_info']['views_ui']['view_display_id']
    //     $default_display = $variables['elements']['#views_contextual_links_info']['views_ui']['view']->display['default']->display_options['css_class']
    //     $display =         $variables['elements']['#views_contextual_links_info']['views_ui']['view']->display[$display_id]->display_options['css_class']
    if (isset($variables['elements']['#views_contextual_links_info']['views_ui'])) {
        $view_ui = $variables['elements']['#views_contextual_links_info']['views_ui'];
        if (isset($view_ui['view_display_id'])) {
            $display_id = $view_ui['view_display_id'];
            if (isset($view_ui['view']) && property_exists($view_ui['view'], 'display') && isset($view_ui['view']->display[$display_id])) {

                $default_css_class = NULL;
                if (isset($view_ui['view']->display[$default_display_id])) {
                    $default_display = $view_ui['view']->display[$default_display_id];
                    if (property_exists($default_display, 'display_options') && isset($default_display->display_options['css_class'])) {
                        $default_css_class = $default_display->display_options['css_class'];
                    }
                }

                $view_css_class = NULL;
                $display = $view_ui['view']->display[$display_id];
                if (property_exists($display, 'display_options') && isset($display->display_options['css_class'])) {
                    $view_css_class = $display->display_options['css_class'];
                }

                $css_class = $view_css_class ? $view_css_class : $default_css_class;
                if ($css_class) {
                    $variables['classes_array'][] = "$css_class-wrapper";
                }
            }
        }
    }
}


1

Para mim hook_preprocess_block()não funcionou. (Talvez porque eu precisei adicionar o bloco diretamente de um arquivo de modelo via views_embed_view().)

No entanto, hook_preprocess_views_view()com uma verificação simples para $vars['view']->current_displayo trabalho:

function MYMODULE_preprocess_views_view(&$vars) {
  // 'MYBLOCK' usually comes as 'block' if this view only has one
  if ($vars['view']->name == 'MYVIEW' && $vars['view']->current_display == 'MYBLOCK') {
    // here I add a class that contains the current theme's name
    global $theme;
    $theme_name = array_pop(explode('/', (drupal_get_path('theme', $theme))));
    $vars['classes_array'][] = $theme_name.'-theme';
    // but you can simply do the following as well
    $vars['classes_array'][] = 'MYSTRING';
  }
}

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.