css - How to remove image size inline style in article and include caption

admin管理员组

文章数量:1278913

I am using the following filter to remove the inline style in the image tag when used in the content editor of the ACF text field:

add_filter( 'post_thumbnail_html', 'remove_width_attribute', 10 );
add_filter( 'image_send_to_editor', 'remove_width_attribute', 10 );

function remove_width_attribute( $html ) {
$html = preg_replace( '/(width|height)="\d*"\s/', "", $html );
return $html;
}

BUT it seems to remove the caption as well as the surrounding markup. How can I remove the inline image size and retain the caption?

This is the markup that WordPress inserts when an image is placed into the text field:

div id="attachment_210" style="width: 1610px" class="wp-caption 

alignnone"

So you can see that the inline style makes the container 1610px, and an image set to 100% would fit the fixed width container. I'm looking for a way to remove the div markup, which the above filter does, but it also removes the caption, which I want to retain

I am using the following filter to remove the inline style in the image tag when used in the content editor of the ACF text field:

add_filter( 'post_thumbnail_html', 'remove_width_attribute', 10 );
add_filter( 'image_send_to_editor', 'remove_width_attribute', 10 );

function remove_width_attribute( $html ) {
$html = preg_replace( '/(width|height)="\d*"\s/', "", $html );
return $html;
}

BUT it seems to remove the caption as well as the surrounding markup. How can I remove the inline image size and retain the caption?

This is the markup that WordPress inserts when an image is placed into the text field:

div id="attachment_210" style="width: 1610px" class="wp-caption 

alignnone"

So you can see that the inline style makes the container 1610px, and an image set to 100% would fit the fixed width container. I'm looking for a way to remove the div markup, which the above filter does, but it also removes the caption, which I want to retain

• images
• css
• the-content

Share Improve this question edited Oct 12, 2021 at 16:23 Andrew asked Oct 12, 2021 at 14:43 AndrewAndrew 133 bronze badges 3

• Why are you removing the width and height attributes? They are not “inline styles” (inline styles are anything in the style attribute). The dimension attributes are important for helping the browser to load the image without layout shift, an important performance metric. – Jacob Peattie Commented Oct 12, 2021 at 14:48
• I probably did not give enough detail to my question, so have edited. – Andrew Commented Oct 12, 2021 at 16:24
• Ok I see now. The problem is that the code you're trying to use is targeting the width and height attributes, not the style attribute. Regardless, this is more of a pure PHP question, so might be better suited to stackoverflow. – Jacob Peattie Commented Oct 13, 2021 at 0:38

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Really not sure why you would want to do something like that.
As Jacob Peattie said those dimenstion are there to prevent layout shift when images are being loaded.
But if you still want to remove width and height attributes you could do this.

add_filter('post_thumbnail_html', 'bt_remove_post_thumbnail_html_width_height', 10, 4);
function bt_remove_post_thumbnail_html_width_height ($html, $post, $post_thumbnail_id, $size) {
    $width = get_option($size . '_size_w');
    $height = get_option($size . '_size_h');
    
    $html = str_replace('<img width="' . $width . '" height="' . $height . '"', '<img', $html);
    
    return $html;
}

add_filter('image_send_to_editor', 'bt_remove_image_send_to_editor_width_height', 10, 7);
function bt_remove_image_send_to_editor_width_height ($html, $id, $caption, $title, $align, $url, $size) {
    $width = get_option($size . '_size_w');
    $height = get_option($size . '_size_h');
    
    $html = str_replace('<img width="' . $width . '" height="' . $height . '"', '<img', $html);
    
    return $html;
}

This gets the width and height of by the size and with str_replace we just replace the initial image html, that contains the width and height, with only the opening image tag.

If you would need this to happen with other filters you will need to check wordpress github to better understand what paramaters are available and and what position.

本文标签： cssHow to remove image size inline style in article and include caption