Tampilan - Tambahkan DIV pembungkus di sekitar Grup

43

Di Drupal 7, saya telah membuat tampilan yang mencantumkan beberapa bidang. Bidang dikelompokkan berdasarkan bidang lain (istilah ID bidang). Mark up terlihat seperti ini:

<h3>[Term 1]</h3>
<div class="views-row views-row-1 views-row-odd views-row-first"> [Field Content] </div>
<div class="views-row views-row-2 views-row-even"> [Field Content] </div>
<div class="views-row views-row-3 views-row-odd views-row-last"> [Field Content] </div>

<h3>[Term 2]</h3>
<div class="views-row views-row-1 views-row-odd views-row-first"> [Field Content] </div>
<div class="views-row views-row-2 views-row-even"> [Field Content] </div>
<div class="views-row views-row-3 views-row-odd views-row-last"> [Field Content] </div>

<h3>[Term 3]</h3>
<div class="views-row views-row-1 views-row-odd views-row-first"> [Field Content] </div>
<div class="views-row views-row-2 views-row-even"> [Field Content] </div>
<div class="views-row views-row-3 views-row-odd views-row-last"> [Field Content] </div>

Namun, saya perlu tanda hingga terlihat seperti ini:

<div id="term_1">
     <h3>[Term 1]</h3>
     <div class="views-row views-row-1 views-row-odd views-row-first"> [Field Content] </div>
     <div class="views-row views-row-2 views-row-even"> [Field Content] </div>
     <div class="views-row views-row-3 views-row-odd views-row-last"> [Field Content] </div>
</div>

<div id="term_2">
     <h3>[Term 2]</h3>
     <div class="views-row views-row-1 views-row-odd views-row-first"> [Field Content] </div>
     <div class="views-row views-row-2 views-row-even"> [Field Content] </div>
     <div class="views-row views-row-3 views-row-odd views-row-last"> [Field Content] </div>
</div>

<div id="term_3">
     <h3>[Term 3]</h3>
     <div class="views-row views-row-1 views-row-odd views-row-first"> [Field Content] </div>
     <div class="views-row views-row-2 views-row-even"> [Field Content] </div>
     <div class="views-row views-row-3 views-row-odd views-row-last"> [Field Content] </div>
</div>

Saya tahu bahwa Anda dapat menggunakan views-view-unformatted.tpl.php (Output Style) untuk lebih naik tampilan dan kemudian masukkan DIV untuk membungkus grup.

Namun, saya perlu DIV pembungkus saya menjadi seperti ini <div id="term_ID_{number of ID}">. Nomor ID akan sesuai dengan istilah yang telah digunakan untuk mengelompokkan bidang. Secara default, jika Anda menggunakan views-view-unformatted.tpl.php, Anda tidak bisa memasukkan token untuk ID istilah ke dalamnya.

Bantuan apa pun akan dihargai.

senyum lebar
sumber

Jawaban:

50

Saya perlu melakukan hal yang sama baru-baru ini. Anda dapat membuat file templat:

  • Temukan templat di bawah /modules/views/themes/views-view-unformatted.tpl.php.
  • Salin ke /sites/all/themes/<your-theme>folder Anda dan ganti nama menjadi views-view-unformatted--<nodetype>.tpl.php.
  • Edit file dengan menambahkan divsekitar seluruh templat. The <h3>tag adalah nama grup.

Di sini terlihat seperti apa file templat yang dimodifikasi.

<div class="your-class">
<?php if (!empty($title)): ?>
    <h3><?php print $title; ?></h3><!--this is the group name-->
<?php endif; ?>
<?php foreach ($rows as $id => $row): ?>
  <div class="<?php print $classes_array[$id]; ?>">
    <?php print $row; ?>
</div>
<?php endforeach; ?>
</div><!--end your div-->
Kristy Gislason
sumber
4
Ini hanya bekerja untuk saya juga, ta muchly :)
Clive
Anda menghemat teman saya!
DropDragon
1
Bagi siapa pun yang membaca jawaban ini bertanya-tanya bagaimana cara menentukan nama tplfile mereka , lihat jawabannya di sini drupal.stackexchange.com/questions/11468/… tldr; di halaman edit tampilan Anda, di bawah lanjutan, klik tema: informasi
user56reinstatemonica8
Meskipun Q dan A adalah Drupal 7, pekerjaan yang sama untuk Drupal 8.
Duncanmoo
16

Coba Format: Daftar HTML. Itu akan membungkus semuanya dalam daftar item. Untuk tujuan saya itu sempurna (daftar item taksonomi). Semoga ini membantu.

