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


16

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ị.

Câu trả lời:


7

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; ?> 

chỉ hoạt động cho các trang wordpress được mã hóa cứng, vô dụng đối với một CMS.
S ..

Hãy ghi nhớ: Phương pháp này ngăn hình ảnh phản hồi kể từ WP 4.4 vì nó không bao gồm srcsetthuộc tính.
Lái xe

13

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 widthheight.

/**
 * 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


Điều này loại bỏ srcset, sizesvà các thuộc tính hình ảnh đáp ứng khác không may. :( Đây là cách giải quyết hiện tại của tôi, giúp xây dựng lại các thuộc tính: gist.github.com/cibulka/8e2bf16b0f55779af590472ae1bf9239
Petr Cibulka

10

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


Vẫn hoạt động như một lá bùa.
Raul

2

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.


Vì một số lý do, lớp học wp-post-imagekhông được đưa vào hình ảnh của tôi. Thay vào đó tôi đã có một cái gì đó như wp-image-26. Tôi đã phải sử dụng một bộ chọn khác nhưng ý tưởng đã có hiệu quả.
Cầu tàu

2

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

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

Bất kỳ lời giải thích về lý do tại sao đây là giải pháp "tốt nhất"?
Kit Johnson

1
bởi vì đôi khi "add_filter" không hoạt động khi bạn muốn nó là lý do tại sao tôi đã nói
Asad Ali

0

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 );
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.