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

Kiếm Tiền Từ Việc Xuất Bản - Biến Tri Thức Thành Tài Sản

Theo Dõi

Tiếp cận thị trường toàn cầu một cách hiệu quả và tạo ra lợi nhuận nhanh nhất từ việc xuất bản blog và bản tin điện tử newsletter với 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.

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.

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/lottie-player@latest/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.

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).