Dagomar
sumber
Ini bagus. Saya ingin menambahkan bidang grup sebagai kelas pada pembungkus sehingga saya dapat bergaya sesuai dengan itu tetapi tampaknya tidak dapat melakukannya dalam tampilan UI itu sendiri. Apa yang saya lakukan sebagai gantinya jika itu membantu seseorang adalah: SORT dengan bidang itu juga pertama, dan kemudian gunakan pemilih pertama css.
klidifia
11

Sudahkah Anda mencoba fitur Hasil penulisan ulang ? Klik pada bidang yang ingin Anda edit dan gulir ke bawah sampai Anda melihat Menulis ulang hasil . Centang kotak untuk Menulis ulang output dari bidang ini dan kemudian menyesuaikan HTML sesuai kebutuhan. Untuk token, Anda dapat menggunakan Pola Pengganti yang ditunjukkan pada kotak di bawah area input teks.

Mengenai Pola Penggantian , perhatikan peringatan yang ditampilkan Tampilan:

Perhatikan bahwa karena urutan render, Anda tidak dapat menggunakan bidang yang datang setelah bidang ini; jika Anda membutuhkan bidang yang tidak tercantum di sini, atur ulang bidang Anda.

Jika ini tidak cukup, coba tambahkan bidang baru, Global: Teks khusus . Ini akan memungkinkan Anda untuk menambahkan beberapa HTML sewenang-wenang dan Pola Penggantian juga tersedia di sini. Anda dapat menggunakan dua bidang Global: teks khusus yang terpisah untuk menambahkan <div>tag awal dan akhir.

Patrick Kenny
sumber
Hai, Terima kasih atas bantuan Anda. Saya mencoba mengubah bidang pengelompokan (di bawah Halaman: Pilihan gaya> Bidang pengelompokan No. 1). Tampaknya tidak ada opsi untuk mengubah output dari bidang pengelompokan ini. Menggunakan Global: Custom textefek baris dalam grup tetapi bukan bagian luar grup,
big_smile
Saat Anda memilih bidang Pengelompokan No. 1 , ada opsi untuk Gunakan hasil yang diberikan ke baris grup dan kelas baris . Tak satu pun dari mereka melakukan apa yang Anda inginkan?
Patrick Kenny
1
Hai, Terima kasih atas bantuan Anda. Opsi-opsi itu hanya menambahkan DIV pembungkus di sekitar bidang individu sebagai lawan dari seluruh grup (yang dibuat oleh bidang Pengelompokan No. 1).
big_smile
@ PatrickKenny Apakah Anda tahu jika metode ini berdampak buruk pada waktu rendering tampilan?
user5950
@ user5950 Saya menggunakan hasil penulisan ulang sepanjang waktu, tetapi saya tidak pernah melihat ada peningkatan kinerja. Saya pikir tugas pandangan umum lainnya seperti menambahkan hubungan lebih cenderung menghambat kinerja sebelum Hasil Menulis Ulang akan.
Patrick Kenny
5

Hari-hari ini saya mengalami masalah yang sama. Dan apa yang saya butuhkan di samping pembungkus grup adalah kelas css seperti pertama / terakhir per grup.

Jadi saya menambahkan di view-view-unformatted.tpl.php kode php berikut:

<?php
  #### defs
  // call a global variable every time the template is called
  global $static;
  // be aware of the key_name for the global variable to keep it 
  // unique for every display
  // I call the same view in one panel several times with 
  // different arguments 
  $key_name = $view->name . '_' . $view->current_display ;
  foreach ($view->args as $value) {
    $key_name .= '_' . $value;
  }
  // init classes array
  $group_classes = array();
  ## groups counter - store in global variable 
  if (!isset($static[$key_name]['gc'])) {
    $static[$key_name]['gc'] = 1;
  }
  else {
    $static[$key_name]['gc']++;
  }
  #### classes
  ## counter
  $group_classes[] = 'group-' . $static[$key_name]['gc'];
  ## first
  if ($static[$key_name]['gc'] == 1) {
    $group_classes[] = 'first';
  }
  ## last
  // get max row "id" per group
  foreach ($rows as $id => $row) {
    $max_id = $id;
  }
  // count results (-1 because $id starts with 0)
  $count_results = count($view->result) - 1;
  //
  if ($max_id == $count_results) {
    $group_classes[] = 'last';
  }
  ## ret
  $group_class = implode(' ', $group_classes);
?>

Di sini bagian html dengan pembungkus dan kelas:

