Wie füge ich einem von Ansichten generierten Block CSS-Klassen hinzu? (NICHT zu seinem generierten Inhalt, dem Block selbst!)


8

Ich weiß nicht warum, aber Views fügt den von ihm erstellten Blöcken keine "vom Menschen lesbaren" CSS-Klassennamen (wie z. B. den Computernamen der Ansicht) hinzu ( es fügt seine Klassen nur dann dem generierten Teil "content" hinzu, wenn Hinzufügen von Klassen zum Teil " CSS-Klasse " im Ansichtseditor (siehe Screenshots unten!)).
Es fügt nur die üblichen block block-viewsund möglicherweise contextual-links-regionCSS-Klassen zu den Blöcken hinzu und generiert eine eindeutige ID (keine Klasse) wie block-views-3d8f7966168beeec655c8ead69336789folgt : (weil das Delta dieser generierte Hash-Code ist).
Es ist nicht sinnvoll, CSS-Regeln für diese Klassen und IDs (wie .block-views-3d8f7966168beeec655c8ead69336789 { /* ... */ }) zu schreiben , da sich diese Klassen / IDs beim Ändern des Views-Blocks ändern können.

Wie kann ich in einer Implementierung von einige benutzerdefinierte CSS-Klassen hinzufügen hook_block_view_alter(), wenn ich diese Blöcke aufgrund ihres generierten Hash-Deltas nicht einmal identifizieren kann?


Ich will nicht verwenden Block - Klasse , weil ich es ist wie ein Overkill fühlen für nur einige Klassen Hinzufügen zu ein oder zwei Ansichten generierten Blöcke (BTW ich das Modul überprüft, und ich fühle mich SELECT css_class, module, delta FROM {block_class}Abfrage in block_class_preprocess_block()wie ein übertrieben, denn es überprüft alle Klassen hinzugefügt, auch wenn der Block ausgeblendet ist ...).

Also möchte ich es aus meinem eigenen Modul lösen.


BEARBEITEN

Ein Beispiel:

Meine Ansicht mit dem Computernamen und den hinzugefügten CSS-Klassen: Ansicht - Maschinenname und Klasse

Der HTML-Code des generierten Blocks im Inspektor: Ansicht - generierter HTML-Code des Blocks im Inspektor

Antworten:


7

Zuerst. Sie haben "Hash" - weil Sie anzeigen, dass der Computername zu lang ist.

Zweitens können Sie Ihre eigenen Klassen zum Anzeigen hinzufügen

Geben Sie hier die Bildbeschreibung ein


Dieser Screenshot betrifft Ansichtsblöcke, oder?
Cherouvim

Nein - es ist auf der Ansicht Bearbeitungsseite - Admin / Struktur / Ansichten / Ansicht / [youviewname]
Gaydabura

1
"Sie haben" Hash "- weil Sie den Computernamen als zu lang ansehen." - und warum ist das wichtig? Ich kann Regeln in CSS-Stylesheets auch ohne Probleme zu WIRKLICH langen Klassennamen hinzufügen ... Der von Ihnen markierte Teil "CSS-Klasse" ist NICHT korrekt, da diese Klassen nur im Teil "Inhalt" generiert werden - das habe ich begonnen Frage mit! Also muss ich dem Wrapper des Inhalts Klassen hinzufügen . Sehen Sie sich die Screenshots an, die ich gerade in die ursprüngliche Frage eingefügt habe.
Sk8erPeter

okay. In diesem Fall ist es am einfachsten, benutzerdefinierte Vorlagen für den Block zu erstellen - Sie möchten Änderungen vornehmen. Dieser Link kann nützlich sein drupal.org/node/1089656 - es erklärt Vorschläge für Vorlagennamen
Gaydabura

Aber auf diese Weise musste ich eine block--views--3d8f7966168beeec655c8ead69336789.tpl.phpDatei verwenden, und in diesem Fall bin ich an der gleichen Stelle, als hätte ich eine if($variables['block']->delta == '3d8f7966168beeec655c8ead69336789')Bedingung in verwendet hook_preprocess_block(). Dies wollte ich vermeiden, weil ich dachte, ich könnte einen besser lesbaren Namen in meinem Haken verwenden. Was ist beispielsweise, wenn ich die Ansicht mit denselben Parametern in eine andere verschieben möchte, die vorherige lösche, aber denselben Computernamen und dieselben CSS-Klassen verwende, der generierte eindeutige Hash sich jedoch ändert? In diesem Fall verliere ich meine Änderungen.
Sk8erPeter

2

Das ist eine alte Frage, aber es gibt keine richtige Antwort. Ich bin auf das gleiche Problem gestoßen. Die Lösungen, an die ich denken konnte, waren CSS Parent Selector (der noch nicht existiert) ODER eine Drupal-Manipulation.

Ich habe einen hook_preprocess_block hinzugefügt, um allen Ansichtsblöcken, die eine CSS-Klasse definieren, eine Wrapper-CSS-Klasse hinzuzufügen. Das ist nicht trivial, also werde ich meinen Code hier einfügen. Es funktioniert möglicherweise nicht mit allen Ansichtsblöcken. Wenn Sie ein Problem mit diesem Code haben, können Sie ihn aktualisieren und Ihre eigene Version veröffentlichen.

Beispiel: Die Ansicht mit der CSS-Klasse "test" wird in einem Block mit der CSS-Klasse "test-wrapper" enthalten sein.

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

Für mich hook_preprocess_block()hat nicht funktioniert. (Vielleicht, weil ich den Block direkt aus einer Vorlagendatei über hinzufügen musste views_embed_view().)

Mit hook_preprocess_views_view()einer einfachen Überprüfung auf hat $vars['view']->current_displayjedoch funktioniert:

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

0

Der einfachste Weg für mich war, die Datei block.tpl.php zu duplizieren, sie umzubenennen block--myregion.tpl.phpund dann meine Klassen darin hinzuzufügen.

Siehe: Seite Themenblöcke .

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.