Dừng wordpress từ mã hóa img thuộc tính chiều rộng và chiều cao

Tôi tự hỏi liệu có cách đơn giản nào ngăn chặn WordPress tự động mã hóa các thuộc tính chiều cao và chiều rộng của hình ảnh, ngoài việc sử dụng regex ...

Vì tôi đang sử dụng lưới linh hoạt cho dự án của mình (ai không!), Điều này gây ra một số vấn đề hình ảnh thú vị.

Bạn có thể nhận URL hình ảnh nổi bật và thêm nó vào nội dung của mình theo cách thủ công, ví dụ:

<?php 
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'thumbnail' ); 

if ($image) : ?>
    <img src="<?php echo $image[0]; ?>" alt="" />
<?php endif; ?> 

Bạn có thể loại bỏ các thuộc tính chiều rộng và chiều cao bằng cách lọc đầu ra của image_downsizehàm được tìm thấy tại wp-includes/media.php. Để làm điều này, bạn viết chức năng của riêng bạn và thực hiện nó thông qua tệp tin.php của chủ đề hoặc dưới dạng plugin.

Thí dụ:

Loại bỏ các thuộc tính widthvà height.

/**
 * This is a modification of image_downsize() function in wp-includes/media.php
 * we will remove all the width and height references, therefore the img tag 
 * will not add width and height attributes to the image sent to the editor.
 * 
 * @param bool false No height and width references.
 * @param int $id Attachment ID for image.
 * @param array|string $size Optional, default is 'medium'. Size of image, either array or string.
 * @return bool|array False on failure, array on success.
 */
function myprefix_image_downsize( $value = false, $id, $size ) {
    if ( !wp_attachment_is_image($id) )
        return false;

    $img_url = wp_get_attachment_url($id);
    $is_intermediate = false;
    $img_url_basename = wp_basename($img_url);

    // try for a new style intermediate size
    if ( $intermediate = image_get_intermediate_size($id, $size) ) {
        $img_url = str_replace($img_url_basename, $intermediate['file'], $img_url);
        $is_intermediate = true;
    }
    elseif ( $size == 'thumbnail' ) {
        // Fall back to the old thumbnail
        if ( ($thumb_file = wp_get_attachment_thumb_file($id)) && $info = getimagesize($thumb_file) ) {
            $img_url = str_replace($img_url_basename, wp_basename($thumb_file), $img_url);
            $is_intermediate = true;
        }
    }

    // We have the actual image size, but might need to further constrain it if content_width is narrower
    if ( $img_url) {
        return array( $img_url, 0, 0, $is_intermediate );
    }
    return false;
}

Gắn chức năng mới vào image_downsizemóc:

/* Remove the height and width refernces from the image_downsize function.
 * We have added a new param, so the priority is 1, as always, and the new 
 * params are 3.
 */
add_filter( 'image_downsize', 'myprefix_image_downsize', 1, 3 );

Cũng đừng quên chia tỷ lệ hình ảnh chính xác trong CSS của bạn:

/* Image sizes and alignments */
.entry-content img,
.comment-content img,
.widget img {
    max-width: 97.5%; /* Fluid images for posts, comments, and widgets */
}
img[class*="align"],
img[class*="wp-image-"] {
    height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
}
img.size-full {
    max-width: 97.5%;
    width: auto; /* Prevent stretching of full-size images with height and width attributes in IE8 */
}

Hy vọng điều này sẽ giúp bạn.

Chúc mừng

Bạn có thể sử dụng post_thumbnail_htmlbộ lọc để xóa thuộc tính:

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

add_filter( 'post_thumbnail_html', 'remove_img_attr' );

Đặt cái này trong functions.phptập tin của bạn

Bạn có thể ghi đè các kiểu / thuộc tính nội tuyến bằng !important:

.wp-post-image {
    width: auto !important; /* or probably 100% in case of a grid */
    height: auto !important; 
}

Đây không phải là giải pháp sạch nhất, nhưng nó giải quyết vấn đề của bạn.

Giải pháp tốt nhất là đặt jquery ở chân trang

jQuery(document).ready(function ($) {
    jQuery('img').removeAttr('width').removeAttr('height');
});

Giải pháp CSS:

img[class*="align"], img[class*="wp-image-"] {
    width: auto;
    height: auto;
}

Điều này cho phép hình ảnh phản hồi hoạt động như bình thường, trong khi đó bạn duy trì các thuộc tính chiều rộng và chiều cao trong phần tử img, có lẽ tốt hơn cho các trình duyệt cũ hơn, hiệu suất và / hoặc để vượt qua trình xác nhận HTML.

Giải pháp PHP:

Điều này sẽ ngăn việc thêm các thuộc tính chiều rộng / chiều cao trên bất kỳ phương tiện mới nào được thêm vào trong trình chỉnh sửa WP (thông qua 'Thêm phương tiện'). FYI, nó có thể ảnh hưởng đến chú thích hình ảnh của bạn quá!

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

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