Xem Nội Dung Ngay

Hướng dẫn cách chèn ảnh động LottieFiles vào bài viết Ghost

LottieFiles là gì và cách dùng LottieFiles cho các bài viết Ghost như thế nào?

Cường Trần
Cường Trần
4 phút đọc
Hướng dẫn cách chèn ảnh động LottieFiles vào bài viết Ghost

Ảnh động luôn là điều tuyệt vời nhất trong thiết kế website vì nó cực kỳ ấn tượng với người xem. Trong việc viết blog, ảnh động tuy không giúp ích gì cho SEO nhưng mang lại trải nghiệm đọc với nội dung tuyệt vời.

Nhiều bạn nghĩ ngay đến định dạng ảnh gif, định dạng của ảnh động phổ biến nhất thế giới hoặc video với loop autoplay giả ảnh động. Tuy nhiên, hai cách này có quá nhiều yếu điểm gây khó chịu.

  1. File size quá lớn gây ảnh hưởng đến tốc độ tải trang và trải nghiệm người dùng.
  2. Ảnh không được rõ nét trên mọi thiết bị

Một giải pháp đang là xu hướng hàng đầu của các Web Designer hiện nay là dùng LottieFiles để nhúng ảnh động.

Bài viết này sẽ hướng dẫn bạn nhúng ảnh động vào bài viết đơn lẻ của Ghost từ thư viện miễn phí của LottieFiles, tương tự như bạn dùng Gifphy cho ảnh động gif.

LottieFiles là gì?

LottieFiles là một nền tảng giúp website "đọc được" các file định dạng JSON, một định dạng file thời thượng hiện nay vì nó có kích thước siêu nhỏ.

Ghost CMS cũng dùng JSON cho cơ sở dữ liệu của mình, đó là lý do blog Ghost luôn nhanh bất kể hosting bạn ở đâu vì truy vấn nội dung toàn bằng JSON, mọi thứ JSON.

Nhờ vào đó, các ảnh động của Lotties có dung lượng size nhỏ gấp 6 lần và nhanh gấp 10 lần gif hay video.

LottieFiles là gì

Nếu bạn dùng WordPress thì Elementor Builder gần đây cũng đã thêm Lotties vào tính năng thiết kế landing page của mình.

Cách nhúng Lotties vào bài viết Ghost

Bạn không thể nhúng và chạy các ảnh động của LottieFiles nếu site bạn chưa có Lottie Player. Lottie Player là một JavaScript giúp chuyển đổi file JSON thành hình động trên site của bạn.

Nếu bạn sử dụng Lotties nhiều thì bạn có thể chèn hẳn vào theme để dùng trong thư mục assets/javascript. Nếu không, bạn nên dùng Lottie Player CDN sẽ đơn giản hơn và nhanh hơn, hạn chế sai sót khi sửa theme.

Đầu tiên, bạn cần phải có tài khoản Lotties thì mới dùng được.

Sau khi tạo xong tài khoản, bạn vào thư viện ảnh động miễn phí của Lottie, chọn cho mình ảnh thích hợp với chủ đề bài viết, bấm vào nút HTML để đến trang Generate Code.

Tại trang Generate Code, bạn có thể chỉnh kích thước và tốc độ cho phù hợp ý muốn của bạn. Bạn nên tắt Controls để ẩn nút Play để không bị trông giống Video.

Generate Code trong LottieFiles
Generate Code

Sau khi đã tinh chỉnh xong, bạn Copy phần mã Generated Code bên dưới và dán vào HTML block trong bài viết của Ghost.

Code này gồm 2 script:

<script src="https://unpkg.com/@lottiefiles/[email protected]/dist/lottie-player.js"></script>

<lottie-player src="https://assets5.lottiefiles.com/packages/lf20_gghk4m0m.json"  background="transparent"  speed="1"  style="width: 300px; height: 300px;"  loop  autoplay></lottie-player>
  1. Lottie Player script
  2. Lottie Asset Script

Nếu chỉ chèn 1 hình thì bạn đã hoàn xong, rất đơn giản.

Bonus: Tạo và tải ảnh LottieFiles của chính bạn

Nếu thư viện ảnh động không đủ đáp ứng cho nhu cầu của bạn thì LottieFiles còn có chợ Marketplaces, là nơi đăng bán các ảnh động LottieFiles của các nhà thiết kế trên khắp thế giới.

Bạn cũng có thể mướn các nhà thiết kế ảnh động ở LottieFiles bằng cách liên hệ trực tiếp với họ tại chợ Marketplace.

Nếu bạn muốn tiết kiệm chi phí hơn thì có thể tìm đến Lottie Freelancer ở Fiverr với $25 cho một mẫu thiết kế.

Khi bạn mướn người thiết kếcho bạn thì bạn sẽ nhận được file định dạng JSON, sau đó bạn chỉ cần tải lên LottieFiles như một preview Lottie asset để nhúng vào site của mình.

Lời kết...

Trong trường hợp bạn muốn chèn nhiều hình thì bạn nên tách Lottie Player script, dán nó vào body của code injection của bài viết.

Chèn LottieFiles vào ghost foot

Sau đó tất cả HTML block chỉ chứa Lottie Asset script mà thôi.

Cách làm này là cách chèn tiêu chuẩn của LottieFiles vào trong từng bài viết đơn của Ghost. Khuyến nghị bạn nên làm theo kể cả chỉ có 1 ảnh Lottie đi nữa (cho quen).

Hướng Dẫn

Bạn có thể quan tâm

Tự tạo thông báo email khi có thành viên mới đăng ký bằng IFTTT

Hướng dẫn tự tạo thông báo email thời gian thực khi có thành viên mới đăng ký bằng IFTTT miễn phí.

Tự tạo thông báo email khi có thành viên mới đăng ký bằng IFTTT

Thủ thuật chuyển đổi "đồng loạt" mọi định dạng ảnh sang WebP

Hướng dẫn chuyển đổi "all-in-one" đồng loạt mọi định dạng ảnh cho bài viết sang webp với một lệnh đơn giản.

Thủ thuật chuyển đổi đồng loạt mọi định dạng ảnh sang WebP

Mẹo tạo popup thông báo đơn giản cho website Ghost

Hướng dẫn cách tạo Popup thông báo cho Ghost siêu nhanh và đơn giản.

Mẹo tạo popup thông báo đơn giản cho website Ghost
Cường Trần

Cường Trần

Cường chuyên viết về giải pháp liên quan đến WordPress và Ghost, là một How-to blogger thực chiến.