Mô tả chi tiết tính năng quản lý Media Popup

Media Popup là cửa sổ tương tác giúp người dùng chọn hoặc tải lên hình ảnh (thường dùng cho avatar hoặc hình đính kèm) trong quá trình chỉnh sửa hồ sơ hoặc nội dung. Tính năng này được tích hợp theo kiểu lightbox popup, thân thiện và dễ sử dụng.

Thành phần chính của Media Popup

Khi nhấn vào nút "Change" trong phần chọn avatar (hoặc vị trí ảnh khác), hộp thoại Media Popup hiện lên với các thành phần: Screenshot 2025-05-07 124712.png
  • Tiêu đề: Media kèm nút Add New (để tải ảnh mới lên).
  • Thanh tìm kiếm: Cho phép lọc ảnh theo từ khóa.
  • Bộ lọc dropdown: Cho phép lọc theo loại phương tiện (All, Images, Videos, etc.).
  • Danh sách media hiển thị: Các ảnh đã tải lên trước đây, hiển thị dưới dạng thumbnail.
  • Checkbox chọn ảnh: Dùng để chọn ảnh cần dùng.
  • Nút X (xóa): Xóa media khỏi danh sách.
  • Thông báo số lượng: Ví dụ: "Showing 1 of 1 media items".

Hành động chính

  • Add New: Mở trình tải file, cho phép chọn ảnh từ máy tính để tải lên hệ thống
  • Chọn ảnh: Tích vào ô checkbox dưới ảnh để chọn làm avatar hoặc đính kèm
  • Xóa ảnh: Nhấn vào dấu X đỏ góc trên để xóa ảnh khỏi danh sách
  • Tìm kiếm ảnh: Nhập từ khóa vào ô "Keyword" để lọc ảnh theo tên hoặc mô tả

Hướng dẫn sử dụng

Cách sử dụng Media Popup

Truy cập vào phần chỉnh sửa avatar hoặc chọn ảnh bất kỳ.

Thiết kế chưa có tên (24).png

Nhấn vào nút "Change" để mở cửa sổ Media Popup.

Thực hiện một trong các hành động sau:

  • Chọn ảnh sẵn có: Tích vào checkbox ảnh → ảnh được cập nhật.
Screenshot 2025-05-07 125832.png
  • Tải ảnh mới: Nhấn Add New → chọn ảnh từ máy tính → hệ thống sẽ tải lên và hiển thị trong danh sách.
Screenshot 2025-05-07 125618.png
  • Xóa ảnh: Nhấn X nếu muốn xóa ảnh đã lưu.

Sau khi chọn xong, popup tự đóng và ảnh được cập nhật vào mục tương ứng (như avatar).

Thiết kế chưa có tên (25).png

Lợi ích

  • Thao tác nhanh chóng: Quản lý hình ảnh chỉ trong một popup, không cần chuyển trang.
  • Trực quan và thân thiện: Dễ sử dụng kể cả với người không chuyên.
  • Tái sử dụng hình ảnh: Hệ thống lưu lại ảnh đã tải để dùng lại khi cần.
  • Hỗ trợ đa định dạng (tùy config): Có thể mở rộng để hỗ trợ video, âm thanh, hoặc tài liệu khác.