Tạo một phòng trưng bày ảnh với drupal 7
để tạo một phòng trưng bày ảnh hay album ảnh không khó, bạn có thể có nhiều module để làm việc này như gallery, colorbox.... nhưng chúng thường có nhiều hơn những thứ bạn cần và khó để tinh chỉnh cho tốt. ở đây bài viết này sẽ hướng dẫn bạn tạo ra một trang trung bày ảnh có thể dễ dàng modify và cấu hình
Tổng quan
Qua những hướng dẫn bài viết sẽ hướng dẫn bạn làm thế nào để tạo một trang làm phòng trưng bày ảnh trên Bartik theme (theme cơ bản của drupal). Đương nhiên bạn có thể áp dũng ở bất kỳ theme nào của bạn tùy thích
Yêu cầu
Để thực hiện được thì yêu cầu bạn cài Drupal 7 và views module.
Step 1: tạo 1 loại thông tin mới (content type)có tên là gallery
vào Structure -> Content Types (/admin/structure/types) và thêm một content mới có tên là Gallery (chú ý nhớ phần machine name cho step 5). đơn giản quá phải không?.
Step 2: tạo kiểu ảnh
Vào công cụ của admin đi đến Configuration -> Image Styles (your_site/admin/config/media/image-styles), và thêm 1 kiểu hình mới tên là "gallery-thumb" (kiểu ảnh này dùng để thể hiện ảnh nhỏ trong phòng trưng bày ở trang đầu.)chọn "Create new style" và thêm "Scale and Crop" , với độ rộng 150 và chiều cao150(đây là độ rộng và chiều cao của ảnh nhỏ hiện ra ở phòng trưng bày).
Step 3: điều chỉnh field của kiểu nội dung gallery
Sau khi tạo content type có thêm gallery, chuyển đến Structure -> Content Types và nhấp chuột vào "manager fields" để đến phần nội dung của gallery
vì phần hình ảnh không cần nội dung chú thích nên ta xóa trường body (nếu muốn chú thích cho từng bộ ảnh thì có thể để lại cũng được) đồng thời tạo thêm "Image Gallery" field. ở phần field settings, cuộn đến phần "Number of value" và chọn "Unlimited".(việc chọn unlimited này để số ảnh upload lên là không giới hạn nếu bạn muốn giới hạn 1 số lượng nào đấy thì điền số vào)
tiếp theo vào "manage display" của Gallery content type
sau bước này bạn cần thêm 1 số ảnh ví dụ để demo (go to your_site/node/add/gallery).
Step 4: Tạo 1 view cho gallery trên
vào phần tạo view , Structure -> Views và thêm 1 view mới:
Step 5: Chỉnh vào template
đã xong phần nội dung bây giờ vào phần thể hiện phòng trung bày ra
vào thư mục chứa theme(chú ý là mỗi theme sẽ có thưc mục khác nhau) (themes/bartik/templates/), tìm node.tpl.php, sao chép và đổi tên mới là node--gallery.tpl.php (gallery là từ chính xác của phần tạo kiểu nội dung ở bước 1,đọc thêm ở đây). mở file node-gallery.tpl.php và thay bằng code sau:
<div id="node-<?php print $node->nid; ?>"class="node-gallery"><?php$imgcount=count($node->field_img['und']);for($i= 0;$i<$imgcount;$i++) {$image_uri=$node->field_img['und'][$i]['uri'];// url$masthead_raw= image_style_url('gallery-thumb',$image_uri);?><a href="<?php print file_create_url($node->field_img['und'][$i]['uri']); ?>"rel="group-<?php print $node->nid; ?>"class="fancybox"><imgclass="image<?php print ($i + 1);?>"src="http://files.megadrupal.com/blog/<?php print $masthead_raw; ?>"/></a><?php } ?></div>
Step 6: Thêm những hiệu ứng
Bây giờ thì phòng trung bày đã gồm những ảnh nhỏ có thể click vào để xem ảnh lớn. Bài viết tiếp tục hướng dẫn thêm một số hiệu ứng như(inspire from Google+). vảo thư múc chứa css của theme (themes/bartik/css/) mở style.css, và thêm vào bên dưới:
.node-gallery {float:left;width:150px;height:150px;position:relative;margin:060px50px0;}.node-gallery img {position:absolute;bottom:0px;}.node-gallery .image1{left:0px;z-index:3;-webkit-transition:all0.2s ease;-moz-transition:all0.2s ease;-o-transition:all0.2s ease}.node-gallery .image2{left:7px;height:148px;z-index:2;-webkit-transition:all0.2s ease;-moz-transition:all0.2s ease;-o-transition:all0.2s ease}.node-gallery .image3{left:14px;height:145px;z-index:1;-webkit-transition:all0.2s ease;-moz-transition:all0.2s ease;-o-transition:all0.2s ease}.image1, .image2, .image3{border:5pxsolid#F3F3F3;box-shadow:1px1px2px#666;-webkit-shadow:1px1px2px#666;-webkit-transform:rotate(0deg) translate(0px);}.node-gallery:hover .image1{z-index:6;-ms-transform: rotate(-5deg) translate(-40px,-2px);-ms-transform-origin:centerbottom;-webkit-transform: rotate(-5deg) translate(-40px,2px);-webkit-transform-origin:centerbottom;-moz-transform: rotate(-5deg) translate(-40px,-2px);-moz-transform-origin:centerbottom;-o-transform: rotate(-5deg) translate(-40px,-2px);-o-transform-origin:centerbottom;}.node-gallery:hover .image2{z-index:5;-ms-transform: rotate(-2deg) translate(0px,2px);-ms-transform-origin:centerbottom;-webkit-transform: rotate(-2deg) translate(0px,-2px);-webkit-transform-origin:centerbottom;-moz-transform: rotate(-2deg) translate(0px,2px);-moz-transform-origin:centerbottom;-o-transform: rotate(-2deg) translate(0px,2px);-o-transform-origin:centerbottom;}.node-gallery:hover .image3{z-index:4;-ms-transform: rotate(5deg) translate(40px,-2px);-ms-transform-origin:centerbottom;-webkit-transform: rotate(5deg) translate(40px,2px);-webkit-transform-origin:centerbottom;-moz-transform: rotate(5deg) translate(40px,-2px);-moz-transform-origin:centerbottom;-o-transform: rotate(5deg) translate(40px,-2px);-o-transform-origin:centerbottom;}
Step 7: thêm fancybox
Sau bước 6 thì bạn có thể thấy hiệu ứng khi rê chuột trên ảnh. Nhưng khi click vào ảnh thì nó đến một trang ảnh . đừng lo lắng, bước tiếp theo sẽ giúp bạn tạo một fancy box để trình bày ảnh.
đầu tiên bạn cần download fancybox . vào themes/bartik/ và tạo thư mục có tên là "js", giải nén jquery.mousewheel-3.0.6.pack.js vào đây. đổi tên source thành fancybox
tiếp theo, bạn cần thêm fancybox vào theme Bartik theme. bằng cách mở template.php tìm hàm function bartik_process_page(&$variables) { và thêm vào:
drupal_add_js(drupal_get_path('theme','bartik') .'/js/jquery.mousewheel-3.0.6.pack.js');drupal_add_js(drupal_get_path('theme','bartik') .'/js/fancybox/jquery.fancybox.pack.js');drupal_add_css(drupal_get_path('theme','bartik') .'/js/fancybox/jquery.fancybox.css');$fancybox= "jQuery(document).ready(function() {jQuery('.fancybox').fancybox();});";drupal_add_js($fancybox,'inline');