<div class="views-group <?php print $group_class; ?>">
  <?php if (!empty($title)): ?>
    <h3><?php print $title; ?></h3>
  <?php endif; ?>
  <?php foreach ($rows as $id => $row): ?>
    <div <?php if ($classes_array[$id]) { print 'class="' . $classes_array[$id] .'"';  } ?>>
      <?php print $row; ?>
    </div>
  <?php endforeach; ?>
</div>

Outputnya adalah:

<div class="views-group group-1 first">
  content of first group
</div>
<div class="views-group group-2">
  content of second group
</div>    
<div class="views-group group-3 last">
  content of third group
</div>

Mungkin bisa membantu - nikmati

andres
sumber
3

Jadi saya kira teka-teki terbesar adalah bagaimana menghasilkan kelas menggunakan nilai $ title dalam tag h3. Saya akan mencoba modul Transliterasi dan cuplikan berikut:

<?php
  $group_class = function_exists('transliteration_get') ? transliteration_get($title) : $title;
  $group_class = trim($group_class);
  $group_class = str_replace(' ', '-', $group_class);
  $group_class = strtolower($group_class);
?>

Ini bekerja untuk saya ketika saya harus membuat jangkar bernama dalam tampilan.

Artur
sumber
2

Sangat berguna - saya perlu menambahkan beberapa kelas alpha / omega untuk tata letak berbasis grid dan juga beberapa yang aneh untuk dapat menghapus keduanya untuk setiap baris. Saya mengedit baris dari:

$group_classes[] = 'group-' . $static[$key_name]['gc'];

untuk ini:

$group_classes[] = 'group-' . $static[$key_name]['gc'] . ($static[$key_name]['gc'] % 2 ? ' alpha even' : ' omega odd');

Yang memberikan output yang dibutuhkan.

soulston
sumber
2

Anda tidak perlu modul transliterasi. Inti Drupal memiliki fungsi drupal_html_class untuk ini.

Baris Wanschers
sumber
2

Saya memiliki masalah yang sama hari ini, tetapi membutuhkan kelas khusus pada html pembungkus, dalam kasus saya tampilan dikelompokkan berdasarkan istilah taksonomi, dan kami membutuhkan gaya khusus pada setiap istilah, sehingga kelas khusus per istilah. Inilah cara kami mengubah tampilan template yang tidak diformat:

<?php if(is_numeric($title)) { $term = taxonomy_term_load($title); $title = $term->name; } ?>
<div class="term-<?php print $term->tid;?>">
<?php if (!empty($title)): ?>
    <h3><?php print $title; ?></h3><!--this is the group name-->
<?php endif; ?>
<?php foreach ($rows as $id => $row): ?>
  <div class="<?php print $classes_array[$id]; ?>">
    <?php print $row; ?>
</div>
<?php endforeach; ?>
</div><!--end your div-->

Dalam tampilan tampilan bidang istilah taksonomi diatur ke: "Tampilkan entitas id". Jadi kami mendapatkan id sebagai bagian dari nama kelas, dan kemudian memuat judul berdasarkan id yang sama.

vegardjo
sumber
2

Bagi siapa saja yang tidak ingin menyelami kode dan mengacaukan dengan templat ada cara mudah untuk melakukan ini dengan menghapus kelas div standar menggunakan Pagar dan menambahkan div Anda sendiri ke dalam awalan dan akhiran bidang menggunakan formatter bidang Sederhana . Jika Anda memiliki beberapa bidang cukup tambahkan div yang berisi awalan bidang pertama, dan akhiran di bidang terakhir.

Jadi struktur asli dengan awalan dan area akhiran yang tidak terpotong akan terlihat seperti:

<div class="field field-name-field-test field-type-text field-label-above">
 <div class="field-label">Foobar field:&nbsp;</div>
  <div class="field-items">
   *:prefix posted here*
   <div class="field-item even">Leaner markup means better front-end performance.</div>
   *:suffix posted here*
 </div>
</div>

Jika Anda akan menambahkan kelas "foo" itu akan menjadi

   <div class="foo"> *:prefix posted here*
    Leaner markup means better front-end performance.
   </div> *:suffix posted here*
Ezra
sumber
2

Jawaban dari chrisjlee di atas menjelaskan dengan baik kecuali untuk apa nama file templat. Jika Anda ingin mengubah hanya satu tampilan, file baru harus menyertakan nama mesin tampilan. Anda dapat menemukan ini di url untuk halaman edit tampilan. Itu dijelaskan dengan sangat baik dalam komentar ini pada masalah yang sama: https://www.drupal.org/node/1383696#comment-6729128

