Features

View Modes

Grid View

Purpose: Visual browsing of media files with thumbnail previews

Layout:

• Responsive grid: 2 columns (mobile), 3-5 columns (desktop)
• Aspect ratio maintained for thumbnails
• Hover effects for better interaction
• Checkbox overlay for selection

Display Information:

• Thumbnail preview (images) or file type icon
• File name on hover
• File size indicator
• Selection checkbox

Use Cases:

• Quick visual browsing
• Identifying images at a glance
• Casual media management
• Visual content organization

List View

Purpose: Detailed information display in tabular format

Layout:

• Single column list
• Consistent row height
• Sortable columns
• Checkbox column for selection

Display Information:

• Thumbnail (small)
• File name
• File size
• Upload date
• File type icon

Use Cases:

• Finding specific files
• Comparing file sizes/dates
• Text-based file management
• Large library navigation

Upload Features

Drag and Drop Upload

Functionality:

• Drag files from file explorer
• Drop onto media library area
• Visual drop zone indicator
• Multiple file support

Visual Feedback:

• Drop zone highlight
• File count indicator
• Upload progress per file
• Success/error notifications

Supported Files:

• Images (JPEG, PNG, GIF, WebP, SVG)
• Videos (MP4, MOV, AVI, WebM)
• Documents (PDF, DOC, DOCX, etc.)
• Archives (ZIP, RAR)

SVG Upload Support

Feature Description:

• Enable SVG file uploads to the media library
• Automatic sanitization of SVG files before upload
• Security-first approach to prevent malicious code
• Removes potentially dangerous elements and attributes

Settings:

• Category: Media
• Setting Name: Enable SVG Uploads
• Type: Toggle
• Description: Allow SVG (Scalable Vector Graphics) files to be uploaded to the media library. All SVG files are automatically sanitized before upload to remove potentially malicious code, ensuring safe handling of SVG files.
• Activation: No license required
• Default State: Disabled

Security Features:

• Automatic Sanitization: All SVG files are sanitized before upload
• Code Removal: Removes script tags and event handlers
• Structure Validation: Validates SVG structure
• XSS Prevention: Prevents cross-site scripting attacks
• Safe Rendering: Ensures safe display of SVG files

Use Cases:

• Upload logo files as SVG
• Use scalable graphics
• Maintain image quality at any size
• Reduce file sizes for simple graphics
• Support modern web graphics

Technical Details:

• SVG files are processed server-side
• Sanitization happens before file storage
• Original file structure is validated
• Dangerous elements are removed
• Safe attributes are preserved

File Selection Upload

Process:

1. Click upload button
2. File picker opens
3. Select one or multiple files
4. Files upload automatically
5. Progress shown per file

Features:

• Multiple file selection (Ctrl/Cmd+click)
• File type filtering in picker
• Size validation
• Error handling

Upload Progress

Progress Indicators:

• Per-file progress bar
• Percentage complete
• File name display
• Current file indicator

Status Messages:

• "Uploading..."
• "Processing..."
• "Complete"
• Error messages for failures

Media Details Panel

Panel Layout

Location: Right side drawer/sidebar

Sections:

1. Media Preview
2. Metadata Editing
3. File Information
4. Usage Tracking
5. Quick Actions

Media Preview

Size Selector:

• Full size
• Large
• Medium Large
• Medium
• Thumbnail

Display Information:

• Image dimensions (e.g., "1200 × 1200")
• File size (e.g., "9.7 KB")
• MIME type (e.g., "image/webp")
• Upload date

Features:

• Click to view full size
• Size switching without reload
• Responsive preview
• Zoom capability

Metadata Editing

Editable Fields:

Title:

• Media file title
• Used in media library display
• Searchable field
• Auto-saves on blur

Alt Text:

• Accessibility description
• Important for SEO
• Screen reader support
• Required for images

Caption:

• Display caption
• Shown with media in posts
• Optional field
• Rich text support

Description:

• Detailed description
• Internal notes
• Not displayed publicly
• Full text searchable

