Post Images: add image exclusion via CSS class and filter#47183
Post Images: add image exclusion via CSS class and filter#47183
Conversation
Add two mechanisms to exclude specific images from Jetpack_PostImages discovery, which powers Related Posts thumbnails, Open Graph tags, and other features: - `jetpack-ignore-thumbnail` CSS class: add to any <img> tag in classic editor HTML or via the block editor's "Advanced > Additional CSS class" panel to skip the image during content scanning. - `jetpack_postimages_exclude_image` filter: allows programmatic exclusion based on the image's URL, dimensions, or other metadata. Both apply at the Jetpack_PostImages level (from_html and from_blocks), so all consumers benefit. See #47054
|
Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.
Interested in more tips and information?
|
|
Thank you for your PR! When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:
This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖 Follow this PR Review Process:
If you have questions about anything, reach out in #jetpack-developers for guidance! Jetpack plugin: The Jetpack plugin has different release cadences depending on the platform:
If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack. |
There was a problem hiding this comment.
Pull request overview
This PR adds image exclusion capabilities to Jetpack_PostImages, allowing users to prevent specific images from being selected for Related Posts thumbnails, Open Graph tags, and other features. The implementation provides two exclusion mechanisms: a CSS class (jetpack-ignore-thumbnail) and a programmatic filter (jetpack_postimages_exclude_image).
Changes:
- Added CSS class-based exclusion (
jetpack-ignore-thumbnail) that works in bothfrom_html()andfrom_blocks()methods - Implemented
jetpack_postimages_exclude_imagefilter for programmatic image exclusion with comprehensive documentation - Added test coverage for both CSS class exclusion and filter-based exclusion in HTML and block contexts
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| projects/plugins/jetpack/class.jetpack-post-images.php | Core implementation of CSS class check and filter hook in from_html() and from_blocks() methods with detailed filter documentation |
| projects/plugins/jetpack/tests/php/media/Jetpack_PostImages_Test.php | Comprehensive test coverage for CSS class exclusion in HTML/blocks and filter-based exclusion |
| projects/plugins/jetpack/changelog/related-posts-image-filter | Changelog entry describing the enhancement |
Code Coverage SummaryCoverage changed in 1 file.
|
jeherve
left a comment
There was a problem hiding this comment.
This looks good. I only have a nitpick suggestion.
| // Skip blocks marked with the jetpack-ignore-thumbnail CSS class | ||
| // (set via the block editor's "Advanced > Additional CSS class" panel). | ||
| $class_name = $attributes['className'] ?? ''; | ||
| if ( false !== stripos( $class_name, 'jetpack-ignore-thumbnail' ) ) { |
There was a problem hiding this comment.
nitpick: I find it more readable to use str_contains nowadays:
| if ( false !== stripos( $class_name, 'jetpack-ignore-thumbnail' ) ) { | |
| if ( str_contains( $class_name, 'jetpack-ignore-thumbnail' ) ) { |
| } | ||
|
|
||
| // Allow users to exclude images by adding a CSS class to the img tag. | ||
| if ( false !== stripos( $image_tag->getAttribute( 'class' ) ?? '', 'jetpack-ignore-thumbnail' ) ) { |
There was a problem hiding this comment.
Same here:
| if ( false !== stripos( $image_tag->getAttribute( 'class' ) ?? '', 'jetpack-ignore-thumbnail' ) ) { | |
| if ( str_contains( $image_tag->getAttribute( 'class' ) ?? '', 'jetpack-ignore-thumbnail' ) ) { |
Fixes #47054
Proposed changes:
jetpack-ignore-thumbnailCSS class support toJetpack_PostImages— any<img>tag with this class (or any block with this class in "Advanced > Additional CSS class") is skipped during image discoveryjetpack_postimages_exclude_imagefilter for programmatic exclusion — developers can hook in to exclude images by URL pattern, dimensions, or other metadataJetpack_PostImageslevel (from_htmlandfrom_blocks), so all consumers benefit: Related Posts, Open Graph tags, and anything else that relies on this class for image selectionOther information:
Jetpack product discussion
Does this pull request change what data or activity we track or use?
No.
Testing instructions:
jetpack-ignore-thumbnailto the first image:jetpack-ignore-thumbnailto "Additional CSS class(es)"class="jetpack-ignore-thumbnail"to the<img>tag in the HTML viewfunctions.php:Changelog