Menyambung catatan
kemarin. Kali ini mempercantik tampilan dari slide tersebut. Dimana caption di tampilkan di bagian bawah gambar dengan latar transparan.
Buka
view field_photo, pada bagian
fields.
Content: Gambar kecil_300 image (ini menggunakan
imagecache)
Content: Author Default = kasi ceklist pada
Exclude from display
Node: Teaser = kasi ceklist pada
Rewrite the output of this field dan isi kotak
Text dengan
<div id="transparant"></div>
<div id="myauthor">
[field_author_value]
</div>
<div id="mycontent">
[teaser]
</div>
Update dan save view. Berikutnya edit file css yang dipakai oleh theme. tambahkan baris seperti dibawah.
untuk baris css yang pertama cari dulu dengan fasilitas firebug dari mozilla. posisi silahkan di atur berapa px sehingga bisa mencapai posisi yang di inginkan.
#views_slideshow_singleframe_teaser_section_field_photo-default{
position:relative;
}
#transparant{
position:absolute;
bottom:0px;
left:0px;
width:300px;
height:75px;
background-color:#000000;
filter:alpha(opacity-90);
opacity:0.9;
-moz-opacity:0.9;
}
#myauthor{
position:absolute;
top:150px;
right:10px;
color:#FFFFFF;
}
#mycontent{
position:absolute;
top:170px;
left:10px;
color:#FFFFFF;
}
Bagaimana jika aku ingin seperti ini, thumbnail ada di sebelah kanan gambar. Bagusnya sih ini buat tampilan frontpage.
Perbedaannya adalah, disini aku memakai
Thumbnail hover yang sebelumnya
Single frame (modul tersebut bawaan dari
view slideshow, tinggal di aktifkan saja).
Catatan pentingnya:
Main frame fields = main image
Breakout fields = thumbnailnya, di sini aku pakai field yang menggunakan imagecache ukuran thumb.
Display breakout fields last = ceklist supaya thumbnailnya ada di bawah
untuk CSS nya aku ubah main image supaya float kiri, jadi thumbnailnya otomatis disebelah kanan
#views_slideshow_thumbnailhover_main_field_photo-page_1{
float:left;
}
Sumber:
drupal.org
