Media Center

Overview

Media Center replaces the default WordPress Media Library with a full-featured file management interface. It adds hierarchical folders, color-coded tags, image editing, compression with format conversion (WebP, AVIF), and backup integration. The entire UI is built with vanilla JavaScript and communicates with the backend through a REST API.

Once the service is enabled, the default Media menu in WordPress admin is replaced with the Media Center interface. No additional configuration is required.

Organization

Media Center provides four ways to browse and filter your files, accessible from the sidebar on the left side of the screen.

Folders

Folders create a hierarchical structure for your media files, similar to a file system. Each folder can be assigned a color for visual identification.

• Up to three levels of nesting (root, subfolder, sub-subfolder).
• Each file belongs to one folder at most. Files not assigned to any folder appear in the Uncategorized bucket.
• Folders display a count of the files they contain.
• Right-click a folder to rename it, change its color, create a subfolder, move it, or delete it.

Tags

Tags provide a flat, cross-cutting classification layer. Unlike folders, a single file can have multiple tags, and tags do not nest.

• Each tag has a name and an optional color.
• Files without any tag appear in the Untagged bucket.
• Tags are managed from the Tags tab in the sidebar or from within the file detail modal.

Dates

The Dates tab groups files by upload year and month. This view is read-only and is derived automatically from the upload timestamps stored by WordPress.

Types

The Types tab groups files by MIME type into categories: Images, Videos, Audio, PDFs, Spreadsheets, Word documents, Presentations, Text files, and Other.

File Browser

The main area of the screen displays your files in either a grid or a list view, toggled from the toolbar.

• Grid view: thumbnail cards with the file title and a type icon.
• List view: a table with columns for filename, type, size, date, and author.
• Search: filters files by title and filename.
• Sort: by date, name, or file size, in ascending or descending order.
• Pagination: configurable items per page (default 40, maximum 100) with a Load More button.

Uploading files

Drag and drop files anywhere onto the file browser, or click the Upload button in the toolbar. Files are validated against the maximum upload size and allowed MIME types configured in WordPress. If a folder is currently selected, uploaded files are automatically assigned to that folder.

Multi-select and bulk actions

Hold Ctrl (or Cmd on Mac) and click to select individual files. Hold Shift and click to select a range. Once multiple files are selected, available bulk actions include deleting, downloading as a ZIP file, moving to a folder, and adding tags.

File Detail Modal

Click any file to open the detail modal. The modal is organized into tabs that vary depending on the file type.

Info

Shows a preview of the file (or a type icon for non-image files) along with metadata: filename, MIME type, file size, dimensions (for images), upload date, author, and which post the file is attached to, if any. Below the metadata you can edit the title, alt text, caption, and description. The file's URL is displayed with a copy button. You can also assign a folder and manage tags from this tab.

Thumbnails (images only)

Lists every thumbnail size that WordPress has generated for the image. Each entry shows the size name, dimensions, and file weight. You can copy the direct URL of any thumbnail or download it individually.

Edit (images only)

A canvas-based image editor with four toolsets:

• Crop: freeform or preset aspect ratios (1:1, 4:3, 16:9, and more).
• Adjustments: sliders for brightness, contrast, exposure, highlights, shadows, saturation, and vibrance.
• Filters: presets such as sepia, grayscale, hue rotation, blur, and sharpen, each with an intensity slider.
• Flip and Rotate: horizontal flip, vertical flip, and 90-degree rotation.

Edits are applied server-side when you save. WordPress thumbnails are regenerated automatically after an edit.

Compression (images only)

Allows you to reduce file size and optionally convert the image to a different format.

• Quality slider: 1 to 100.
• Format: keep original format, convert to WebP, or convert to AVIF (when supported by the server).
• Metadata stripping: optionally remove EXIF data from the file.
• Preview: before applying, you can preview the compressed result with estimated savings.

Server capabilities (WebP and AVIF support) are detected automatically and unavailable formats are hidden.

Backup (images, when the Backup service is enabled)

Lists previous versions of the file stored by the RakuWP Backup service. Each version shows its date and source. You can preview any version and restore it with a single click. Restoring a file regenerates all thumbnails.

Context Menus

Right-clicking on folders, tags, and file cards opens a contextual menu with relevant actions:

• Folder: rename, change color, create subfolder, move, delete.
• Tag: rename, change color, delete.
• File: preview, edit details, duplicate, delete, copy URL.

REST API

All operations are performed through the REST API under the namespace rakuwp/v1/media-center/. Endpoints use WordPress nonce authentication. Administrative actions (creating folders/tags, deleting files, regenerating thumbnails) require the manage_options capability. Upload and browse operations require the upload_files capability.

Main endpoints

GET /folders — Folder tree with file counts.
POST /folders — Create a folder.
GET /tags — All tags with file counts.
POST /tags — Create a tag.
GET /files — List files with filtering, search, and pagination.
POST /files — Upload a file.
PUT /files/{id} — Update file metadata.
DELETE /files/{id} — Delete a file.
POST /files/{id}/edit — Apply image edits.
POST /files/{id}/compress — Compress or convert an image.
GET /files/{id}/backup-versions — Backup version history.
POST /files/{id}/backup-restore — Restore from backup.

Database

Media Center creates three custom tables in the WordPress database:

• rakuwp_media_folders: stores the folder hierarchy (id, parent_id, name, color, sort_order).
• rakuwp_media_tags: stores tags (id, name, color, sort_order).
• rakuwp_media_file_tags: a junction table linking attachments to tags (attachment_id, tag_id).

Folder assignment is stored as WordPress post meta (_rakuwp_folder_id) on each attachment. Schema versioning is tracked in the rakuwp_mediacenter_db_version option.