Visual Media Labels

A lightweight, single-function WordPress plugin that enhances the media library grid by displaying dynamic file extension badges, image pixel dimensions, and customizable color labels.

WordPressのメディアライブラリ（グリッド表示）を拡張し、ファイル拡張子バッジ、画像のピクセルサイズ、そしてカスタムカラーラベルをスマートに表示する軽量・単一機能のプラグインです。透過画像の市松模様（チェッカーボード）背景化や、他の要素と喧嘩しない最前面オーバーレイ枠線により、アセット管理やデザイン業務の効率を劇的に向上させます。

Key Features

• Dynamic Extension Badges: Automatically detects file subtypes and appends clean, floating badges (e.g., SVG, PNG, JPG, WEBP) to the top-left of thumbnails.
• Instant Pixel Dimensions: Renders actual width × height text on the top-right of the image, eliminating the need to click into attachment details to check resolutions.
• Transparency Visualizer: Automatically applies a performance-optimized CSS checkerboard background behind transparent formats (PNG, SVG, WebP, GIF) without loading any heavy images.
• Color Label System: Assign custom colored borders (Red, Blue, Green, Yellow, Purple) from the attachment details sidebar to categorize or flag specific media assets instantly.
• Robust Overlay Architecture: Built using a non-destructive Backbone.js patch and absolute span overlays, ensuring styles never get covered by un-transparent portrait/landscape images or default core UI styles.

主な機能（日本語）

• 拡張子バッジの動的表示: メディアのファイル形式（MIMEタイプ）を自動判別し、サムネイルの左上にスマートなバッジ（SVG、PNG、JPG、WEBPなど）を浮かび上がらせます。
• ピクセルサイズの即時確認: サムネイルの右上に「横 × 縦」のピクセル数を常時表示。解像度を確かめるためだけに画像の詳細画面をいちいち開く手間を無くします。
• 透過背景の自動可視化: 透過に対応したフォーマット（PNG、SVG、WebP、GIF）の背景に、CSSグラデーションのみで描画された軽量な市松模様（チェッカーボード）を自動で敷き詰めます。
• カラーラベルシステム: メディア詳細のサイドバーからいつでも好きなカラー（赤・青・緑・黄・紫）を選択し、サムネイルのフチを綺麗に発色させてメディアを分類・マークできます。
• 堅牢なオーバーレイ設計: WordPressコアのスタイルや、不透過な横長・縦長画像の下に枠線やバッジが潜り込んで隠れてしまわないよう、最前面に透明なレイヤーを重ねる安全な設計を採用しています。

Features Overview / 機能概要

UI & Asset Management / メディアUI管理機能

• High-contrast extension tags including unique highlight color for vector graphics (SVG) / ベクターグラフィックス（SVG）がひと目でわかる専用ハイライトを含む高コントラストな拡張子タグ
• Real-time resolution rendering via monospace typography / 等幅フォントを採用した、縦横比やサイズ感がひと目で狂いなく判別できるピクセル表記
• Completely asset-less checkerboard using pure CSS linear-gradients / 画像アセットを1枚も使わず、1バイトもプラグインを肥大化させないピュアCSS市松模様

Data Retention & Integration / データ保持・システム連携機能

• Non-destructive wp.media.view.Attachment monkey-patching / コアの描画処理を壊さずにラップする安全なBackbone.js拡張
• Full database serialization integrated with wp_prepare_attachment_for_js / 非同期読み込み（REST API/AJAX）にカラーラベル値を100%完全同期させるシームレスなデータ連携
• Safe option updates utilizing attachment_fields_to_save hook / WordPress標準仕様に準拠したクリーンなポストメタ（DB）保存処理

Installation / インストール

1. Upload the plugin folder to your /wp-content/plugins/ directory. (wp-content/plugins/ ディレクトリにプラグインフォルダをアップロードします)
2. Activate the plugin through the 'Plugins' menu in WordPress. (管理画面の「プラグイン」メニューから有効化してください)
3. Open your WordPress Media Library (Grid Mode). (管理画面の「メディア ＞ ライブラリ」のグリッド表示画面を開きます)
4. Click on any image, locate the Media Color Label dropdown in the right-side attachment details panel, select a color, and watch the grid update in real-time. (任意の画像をクリックし、右側パネルにある「Media Color Label」から色を選択すると、一覧画面の枠線にリアルタイムに反映されます)

Technical Details

Hook & Script Priority

• PHP Data Attachment: Leverages wp_prepare_attachment_for_js filter to pass database fields straight into the Javascript models before grid hydration.
• JS Interception: Hooks into the original attachment render via a safe prototype wrapper ensuring compatibility with standard WP core upgrades.
• CSS Hierarchy: Utilizes independent absolute <span> wrappers with structured z-index: 50/60 and pointer-events: none to bypass Core UI clickable overlay masks without hijacking user click events.

Security & Hardening

• Direct file access prevention (ABSPATH check)
• Sanitized option updates (sanitize_text_field enforced during saving metadata)
• Complete attribute and element sanitization on every AJAX re-render to prevent duplicate elements or memory leaks.

Roadmap / 今後の予定

• [ ] List View Support (Display extension and dimensions inside the standard WordPress list view table columns)
• [ ] Media Grid Filter (Add a dropdown select box to the main media toolbar to filter attachments by color labels)
• [ ] Bulk Customization (Allow assigning color labels to multiple selected items at once)

Developer Info / 開発者情報

• Author: masato shibuya (Image-box Co., Ltd.)[cite: 1]
• GitHub: https://github.com/ms13th-cyber/[cite: 1]
• License: MIT License