Nhảy đến nội dung

Mẫu xem trước

Mẫu xem trước cho phép bạn cấu hình các tham số hình ảnh được sử dụng trong các thuộc tính. Khi áp dụng mẫu cho thuộc tính có loại "Hình ảnh" hoặc "Nhóm hình ảnh", bạn sẽ nhận được hình ảnh được chuẩn hóa theo tiêu chuẩn được chỉ định trong mẫu xem trước. Điều này rất tiện lợi nếu thiết kế của dự án của bạn nhạy cảm với kích thước hình ảnh. Bằng cách cấu hình mẫu xem trước, bạn có thể thay đổi các tham số hình ảnh mà người dùng cuối sẽ thấy.

Để bắt đầu làm việc với các mẫu xem trước, hãy mở phần "Cài đặt" và sau đó chuyển đến phần "Mẫu xem trước". Trong phần này có danh sách các mẫu đã được tạo, cũng như biểu mẫu để tạo mẫu mới.

Tạo mới​

Trong biểu mẫu tạo, hãy chỉ định:

  • Tên - Chuỗi không duy nhất.
  • Thẻ - Chuỗi duy nhất.

Sau khi điền xong, nhấn nút "Tạo"

Cấu hình​

Chọn trong danh sách chung các mẫu xem trước mà bạn muốn cấu hình và nhấn vào biểu tượng bánh răng Tối ưu hóa hình ảnh để chuyển sang chế độ chỉnh sửa. Để tạo các tham số xem trước, nhấn nút "Thêm". Bạn có thể cấu hình định dạng cho hình ảnh dọc, ngang và vuông.

Trong các biểu mẫu tương ứng, hãy điền:

  • Chiều rộng và Chiều cao (Cạnh của hình vuông) - Kích thước tính bằng pixel mà hình ảnh sẽ được đưa vào.
  • Loại căn chỉnh - Đường sẽ trở thành trục trung tâm khi hình ảnh bị nén.

Mẫu mặc định​

Sau khi tạo một vài bộ trong một mẫu, bạn có thể chuyển đổi mẫu mặc định. Nó được sử dụng để hiển thị xem trước trong CMS.

Xóa​

Chọn trong danh sách chung các mẫu xem trước mà bạn muốn xóa và nhấn vào biểu tượng xóa Chỉnh sửa để chuyển sang chế độ chỉnh sửa. Xác nhận hành động trong hộp thoại.

LQTP​

Mỗi mẫu xem trước là một mảng gồm hai phần tử:

  • Hình thu nhỏ (base64 WebP)

Định dạng: WebP (tối ưu hóa cho việc tải nhanh). Kích thước: không quá vài trăm byte. Được nhúng trực tiếp vào đối tượng dưới dạng base64-URI, điều này giúp tăng tốc độ hiển thị trong khi hình ảnh đầy đủ vẫn đang được tải.

  • Xem trước được tạo ra Hình ảnh chính của xem trước, thay thế hình thu nhỏ sau khi tải hoàn tất.

Lợi ích:

  • Hiển thị hình thu nhỏ ngay lập tức (không cần thêm yêu cầu HTTP).
  • Chuyển tiếp mượt mà đến xem trước đầy đủ sau khi tải xong.
  • Tiết kiệm băng thông nhờ sử dụng WebP nén.

Ví dụ về cấu trúc:

{
  "preview_template": [
    "data:image/webp;base64,UklGRl...", // Hình thu nhỏ (base64 WebP)  
    "https://example.com/full-preview.jpg" // Xem trước đầy đủ  
  ]
}

Cách tiếp cận này cải thiện trải nghiệm người dùng, đặc biệt là khi kết nối internet chậm.

Bạn có thể tìm hiểu thêm về LQTP tại đây. Cũng có thể xem video