Sebelum kita mulai tutorial ini, ada baiknya saya jelaskan dulu istilah
Teasermenurut saya.
Teaser : Adalah penggalan/cuplikan dari suatu kalimat yang panjang. Biasanya diambil beberapa kalimat hingga 1 paragraf dari awal suatu konten. (
Referensi: tambahan oleh admin)
Mengapa Teaser saya anggap menarik dari keseluruhan proses pembuatan website, karena kebanyakan website yg saya bangun berjenis Portal yang sifatnya ingin selalu memberikan informasi terbaru di halaman depan sebuah website sehingga menarik tidaknya kita menampilkannya akan mempengaruhi sebagian besar tampilan website kita.
Teaser disini, yang akan kita buat terdiri dari berbagai komponen, bukan hanya penggalan kalimat seperti definisi diatas, tetapi ada thumbnail gambar utama, tanggal, sumber konten, dll.
Contoh kumpulan Teaser :
Setelah memahami apa itu Teaser yang saya maskud, mari kita mulai membahasnya satu-persatu.
1. Buat VIEW
Pertama-tama buatlah view untuk konten yang akan kita buat tampilan teaser nya. Tujuannya adalah untuk memilih konten serta field-field yang akan kita gunakan untuk teaser yang akan kita buat.
Pada bagian Style pilih Grid jika kita akan membuat teaser menjadi beberapa kolom, jika hanya satu kolom cukup pilih Unformatted.
Tambahan : Field Body di trim sebanyak 160 karakter atau sesuai kebutuhan. Foto yang digunakan untuk thumbnail menggunakan module IMCE CCK atau modul yang lainnya, Title di set Link this field to its node, Field Nid digunakan untuk membuat link jika image thumbnail di klik.
Kemudian buat satu file text dengan nama views-view-fields--berita--default.tpl.php yang nantinya akan kita gunakan sebagai Template dari View yang akan kita buat. Adapun format dalam membuat nama filenya sebagai berikut :
views-view-fields—[nama view]—[nama display].tpl.php
Contoh diatas, nama Viewnya : berita, sedangkan nama Displaynya : default.
Isi file Template views-view-fields--berita--default.tpl.php sebagai berikut :
<div id="Teaser_Half_Node"> <h5><?php print $fields['created']->content . " | " . $fields['field_sumber_value']->content ?></h5> <h4><a href="?q=/node/<?php print $fields['nid']->content; ?>"><?php print $fields['title']->content; ?></a></h4> <div class="section"> <div class="thumb"> <a href="?q=/node/<?php print $fields['nid']->content; ?>"> <img src="<?php print $fields['field_foto_imceimage_path']->raw; ?>" border="0 " width="100" height="76" /></a> </div> <div class="description"> <p style="margin-bottom: 0;"> <?php print $fields['body']->content; ?> </p> </div> <div class="sectionClose"></div> </div> </div>
Setelah itu letakan file views-view-fields--berita--default.tpl.php didalam folder views yang terletak di dalam folder theme yang kita gunakan, jika belum ada buat terlebih dahulu. Folder ini nantinya menjadi tempat menyimpan file template yang akan digunakan oleh modul Views .
Setelah itu letakan kembali lagi ke View yang kita buat tadi, kemudian klik Theme: Information, selanjutnya klik tombol rescan template files sehingga nama file template yang kita buat tadi muncul pada bagian Row style output.
Sampai disini untuk membuat suatu teaser baru sampai pada tahap pembuat View beserta templatenya, tetapi belum pada Style atau tampilan dari teaser tersebut. Untuk itu kita lanjut ke penyusunan style untuk teaser.
2. Style (CSS)
Sampai pada tahap ini kita baru memiliki file template serta definisi Class untuk bagian-bagian yang akan kita atur tampilannya dengan menggunakan CSS (Cascading Style Sheet) tetapi kita belum mendefinisikan class tersebut, untuk itu buatlah definisi CSS dan masukan kedalam file CSS yang digunakan oleh Theme kita.
Catatan :
Biasanya themes tertentu menyediakan file CSS tertentu untuk tempat kita meletakan CSS tambahan untuk meng-custom CSS yang ada. Contoh theme CTI-FLEX menyediakan file local.css.
Berikut ini dalah definisi CSS yang akan kita gunakan untuk membuat teaser :
/************************************************************ * TEASER HALF NODE * Untuk teaser yang lebarnya setengah halaman node * Lebarnya bisa diatur sesuai kebutuhan (fixed), * belum bisa untuk lebar yang liquid. ************************************************************/ #Teaser_Half_Node { padding: 0; }
#Teaser_Half_Node .section { display: block; margin: 0; padding: 5px 0 0 0; width: 303px; }
#Teaser_Half_Node .thumb { display: inline; float: left; width: 100px; height: 76px; margin: 0 5px 0 0; padding: 2px 2px; background-color: #ffffff; border: 1px solid #cacaca; }
#Teaser_Half_Node .description { display: inline; float: left; width: 191px; }
#Teaser_Half_Node p { text-align: left; margin: 0; padding: 0; color: #606060; }
#Teaser_Half_Node h4 { line-height: 1; margin-top: 0px; margin-bottom: 3px; }
#Teaser_Half_Node h4 a { color: #303030; }
#Teaser_Half_Node h5 { color: #515151; }
#Teaser_Half_Node .sectionClose { clear: left; display: block; height: 4px; margin: 0; padding: 0; border-bottom: 1px dotted #a9a9a9; }
Penjelasan penggunaan CSS :
3. Meletakan View dalam Panels (jika menggunakan Panels)
Sampai pada tahap ini sebenarnya teaser kita udah selesai, tinggal kita letakan pada tempat yg kita kehendaki. Jika kita ingin memasukan teaser tadi kedalam Block maka View yang kita buat tadi harus berjenis Display : Block, tetapi karena saya lebih senang menggunakan Panels dalam me-layout halaman, maka saya cukup menggunakan Display View : Default karena dengan Panels berbagai jenis konten bisa kita masukan.
Hasil akhir dari kerja kita kalau berjalan dengan lancar adalah sebagai berikut :
1 komentar:
terimakasih bos, sudah disediakan tutorialnya. maju selalu
EmoticonEmoticon