block editor - Define how an attached image is rendered

admin管理员组

文章数量:1122832

When inserting an image block to a post, I want to control how the image is actually insterted in HTML. Specifically, I want to replace the autogenerated img element with a picture one, in order to control manually which image will load depending on screen width and resolution at the same time.

I've seen you can define a filter like this:

add_filter( 'wp_get_attachment_image', array( $this, 'wrap_wp_get_attachment_image_with_picture_tag' ), 10, 5 );

But if I'm not wrong, this is only useful if I manually use the wp_get_attachment_image function, which wouldn't be the case. At least I defined this filter and the function defined as a filter is never executed, neither reloading a post page with attachments nor inserting new attachments to a post.

Any ideas? Thank you.

PS: I'm using Wordpress 6.5.3

When inserting an image block to a post, I want to control how the image is actually insterted in HTML. Specifically, I want to replace the autogenerated img element with a picture one, in order to control manually which image will load depending on screen width and resolution at the same time.

I've seen you can define a filter like this:

add_filter( 'wp_get_attachment_image', array( $this, 'wrap_wp_get_attachment_image_with_picture_tag' ), 10, 5 );

But if I'm not wrong, this is only useful if I manually use the wp_get_attachment_image function, which wouldn't be the case. At least I defined this filter and the function defined as a filter is never executed, neither reloading a post page with attachments nor inserting new attachments to a post.

Any ideas? Thank you.

PS: I'm using Wordpress 6.5.3

• images
• block-editor
• attachments

Share Improve this question asked Jun 4, 2024 at 10:22 dgnindgnin 14311 silver badge44 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

To replace <img> tags with <picture> tags in the content of your posts, follow these steps:

Add a filter for post content:

This filter will modify the post content to replace <img> tags with <picture> tags, allowing for responsive images based on screen size and resolution.

Implement the replacement function:

The function replace_content_images_with_picture_tags will find all tags in the post content and replace them with tags.

// Add a filter to modify the content of posts and replace img tags with picture tags
add_filter( 'the_content', 'replace_content_images_with_picture_tags' );

/**
 * Replace img tags with picture tags in post content
 *
 * @param string $content The post content.
 * @return string Modified post content with picture tags.
 */
function replace_content_images_with_picture_tags( $content ) {
    if ( preg_match_all( '/<img[^>]+>/i', $content, $matches ) ) {
        foreach ( $matches[0] as $img_tag ) {
            if ( preg_match( '/wp-image-(\d+)/i', $img_tag, $class_id ) ) {
                $attachment_id = $class_id[1];
                $img_url = wp_get_attachment_image_url( $attachment_id, 'full' );
                $img_srcset = wp_get_attachment_image_srcset( $attachment_id, 'full' );
                $img_sizes = wp_get_attachment_image_sizes( $attachment_id, 'full' );

                $picture_tag = '<picture>';
                $picture_tag .= '<source srcset="' . esc_attr( $img_srcset ) . '" sizes="' . esc_attr( $img_sizes ) . '" media="(min-width: 768px)">';
                $picture_tag .= str_replace( '<img', '<img src="' . esc_url( $img_url ) . '"', $img_tag );
                $picture_tag .= '</picture>';

                $content = str_replace( $img_tag, $picture_tag, $content );
            }
        }
    }
    return $content;
}

本文标签： block editorDefine how an attached image is rendered