內容簡介
Media Pair 外掛為 WordPress 媒體庫中的圖片添加藝術指向功能。用戶只需上傳桌面圖片並配對一個獨立的行動版圖片，外掛便會自動在各種區塊、特色圖片及主題圖片功能中輸出語意化的 <picture> 標記。
【主要功能】
• 行動圖片配對功能
• 自動輸出 <picture> 標記
• 支援多種圖片區塊
• 全域斷點設定
• 媒體庫中的管理提示
外掛標籤
開發者團隊
原文外掛簡介
Media Pair adds art direction to WordPress Media Library images. Upload a desktop image, pair a separate mobile composition once, and the plugin outputs semantic
Mobile image pairing in the Media Library, block editor, and media list
Automatic
Support for Image, Featured Image, Gallery, and Media & Text blocks
Inline content images via wp_content_img_tag
Global breakpoint and enable/disable settings
Admin hints in the Media Library, featured image metabox, and block editor
media_pair_get_picture() helper for themes and ACF blocks
How it works
Media Pair stores a link between a desktop attachment and a separate mobile attachment. When WordPress renders the desktop image on the frontend, the plugin wraps it in a
A
The original desktop remains as the fallback for larger screens.
Pairing happens once per image in the Media Library. You do not need to configure individual posts, blocks, or pages. Anywhere WordPress outputs that attachment — featured images, Image blocks, galleries, theme templates, or custom code using wp_get_attachment_image() — the paired markup is applied automatically.
The frontend uses pure HTML and CSS media queries. No JavaScript is loaded for visitors.
Configuration
Pairing images
Open Media → Library and select a desktop image.
In the attachment details, find the Mobile image field.
Click Select, choose a separate mobile composition from the library, and save.
The pair saves automatically. Use Remove to unlink the mobile image.
You can also manage pairs from:
The Mobile pair column in the Media Library list (includes a filter for paired/unpaired images)
The Media Pair panel in the block editor sidebar for Image and Featured Image blocks
A hint in the post Featured image metabox when the selected image has an active pair
Each mobile image can only be linked to one desktop image. An image already used as someone else’s mobile variant cannot be given its own pair.
Plugin settings
Go to Settings → Media Pair:
Enable Media Pair — Turn frontend
Mobile breakpoint (px) — Screen width at which the mobile image is used. Default: 767. Screens at or below this width load the mobile source.
Picture CSS class — CSS class added to generated
Data cleanup — When enabled, all pairing metadata is removed if you uninstall the plugin.
Where output appears
Media Pair hooks into standard WordPress image rendering:
wp_get_attachment_image() — theme templates, widgets, and custom code
post_thumbnail_html — featured images
wp_content_img_tag — inline images in post and block content, including Image, Gallery, and Media & Text blocks
Images without a mobile pair are left unchanged.
For developers
Use media_pair_get_picture( $attachment_id, $size, $attr, $context ) in themes or ACF blocks when you need explicit control over picture output.
Use the media_pair_should_use_pair filter to allow or skip pairing for specific attachments or render contexts.
Privacy
Media Pair does not send data to external services and does not track users.
