Chuyển tới nội dung chính

Quản lý Banner & Slider

Route: /admin/cms/banners (Truy cập qua Sidebar Menu > CMS > Thiết lập trang > Quản lý Banner)

Trong hệ thống CMS, Banner (hình ảnh quảng cáo, sự kiện) không tồn tại độc lập mà luôn được quản lý theo mô hình Khung biển & Poster:

  • Nhóm Banner (Group): Đóng vai trò như một Khung biển quảng cáo được gắn cố định tại một vị trí trên website (Ví dụ: Slider Trang chủ, Banner góc phải Khoa Y).
  • Banner (Image): Là các Tấm Poster được dán luân phiên lên khung biển đó.

Mô hình này cho phép hệ thống áp dụng Cơ chế Phân quyền: Đơn vị nào được giao quản lý "Khung biển" nào thì chỉ nhân sự đơn vị đó mới được phép dán "Poster" lên đó.

1. Màn hình Danh sách Nhóm Banner​

Khi truy cập, giao diện hiển thị danh sách toàn bộ các nhóm banner đã được cấu hình trong hệ thống:

Danh sách Nhóm Banner

  • Thống kê: Nắm bắt tổng số nhóm banner, số nhóm đang hoạt động và số nhóm tạm khóa.
  • Tìm kiếm & Bộ lọc: Tìm kiếm nhanh theo mã hoặc tên nhóm banner, lọc theo đơn vị quản lý và trạng thái hoạt động.
  • Bảng dữ liệu:
    • STT, Tên Nhóm Banner, Mã (Code): Thông tin định danh của nhóm banner.
    • Trạng thái: Hiển thị nhãn Hoạt động (xanh) hoặc Tạm khóa (đỏ).
    • Thao tác: Xem / Cấu hình Banner 👁️ (/admin/cms/banners/detail?id=:id), Chỉnh sửa ✏️ (/admin/cms/banners/upsert?id=:id), Xóa 🗑️.

2. Không gian làm việc (Workspace)​

Khi thêm mới hoặc sửa một Nhóm Banner, màn hình làm việc được chia làm 2 phân khu cấu hình từ tổng quan đến chi tiết:

Cấu hình Banner

Phần trên: Cấu hình Nhóm (Khung biển)​

Khu vực này định nghĩa các thuộc tính cơ sở của một vị trí quảng cáo:

  • Tên Nhóm Banner: Tên gọi để dễ quản lý (VD: Công đoàn, Slider Chính).
  • Mã Code: Mã định danh viết liền (VD: CONG_DOAN, HOME_MAIN). Tự động sinh khi nhập tên và kiểm tra trùng lặp thời gian thực. Mã này được lập trình viên sử dụng để xác định vị trí hiển thị trên website, do đó hạn chế thay đổi sau khi đã khởi tạo thành công.
  • Đơn vị quản lý: Cấp quyền cho đơn vị được phép sử dụng khung banner này (Mặc định: Cấp trường).
  • Trạng thái hoạt động: Công tắc Bật/Tắt hoạt động của nhóm banner.

Phần dưới: Bàn làm việc & Cấu hình Hình ảnh (Poster)​

Khu vực này hiển thị danh sách các hình ảnh đang có trong nhóm. Bạn bấm nút + Thêm Banner Mới ở dưới cùng để bắt đầu thêm ảnh.

Hệ thống tích hợp bộ công cụ chọn ảnh hiện đại (BannerImagePicker) cho phép dán URL trực tiếp, tải ảnh từ máy tính hoặc lựa chọn từ Thư viện Media:

A. Cơ chế Đa màn hình (Responsive Design) & Quy chuẩn kích thước:

  • Hình ảnh PC (Bắt buộc): Dành cho màn hình máy tính.
    • Tỷ lệ chuẩn: 2.67 : 1 (Kích thước khuyên dùng: 1920 × 720 px hoặc 2208 × 836 px).
    • Hiển thị nhãn badge PC: 1920 × 720 (2.67 : 1) trực quan trên khung ảnh xem trước.
  • Hình ảnh Mobile (Tùy chọn): Dành cho điện thoại di động.
    • Tỷ lệ chuẩn: 3 : 4 (Kích thước khuyên dùng: 768 × 1024 px).
    • Hiển thị nhãn badge Mobile: 768 × 1024 (3 : 4) trên khung ảnh xem trước.
  • Định dạng & Dung lượng: Hỗ trợ tối đa 50 MB/tệp, định dạng JPG, JPEG, PNG, GIF, SVG, WebP.

B. Đích đến (URL Đích):

  • Nếu muốn khách hàng click vào ảnh sẽ được chuyển hướng đi nơi khác (tới bài thông báo chi tiết, hoặc trang đăng ký), hãy dán đường link đó vào ô Đường dẫn đích (URL click).
  • Hệ thống hỗ trợ tách biệt ngôn ngữ: Bạn có thể tải ảnh có chữ Tiếng Việt + Link Tiếng Việt riêng (tab Tiếng Việt), và ảnh có chữ Tiếng Anh + Link Tiếng Anh riêng (tab English).

2. Thao tác điều khiển nhanh​

Trên góc phải của mỗi khung ảnh sẽ có bộ công cụ điều khiển:

  • Sắp xếp (Kéo thả): Bấm giữ và dùng các mũi tên Lên/Xuống để đổi vị trí. Ảnh nằm trên cùng sẽ hiển thị đầu tiên trên website.
  • Ẩn tạm thời: Dùng công tắc bật/tắt. Rất hữu ích khi sự kiện đã qua nhưng bạn chưa muốn xóa hẳn ảnh đi để năm sau dùng lại.
  • Xóa (Thùng rác): Gỡ bỏ hoàn toàn khung ảnh.
LƯU Ý QUAN TRỌNG

Những tấm poster bạn vừa tải lên hoặc thay đổi thứ tự sẽ chưa được dán ra ngoài website cho đến khi bạn bấm nút Lưu tất cả thông tin (Nút màu xanh dưới cùng).