Bagaimana cara menambahkan kelas CSS ke blok yang dihasilkan Views? (BUKAN untuk konten yang dihasilkan, blokir sendiri!)

8

Saya tidak tahu mengapa, tetapi Tampilan tidak menambahkan nama kelas CSS "yang dapat dibaca manusia" (seperti misalnya nama mesin tampilan) ke blok yang dibuatnya ( itu hanya menambahkan kelasnya ke bagian "konten" yang dihasilkan saat menambahkan kelas ke bagian " kelas CSS " di editor tampilan (lihat tangkapan layar di bawah!)).
Ini hanya menambahkan kelas CSS yang biasa block block-views, dan mungkin contextual-links-regionke blok, dan menghasilkan id unik (bukan kelas) seperti ini: block-views-3d8f7966168beeec655c8ead69336789(karena delta-nya adalah kode hash yang dihasilkan ini).
Tidak masuk akal untuk menulis aturan CSS untuk kelas dan id ini (seperti .block-views-3d8f7966168beeec655c8ead69336789 { /* ... */ }), karena kelas / id ini dapat berubah ketika mengubah blok Views.

Bagaimana saya bisa menambahkan beberapa kelas CSS khusus dalam implementasi hook_block_view_alter(), jika saya bahkan tidak dapat mengidentifikasi blok-blok ini karena delta hash yang dihasilkan?


Saya tidak ingin menggunakan Block Class , karena saya merasa itu seperti kerja keras untuk hanya menambahkan beberapa kelas ke satu atau dua blok yang dihasilkan Views (BTW saya memeriksa modul, dan saya merasa SELECT css_class, module, delta FROM {block_class}permintaan block_class_preprocess_block()seperti berlebihan, karena memeriksa SEMUA menambahkan kelas, bahkan jika bloknya disembunyikan ...).

Jadi saya ingin menyelesaikannya dari modul saya sendiri.


EDIT

Sebuah contoh:

Pandangan saya dengan nama mesin dan kelas CSS yang ditambahkan: Lihat - nama dan kelas mesin

Kode HTML blok yang dihasilkan di inspektur: Lihat - kode HTML blok yang dihasilkan di inspektur

Sk8erPeter
sumber

Jawaban:

7

Pertama. Anda memiliki "hash" - karena Anda melihat nama mesin terlalu panjang.

Kedua - Anda dapat menambahkan kelas Anda sendiri untuk dilihat

masukkan deskripsi gambar di sini

Gaydabura
sumber
Tangkapan layar yang Anda anggap blok tampilan, kan?
cherouvim
tidak - ini ada di halaman pengeditan tampilan - admin / struktur / views / view / [youviewname]
Gaydabura
1
"Anda memiliki" hash "- karena Anda melihat nama mesin terlalu panjang." - dan mengapa itu penting? Saya dapat menambahkan aturan dalam stylesheet CSS ke nama kelas SANGAT panjang juga tanpa masalah ... Bagian "kelas CSS" yang Anda tandai TIDAK benar, karena kelas-kelas ini hanya dihasilkan menjadi bagian "konten" - inilah yang saya mulai dengan saya pertanyaan dengan! Jadi saya harus menambahkan kelas ke pembungkus isinya. Lihat tangkapan layar yang saya tempelkan di pertanyaan awal.
Sk8erPeter
baik. dalam hal ini cara paling sederhana adalah membuat templat khusus untuk blok - Anda ingin mengubahnya. tautan ini dapat bermanfaat drupal.org/node/1089656 - ini menjelaskan saran nama Templat
Gaydabura
Tetapi dengan cara ini saya harus menggunakan block--views--3d8f7966168beeec655c8ead69336789.tpl.phpfile, dan dalam hal ini, saya pada titik yang sama seolah-olah saya menggunakan if($variables['block']->delta == '3d8f7966168beeec655c8ead69336789')kondisi dalam hook_preprocess_block(). Inilah yang ingin saya hindari, karena saya pikir saya bisa menggunakan nama yang lebih bisa dibaca manusia di kait saya. Misalnya, bagaimana jika saya ingin memindahkan tampilan ke yang lain dengan parameter yang sama, saya menghapus yang sebelumnya, tetapi menggunakan nama mesin dan kelas CSS yang sama, tetapi hash unik yang dihasilkan berubah? Dalam hal ini, saya kehilangan modifikasi saya.
Sk8erPeter
2

Itu pertanyaan lama, tetapi tidak ada jawaban yang tepat. Saya menemukan masalah yang sama. Solusi yang dapat saya pikirkan adalah pemilih induk CSS (yang belum ada) ATAU beberapa manipulasi Drupal.

Saya menambahkan hook_preprocess_block untuk menambahkan kelas CSS wrapper ke semua blok tampilan yang mendefinisikan kelas CSS. Itu tidak sepele jadi saya akan meletakkan kode saya di sini. Ini mungkin tidak bekerja dengan semua blok tampilan, jika Anda memiliki masalah dengan kode ini, silakan memperbaruinya dan memposting versi Anda sendiri.

Contoh: Tampilan dengan kelas CSS "test" akan terkandung dalam sebuah blok dengan kelas 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";
                }
            }
        }
    }
}
Gael Lafond
sumber
1

Bagi saya hook_preprocess_block()tidak bekerja. (Mungkin karena saya harus menambahkan blok langsung dari file template via views_embed_view().)

Namun, hook_preprocess_views_view()dengan cek sederhana untuk $vars['view']->current_displayberhasil:

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

Cara termudah bagi saya adalah menduplikasi file block.tpl.php, ganti nama itu block--myregion.tpl.phpdan kemudian tambahkan kelas saya di dalamnya.

Lihat: Halaman blok Mereka .

Ricardo Silva
sumber