Saya membutuhkan kelas di sekitar baris menggunakan nilai $ title sehingga saya bisa membuat mereka dalam 2 kolom. Ini kodenya:

<?php if (!empty($title)): ?>
  <h3><?php print $title; ?></h3>
<?php endif; ?>
<div class="<?php print strtolower($title); ?>" > <!--added div with class-->
<?php foreach ($rows as $id => $row): ?>
  <div<?php if ($classes_array[$id]) { print ' class="' . $classes_array[$id] .'"';  } ?>>
    <?php print $row; ?>
  </div>
<?php endforeach; ?>
</div> <!--end of added div-->
jn2
sumber
2

Saya menemukan masalah serupa. Saya ingin baris yang dikelompokkan untuk ditampilkan dalam akordeon bootstrap. Saya tidak bisa menggunakannya dengan modul Views Bootstrap .
Komentar # 4 memecahkan masalah saya. Seperti
apa views-view-unformatted-[my_view_name]-[my_display_name].tpl.phppenampilan saya

<?php

/**
 * @file
 * YOUR_THEME simple view template to display a list of rows.
 *
 * @ingroup views_templates
 */
?>

    <?php
    #### defs
      // call a global variable every time the template is called
      global $static;
      // be aware of the key_name for the global variable to keep it 
      // unique for every display
      // I call the same view in one panel several times with 
      // different arguments 
      $key_name = $view->name . '_' . $view->current_display ;
      foreach ($view->args as $value) {
        $key_name .= '_' . $value;
      }
      // init classes array
      $group_classes = array();
      ## groups counter - store in global variable 
      if (!isset($static[$key_name]['gc'])) {
        $static[$key_name]['gc'] = 1;
      }
      else {
        $static[$key_name]['gc']++;
      }
      #### classes
      ## counter
      $group_classes[] = 'group-' . $static[$key_name]['gc'];
      ## first
      if ($static[$key_name]['gc'] == 1) {
        $group_classes[] = 'first';
      }
      ## last
      // get max row "id" per group
      foreach ($rows as $id => $row) {
        $max_id = $id;
      }
      // count results (-1 because $id starts with 0)
      $count_results = count($view->result) - 1;
      //
      if ($max_id == $count_results) {
        $group_classes[] = 'last';
      }
      ## ret
      $group_class = implode(' ', $group_classes);
      $group_id = implode($group_classes); // helps me having a id whithout spaces for my accordions panels.
    ?>

    <div class="panel panel-default <?php print $group_class; ?>">
        <?php if (!empty($title)): ?>
          <?php if($group_id == 'group-1first'): ?>
                <!--<h3><?php //print $title; ?></h3>-->
                <div class="panel-heading" role="tab" id="heading<?php print $group_id; ?>">
                    <h3 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse<?php print $group_id; ?>" aria-expanded="true" aria-controls="collapse<?php print $group_id; ?>">
                            <?php print $title; ?>
                        </a>
                    </h3>
                </div>
                <div id="collapse<?php print $group_id; ?>" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading<?php print $group_id; ?>">

            <?php else: ?>
                <div class="panel-heading" role="tab" id="heading<?php print $group_id; ?>">
                    <h3 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse<?php print $group_id; ?>" aria-expanded="false" aria-controls="collapse<?php print $group_id; ?>">
                            <?php print $title; ?>
                        </a>
                    </h3>
                </div>
                <div id="collapse<?php print $group_id; ?>" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading<?php print $group_id; ?>">

            <?php endif; ?>
        <?php endif; ?>                                                 

                    <div class="panel-body">
                        <?php foreach ($rows as $id => $row): ?>
                                    <div<?php if ($classes_array[$id]) { print ' class="' . $classes_array[$id] .'"';  } ?>>
                                        <?php print $row; ?>
                                    </div>
                        <?php endforeach; ?>
                    </div>
            </div>
    </div>

tentu saja, agar akordeon berfungsi, Anda juga perlu mengedit views-view- [my_view_name] - [my_display_name] .tpl.php agar memiliki

<?php if ($rows): ?>
    <!--<div class="view-content">-->
    <div class="view-content panel-group" id="accordion" role="tablist" aria-multiselectable="true">
      <?php print $rows; ?>
    </div>
  <?php elseif ($empty): ?>
    <div class="view-empty">
      <?php print $empty; ?>
    </div>
  <?php endif; ?>

Saya meninggalkan kode default dari modul di antara komentar html.
Semoga ini bisa membantu.

Mars
sumber