¿Cómo agregar clases CSS a un bloque generado por Vistas? (¡NO a su contenido generado, el bloque en sí!)


8

No sé por qué, pero Views no agrega nombres de clase CSS "legibles para humanos" (como, por ejemplo, el nombre de la máquina de la vista) a los bloques que crea ( solo agrega sus clases a la parte del "contenido" generado cuando agregando clases a la parte de " clase CSS " en el editor de vistas (¡mira las capturas de pantalla a continuación!)).
Solo agrega las clases habituales block block-views, y posiblemente contextual-links-regionCSS, a los bloques, y genera una identificación única (no clase) como esta: block-views-3d8f7966168beeec655c8ead69336789(porque su delta es este código hash generado).
No tiene sentido escribir reglas CSS para estas clases e identificadores (como .block-views-3d8f7966168beeec655c8ead69336789 { /* ... */ }), porque estas clases / identificadores pueden cambiar al modificar el bloque Vistas.

¿Cómo puedo agregar algunas clases CSS personalizadas en una implementación de hook_block_view_alter(), si ni siquiera puedo identificar estos bloques debido a su hash delta generado?


No quiero usar Block Class , porque siento que es una exageración simplemente agregar algunas clases a uno o dos bloques generados por Vistas (por cierto, verifiqué el módulo, y siento que la SELECT css_class, module, delta FROM {block_class}consulta es block_class_preprocess_block()una exageración, porque verifica TODAS las clases agregadas, incluso si el bloque está oculto ...).

Entonces me gustaría resolverlo desde mi propio módulo.


EDITAR

Un ejemplo:

Mi vista con el nombre de la máquina y las clases CSS agregadas: Vista: nombre de máquina y clase

El código HTML del bloque generado en el inspector: Ver: código HTML del bloque generado en el inspector

Respuestas:


7

Primero. Tienes "hash", porque ves que el nombre de la máquina es demasiado largo.

Segundo: puede agregar sus propias clases para ver

ingrese la descripción de la imagen aquí


Esa captura de pantalla que tienes se refiere a los bloques de vista, ¿verdad?
cherouvim

no - está en la página de edición de vista - admin / structure / views / view / [youviewname]
Gaydabura

1
"Tienes" hash ", porque ves que el nombre de la máquina es demasiado largo". ¿Y por qué importa? Puedo agregar reglas en hojas de estilo CSS a REALMENTE nombres de clase largos también sin ningún problema ... La parte de "clase CSS" que marcó NO es correcta, porque estas clases solo se generan en la parte de "contenido" - esto es lo que comencé mi pregunta con! Entonces tengo que agregar clases al contenedor de los contenidos. Vea las capturas de pantalla que acabo de pegar en la pregunta original.
Sk8erPeter

Okay. En este caso, la forma más sencilla es crear plantillas personalizadas para el bloque: desea cambiar. este enlace puede ser útil drupal.org/node/1089656 - explica sugerencias de nombres de plantilla
Gaydabura

Pero de esta manera tuve que usar un block--views--3d8f7966168beeec655c8ead69336789.tpl.phparchivo, y en este caso, estoy en el mismo punto que si usara una if($variables['block']->delta == '3d8f7966168beeec655c8ead69336789')condición hook_preprocess_block(). Esto es lo que quería evitar, porque pensé que podía usar un nombre más legible en mi anzuelo. Por ejemplo, ¿qué sucede si quiero mover la vista a otra con los mismos parámetros, elimino el anterior, pero uso el mismo nombre de máquina y clases CSS, pero el hash único generado cambia? En este caso, pierdo mis modificaciones.
Sk8erPeter

2

Esa es una vieja pregunta, pero no hay una respuesta adecuada. Me encontré con el mismo problema. Las soluciones que se me ocurrieron fueron el selector padre CSS (que aún no existe) O alguna manipulación de Drupal.

Agregué un hook_preprocess_block para agregar una clase CSS de contenedor a todos los bloques de vista que definen una clase CSS. Eso no es trivial, así que pondré mi código aquí. Es posible que no funcione con todos los bloques de vista, si tiene un problema con este código, no dude en actualizarlo y publicar su propia versión.

Ejemplo: la vista con la clase CSS "test" estará contenida en un bloque con la clase 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 mí hook_preprocess_block()no funcionó. (Tal vez porque tuve que agregar el bloque directamente desde un archivo de plantilla a través deviews_embed_view() ).

Sin embargo, hook_preprocess_views_view()con una simple verificación de $vars['view']->current_displaysí funcionó:

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.