Tags:

• Custom tags for organization
• Autocomplete suggestions
• Multiple tags per file
• Filter by tags

File Information

Details Displayed:

• Filename: Original uploaded filename
• ID: WordPress media ID
• Modified: Last modification date
• File Size: Human-readable size
• Dimensions: Width × height (images)
• MIME Type: File type identifier

Formatting:

• Human-readable dates
• Formatted file sizes (KB, MB, GB)
• Clear labels
• Copy-to-clipboard for URLs

Usage Tracking

Information Displayed:

• List of posts using the media
• List of pages using the media
• Custom post types using media
• "Not used" indicator

Features:

• Click to navigate to content
• Real-time usage updates
• Deep search capability
• Usage count

Quick Actions

Optimize Image

Functionality:

• Compress image file size
• Maintains visual quality
• Reduces storage usage
• Improves page load times

Process:

1. Click "Optimize Image" button
2. Image processed on server
3. Compression statistics shown
4. Original backed up (optional)

Statistics:

• Original size
• Compressed size
• Compression percentage
• Quality maintained

Replace Image

Functionality:

• Replace file while keeping media ID
• Maintains all relationships
• Preserves metadata
• Updates all references

Process:

1. Click "Replace Image"
2. Select new file (or drag & drop)
3. File validated
4. Replacement processed
5. All references updated

Use Cases:

• Updating outdated images
• Fixing incorrect uploads
• Improving image quality
• Changing file format

Edit Image

Functionality:

• Opens built-in image editor
• Crop, rotate, resize
• Apply adjustments
• Save edited version

Editor Tools:

• Crop tool
• Rotate (90° increments)
• Flip (horizontal/vertical)
• Resize
• Brightness/contrast
• Filters

Features:

• Real-time preview
• Undo/redo
• Aspect ratio lock
• Quality control

Delete

Functionality:

• Permanently remove media file
• Removes from server
• Updates all references
• Cannot be undone

Process:

1. Click "Delete" button
2. Confirmation dialog
3. File deleted
4. References updated
5. Success notification

Safety:

• Confirmation required
• Usage warning if used
• Permanent action
• No recovery option

Sorting & Organization

Sort Options

Available Sorts:

• Date: Upload date (newest/oldest)
• Name: Alphabetical (A-Z/Z-A)
• Size: File size (largest/smallest)
• Type: File type grouping

Sort Direction:

• Ascending (↑)
• Descending (↓)
• Toggle with sort button

Pagination

Features:

• Items per page: 30 (default)
• Page navigation
• Total page count
• Item count display

Navigation:

• Previous page button
• Next page button
• Page number display
• Jump to page (future)

Context Menu

Right-click Actions:

• View details
• Edit
• Duplicate
• Delete
• Download

Features:

• Context-aware menu
• Keyboard shortcuts
• Quick actions
• Non-intrusive

Keyboard Shortcuts

Navigation:

• Arrow Keys: Navigate items
• Enter: Open details
• Space: Select/deselect
• Esc: Close details panel

Selection:

• Ctrl/Cmd + A: Select all
• Shift + Click: Range selection
• Ctrl/Cmd + Click: Multi-select

Actions:

• Delete: Delete selected
• Ctrl/Cmd + D: Duplicate
• Ctrl/Cmd + E: Edit
• Ctrl/Cmd + S: Save

Responsive Design

Mobile View

Adaptations:

• Single column grid
• Simplified controls
• Touch-optimized
• Swipe gestures

Features:

• Thumbnail-only view
• Simplified details panel
• Touch selection
• Mobile upload

Tablet View

Adaptations:

• 2-3 column grid
• Full feature set
• Touch support
• Optimized spacing

Desktop View

Adaptations:

• 4-5 column grid
• Full feature set
• Keyboard shortcuts
• Multi-window support

Dark Mode

Full Support:

• Dark theme throughout
• High contrast
• Readable text
• Consistent styling

Features:

• Automatic detection
• Manual toggle
• Persistent preference
• Smooth transitions