Chúng ta có thể
tạo cho website của mình một khung với hiệu ứng trình diễn tương tự, bằng
module Views Slideshow.
* Chuẩn bị và
kích hoạt các module
Bạn cần tải các
module: Views, Views Slideshow, Chaos tool suite, Link Field, Token. Sau khi tải
về, bạn giải nén các module vào thư mục news\sites\all\modules, rồi tiến hành
kích hoạt tất cả các module này.
* Các bước
thiết lập
Trước tiên, bạn
cần tạo hai dạng hiển thị hình ảnh trong khung trình diễn: kiểu ảnh lớn
(fullsize) và kiểu thu nhỏ (thumbsize). Trong phần hướng dẫn này, tác giả sử
dụng kiểu ảnh lớn (ảnh trượt) có kích thước 400×280, kiểu ảnh thu nhỏ có kích
thước 160×80. Tùy theo yêu cầu thiết kế, bạn có thể tự quy định kích thước của
hai kiểu ảnh này.
Để thực hiện,
bạn vào menu Configuration, tìm khung Media, bấm vào
liên kết Image Style. Bạn bấm Add Style rồi nhập
chữ fullzize vào ô Style name, bấm Create
new style. Trong khung Effect, bạn chọnResize rồi
bấm nút Add, nhập hai kích thước vào ô Width, Height (Width:
400, Height: 280). Thực hiện tương tự đối với kiểu ảnh thu nhỏ thumbsize.
- Tạo kiểu nội
dung mới
Để tạo kiểu nội
dung, bạn bấm Add content types, có thể đặt tên vào ô Name là Article
Slider, nhập nội dung vào ô Description và giữa nguyên các
tùy chọn khác. Riêng ở mục Publishing options, bạn chỉ giữ tùy
chọn Published và bỏ dấu chọn ở ô Promoted to front
page. Khi xong, bạn bấm Save and add fields.
Tiếp theo, bạn
thêm vào các trường mới:
+ Image
field: ô Label (nhập
vào Slider Image), ô field_(nhập vào slider_image), khung Type
of data to store(chọn Image), bấm Save, bấm Save field
settings. Đến bước thiết lập kiểu nội dung Article Slider, bạn
nhập vào Label- tên của mục hình ảnh trong kiểu nội dung, Help text-
phần văn bản gợi ý, Allow file extensions- các định dạng ảnh cho
phép, Maximum image resolution- kích thước ảnh tối đa được phép tải
lên, Minimum image resolution- kích thước ảnh tối thiểu được phép
tải lên, Maximum upload size- dung lượng tập tin ảnh tối đa được
tải lên,... bấm Save settings.
+ Link field: ô Label (nhập vào
Slider Link), ô field_(nhập vào slider_link), khung Type of data to
store (chọn Link), bấm Save, bấm Save field
settings. Sau đó, bạn cần thiết lập về kiểu hiển thị mục Slider
Link trong kiểu nội dung Article Slider rồi bấm
bấm Save settings.
Ở thẻ Manage
Fields, bạn bấm Show row weights để thay đổi thứ tự sắp
xếp của các trường trong kiểu nội dung Article Slider. Lưu ý, bạn
có thể xem lại cách tạo kiểu nội dung mới ở mục 8 phần 4 của loạt bài viết này.
- Tạo bài viết
cho kiểu nội dung Article Slider
Sau khi đã tạo
xong kiểu nội dung Article Slider, bạn cần tạo khoảng 4 bài viết để
làm minh họa cho phần trình diễn bài viết. Việc viết bài cũng thực hiện tương
tư như các kiểu nội dung khác, tức là bấm Add content, bấm vào liên
kết Article Slider, nhập vào tiêu đề bài viết, chọn ảnh đại
diện Article Image,…
Để tạo kiểu
hiển thị mới, bạn vào menu Structure, bấm vào liên kết Views,
bấm Add new view. Bạn nhập vào ô View name tên
kiểu hiển thị (ví dụ Article Slider), chọn Content ở
khung Show, chọn Article Slider ở khung of
type. Bạn bỏ dấu chọn ở ô Create a page, rồi đánh dấu chọn vào
ô Create a block, chọnSlideshow ở trường Display
Format, chọn fields ở trường of, bấm Continue
& edit.
Trong
khung Display, bạn bấm nút Add ở mục Fields,
chọn Content ở trường Filter để lọc ra các
nội dung, rồi tìm đến ô Content Slider Link, bấm Add and
configure fields. Ở trang tiếp theo, bạn bỏ dấu chọn ở ôCreate a label,
đánh dấu chọn vào ô Exclude from display, bấm Apply (all
displays).
Thực hiện tương
tự đối với Content Slider Image nhưng không đánh dấu chọn vào ô Exclude from
display và bạn cần thiết lập thêm một số tùy chọn khác: Fomatter (chọn Image),
Image style (chọn kiểu hình ảnh fullsize), Link image to (chọn Nothing), đánh
dấu chọn vào ô Output this field as a link ở khung Rewrite results (nhập vào ô
Link path cú pháp [field_slider_link]), bấm Apply (all displays).
Bạn thực hiện
thêm một lần nữa các thao tác trên đối với dạng hình ảnh thu nhỏ (thumbsize),
tức là đến bước Image style chọn thumbsize nhưng bạn cần đánh dấu chọn vào ô
Exclude from display. Trước khi thiết lập kiểu trình diễn, bạn cần tải về gói
tập tin tạo hiệu ứng jQuery Cycle Plugin. Sau khi tải về, bạn tiến hành giải nén vào thư mục libraries
(news\sites\all\libraries\), rồi tạo một thư mục con trong thư mục này (tên là jquery.cycle),
sao chép tập tin jquery.cycle.all.min.js vào thư mục con vừa tạo. Trở lại khung
Display ở cửa sổ quản trị, bạn bấm Settings ở mục Formats.
Trong hộp thoại
hiện ra, bạn cần thiết lập ở các mục: List type (chọn
Unordered list), Effect (chọn fade),Action (chọn
Pause on hover), Widgets (có thể chọn các tùy chọn trong Top
widgets hoặc Bottom widgets). Nếu chọn Paper ở mục Bottom
widgets thì bạn thêm các tùy chọn khác: Paper type (chọn
Fields), Paper fields (chọn Content Slider Image và Activate Slide
and Pause on Pager Hover), bấm Apply (all displays).
- Kích hoạt và
thiết lập cho block View: Article Slider
Đến đây, bạn đã
có được khung trình diễn bài viết và chỉ cần đặt vào một khung tính năng trên
website (có thể xem lại ở mục 4 phần 3). Sau khi kích hoạt xong, bạn bấm configuration của block
View: Article Slider rồi nhập <none> vào
ô Block Title để không hiển thị tiêu đề của khung tính năng,
bấm Save block.
Ngoài ra, bạn
có thể tự tạo riêng một khung tính năng cho Article Slider bằng
cách chỉnh sửa tập tin có phần mở rộng .info và tập tin page.tpl.php của
giao diện đang dùng.
st: Thịnh Huy
No Comment to " Tạo hiệu ứng trình diễn bài viết cho Drupal "