web-dev-qa-db-fra.com

Comment ajouter des classes CSS à un bloc généré par Views? (PAS à son contenu généré, le bloc lui-même!)

Je ne sais pas pourquoi, mais Views n'ajoute pas de noms de classes CSS "lisibles par l'homme" (comme par exemple le nom de la machine de la vue) aux blocs qu'il crée ( il ajoute seulement ses classes à la partie générée "contenu" lors de l'ajout de classes à la partie " classe CSS" dans l'éditeur de vue ( voir les captures d'écran ci-dessous!)).
Il ajoute uniquement les classes CSS habituelles block block-views, Et éventuellement contextual-links-region CSS au (x) bloc (s), et génère un identifiant unique (pas de classe) comme ceci: block-views-3d8f7966168beeec655c8ead69336789 (car son delta est ce code de hachage généré).
Cela n'a pas de sens d'écrire des règles CSS pour ces classes et ids (comme .block-views-3d8f7966168beeec655c8ead69336789 { /* ... */ }), Car ces classes/ids peuvent changer lors de la modification du bloc Views.

Comment puis-je ajouter des classes CSS personnalisées dans une implémentation de hook_block_view_alter(), si je ne peux même pas identifier ces blocs en raison de leur delta de hachage généré?

Je ne veux pas utiliser Block Class, car je pense que c'est comme une surpuissance pour simplement ajouter quelques classes à une ou deux Blocs générés par les vues (BTW j'ai vérifié le module, et je sens que SELECT css_class, module, delta FROM {block_class} Interroger dans block_class_preprocess_block() comme une surpuissance, car il vérifie TOUTES les classes ajoutées, même si le bloc est caché ... ).

Je voudrais donc le résoudre à partir de mon propre module.

ÉDITER

Un exemple:

Ma vue avec le nom de la machine et les classes CSS ajoutées: View - machine name and class

Le code HTML du bloc généré dans l'inspecteur: View - generated block's HTML code in the inspector

7viewsblockstheming
8
Sk8erPeter

Première. Vous avez "hachage" - parce que vous voyez que le nom de la machine est trop long.

Deuxièmement - vous pouvez ajouter vos propres classes pour afficher

enter image description here

7
Gaydabura

C'est une vieille question, mais il n'y a pas de bonne réponse. J'ai rencontré le même problème. Les solutions auxquelles je pouvais penser étaient le sélecteur parent CSS (qui n'existe pas encore) OR some Drupal manipulation).

J'ai ajouté un hook_preprocess_block pour ajouter une classe CSS wrapper à tous les blocs de vue qui définissent une classe CSS. Ce n'est pas anodin, je vais donc mettre mon code ici. Il peut ne pas fonctionner avec tous les blocs de vue, si vous avez un problème avec ce code, n'hésitez pas à le mettre à jour et à publier votre propre version.

Exemple: La vue avec la classe CSS "test" sera contenue dans un bloc avec la 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";
                }
            }
        }
    }
}
2
Gael Lafond

Il existe un module à cet effet.

Afficher la classe supérieure du bloc

Screenshot from module page

1
Kevin Siji

Pour moi hook_preprocess_block() n'a pas fonctionné. (Peut-être parce que je devais ajouter le bloc directement à partir d'un fichier de modèle via views_embed_view() .)

Cependant, hook_preprocess_views_view() avec une simple vérification de $vars['view']->current_display a fonctionné:

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';
  }
}
1
leymannx

La façon la plus simple pour moi était de dupliquer le fichier block.tpl.php, de le renommer en block--myregion.tpl.php puis ajoutez mes classes à l'intérieur.

Voir: page Blocs thématiques .

0
Ricardo Silva