Drupal: Hướng dẫn cài đặt View Slideshow trên Drupal 8


Đăng ký nhận thông báo về những video mới nhất

Video bài viết:

Mục lục bài viết:

Bước 1: Cài đặt các thành phần cần thiết

- Mở local code ra như hình sau:

- Kết quả ta được danh mục như sau:

- Tại đây ta tạo một thư mục có tên libraries, sau đó download và giải nén các file sau vào thư mục libraries:

+ jquery.cycle

+ jquery.hoverIntent

+ jquery.pause

+ json2

- Kết quả là trong thư mục libraries sẽ cấu trúc gồm các thư mục sau:

- Download module View Slideshow sau:

+ views_slideshow-8.x-4.6

- Bạn cũng nên cài đặt module Admin Toolbar để tiện theo dõi bài viết này hơn:

admin_toolbar-8.x-1.25

- Tiến hành cài đặt và ta được kết quả:

cách xây dựng slideshow view trên Drupal 8

Bước 2: Tạo Content Type

- Bây giờ ta sẽ tiến hành tạo một conten type riêng. Bạn vào Structure > Content types > Add content type như hình dưới:

- Điền tên content type mới là View Slideshow như hình dưới:

- Nhấn nút Save and manage fields ta được giao diện như sau:

- Xóa bỏ field có nhãn (LABEL) là Body đi rồi nhấn nút "+ Add field" để tạo một field mới như hình sau:

- Nhấn nút "Save and continue" sau đó lại nhấn nút "Save settings" ta được kết quả là:

- Bây giờ ta sẽ tạo một content có kiểu View Slideshow bằng cách chọn như hình sau:

- Sau đó ta  đưa vào một số ảnh để làm demo slideshow (ở đây thầy chọn 2 ảnh):

- Sau khi chọn xong ảnh ta nhấn nút "Save" để lưu lại.

Bước 3: Tạo View Slideshow

- Bước tiếp theo là ta tạo View như hình sau:

- Điền và chọn các thông số như hình dưới đây:

- Nhấn nút "Save and edit" ta được form như hình dưới đây:

- Tại mục "FIELDS" nhấn vào link "Content: Title" sẽ hiện ra hộp thoại như sau:

- Nhấn vào mục "Remove" để xóa đi, kết quả là:

- Nhấn nút Add như khoanh đỏ ở trên, rồi tìm field có tên Image, tick chọn như hình dưới rồi nhấn nút "Add and configure fields":

- Nhấp vào mục "MULTIPLE FIELD SETTINGS" rồi nhấn bỏ chọn mục "Display all values in the same row" như hình dưới rồi sau đó nhấn nút "Apply":

- Tiếp theo tại phần "FORMAT" nhấn vào link "Settings" sẽ hiện ra hộp thoại, bạn thanh cuộn xuống dưới cuối vào chọn như hình sau:

- Sau đó bạn kéo xuống dưới cuối sẽ thấy hiển thị slideshow dạng như thế này:

- Bạn nhấn nút "Save" để lưu lại toàn bộ quá trình tạo View.

Bước 4: Đặt View Slideshow vào Block

- Tiếp theo ta sẽ thiết lập nơi đặt View thông qua Block. Bạn vào chọn Block layout như sau:

- Bạn kéo đến phần "Highlighted" rồi nhấn nút "Place block" như hình sau:

- Lúc này sẽ hiện ra hộp thoại Place block trong đó hiển thị danh sách các View. Bạn tìm đến View "View Slideshow" và nhấn nút "Place block":

- Sau đó bạn nhấn nút "Save block" ta sẽ thấy xuất hiện thêm View Slideshow như sau:

- Kéo xuống dưới cùng và nhấn nút "Save blocks" để hoàn viện việc đặt View Slideshow vào vị trí mong muốn.

- Cuối cùng nhấn "Back to site" để quay lại trang web và xem kết quả:

Kết thúc.


Nếu bạn có điều thắc mắc, bạn hãy comment cho V1Study để được giải đáp.
Bài viết này được chia sẻ bởi LongDT. Nếu bạn muốn chia sẻ bài viết, bạn hãy Đăng ký làm thành viên!
« Prev
Copied !!!