Lọc để loại bỏ các thuộc tính kích thước hình ảnh?


35

Tôi đang làm việc trên một trang web dựa trên mẫu css chiều rộng chất lỏng, đặt chiều rộng tối đa trên hình ảnh thành chiều rộng của cột chứa chúng và tôi cần xóa các thuộc tính chiều rộngchiều cao nội tuyến mà WordPress thêm vào hình ảnh.

Tôi đang làm điều đó với các hình ảnh nổi bật của mình với bộ lọc này:

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10, 3 );

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

Tôi biết tôi có thể áp dụng cùng một bộ lọc cho the_content , nếu cần. Nhưng có cách nào tốt hơn để làm điều này?


Trước hết, cảm ơn mã rất hữu ích. Nó hoạt động hoàn hảo để loại bỏ các thuộc tính chiều rộng và chiều cao từ thẻ img, nhưng vì một số lý do, nó dường như cũng loại bỏ mã ngắn chú thích nếu có. Có ai biết tại sao điều này là và làm thế nào để sửa nó?
Đaminh P

1
Có lẽ bạn nên đăng bài này như câu hỏi của riêng mình? Nó dường như đủ khác biệt đủ với tôi rằng nó xứng đáng nhận được phản hồi của riêng mình. Tuy nhiên, tôi sẽ thử và trả lời ... cho bất kỳ ai khác tìm thấy câu trả lời này và có cùng một vấn đề: Vấn đề của bạn là chức năng img_caption_shortcodexử lý mã ngắn chú thích, yêu cầu độ rộng phải được chỉ định trong các thuộc tính mã ngắn phụ đề. Mặt khác, nó bỏ qua chú thích hoàn toàn và chỉ trả về nội dung được bọc bên trong các [caption]thẻ shortcode.
Goldenapples

Nếu bạn muốn có thể sử dụng mã ngắn phụ đề mà không có chiều rộng xác định, bạn sẽ phải xác định đánh dấu chú thích của mình trong một chức năng được nối trên bộ lọc img_caption_shortcode. Viết mã cho một chức năng như thế là nhiều hơn tôi có thể phù hợp với ý kiến ​​ở đây, mặc dù.
Goldenapples

@goldenapples, cảm ơn bạn đã trả lời hữu ích. Tôi đã làm như bạn đề xuất và hỏi một câu hỏi mới ở đây: wordpress.stackexchange.com/questions/32931/ . Bất kỳ đầu vào trên đó sẽ được đánh giá rất cao. Như tôi đã giải thích trong câu hỏi, tôi không chắc bộ lọc trên img_caption_shortcodesẽ đủ giải quyết vấn đề.
Đaminh P

1
Có thể tôi đang thiếu bức tranh lớn hơn về những gì bạn đang cố gắng làm mà không thấy nội dung thực tế của bạn, nhưng điều này không thể được khắc phục bằng CSS một mình? Nếu bạn đang sử dụng chiều rộng tối đa trên hình ảnh của mình, bạn sẽ có thể chinh phục vấn đề về chiều cao bằng cách thêm chiều cao: tự động; để hình ảnh nội dung của bạn.
nhị phân

Câu trả lời:


36

Cảm ơn tất cả!

Bộ lọc image_send_to_editor là bộ lọc tôi đang tìm kiếm ... cảm ơn @ t31os vì đã chỉ ra nó.

Đây là chức năng của tôi bây giờ.

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

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

Điều này loại bỏ các thuộc tính kích thước nội tuyến khỏi hình ảnh được truy xuất the_post_thumbnail()và ngăn các thuộc tính đó được thêm vào hình ảnh mới được thêm vào trình chỉnh sửa. Không xóa chúng khỏi hình ảnh được truy xuất thông qua wp_get_attachment_imagehoặc các chức năng liên quan khác (không có móc trong đó), nhưng những trường hợp đó có thể được xử lý trong các tệp mẫu khi cần thiết.


1
Tôi đã phải xóa \ s khỏi regex. Sau đó, nó hoạt động tốt. Tôi nghĩ rằng đó là vì tôi không có một khoảng trống sau lần truy cập cuối cùng trên cài đặt độ cao.
MattSlay

1
@MattSlay Có phải tôi gặp vấn đề với việc sửa đổi vĩnh viễn nội dung của trang web không? Một chủ đề đáp ứng không cần phải sửa đổi nội dung của trang web để định dạng chính xác. Tôi bỏ phiếu để xóa bộ lọc khỏi image_send_to_editorvà thay vào đó thêm nó vào the_content- như bài đăng trên blog này . Điều này tách biệt logic trình bày từ nội dung.
BFTrick

1
@BFTrick - Có vẻ như là một vấn đề bối cảnh với tôi. Đối với một chủ đề phản hồi, tôi đồng ý với bạn vì bạn không thể phụ thuộc vào nội dung hiện có đã được xử lý theo cách này và bạn không biết liệu chủ đề tiếp theo được cài đặt có cần các thuộc tính thứ nguyên đó không. Trong trường hợp của tôi, tôi đang xây dựng một ứng dụng trong đó chủ đề không thể tách rời với nội dung, vì vậy tôi đã chọn phương pháp xử lý hình ảnh ít xử lý hơn khi chúng được thêm lần đầu tiên. Nhưng bạn làm một điểm tốt.
kim ngân

2
Cảnh báo: Câu trả lời này phá vỡ chú thích hình ảnh trong WordPress 3.5.1.
có dây

5

Sửa đổi kịch bản này một chút. Cảm ơn đã giúp đỡ!

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 );
// Genesis framework only
add_filter( 'genesis_get_image', 'remove_thumbnail_dimensions', 10 );
// Removes attached image sizes as well
add_filter( 'the_content', 'remove_thumbnail_dimensions', 10 );
function remove_thumbnail_dimensions( $html ) {
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    return $html;
}

5
Mặc dù cẩn thận. Lọc the_content cũng sẽ lọc video youtube và bất kỳ thuộc tính chiều rộng / chiều cao nào khác.
MikeNGarrett

1
Đúng, nhưng đó có thể là một điều tốt trong một trang web đáp ứng. Nếu một người cần làm điều đó cho hình ảnh thì có lẽ người ta cũng cần phải làm điều đó cho các phương tiện khác.
BFTrick

1

nếu bạn đặt kích thước hình ảnh trong function.php là "bộ sưu tập"

add_image_size( 'gallery', 200, 120, true );

bạn có thể xóa chiều rộng và chiều cao của kích thước hình ảnh cụ thể, chẳng hạn như "bộ sưu tập":

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10, 4 );

function remove_thumbnail_dimensions( $html, $post_id, $post_image_id,$post_thumbnail) {
    if ($post_thumbnail=='gallery'){
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    }
    return $html;
}

0

Áp dụng bộ lọc đó the_contentsẽ kích hoạt nó cho tất cả nội dung. Điều này sẽ có hiệu quả, nhưng có thể ảnh hưởng đến hiệu suất và thời gian tải trang web của bạn. Sẽ tốt hơn nếu bạn nói với WordPress rằng đừng chỉ chèn các thẻ chiều rộng và chiều cao nội tuyến khi bạn chèn hình ảnh ở vị trí đầu tiên.

Thật không may, các tập lệnh thực sự chèn hình ảnh được xây dựng bằng JavaScript và tương tác với trình soạn thảo wysiwyg TinyMCE. Có thể có một cách để nối trực tiếp vào nó, nhưng không sử dụng các add_filter()cuộc gọi tiêu chuẩn .


1
Sẽ không có một bộ lọc trong image_send_to_editorcông việc ở đây?
t31os

@ t31os - Tôi nghĩ đó là những gì tôi đang tìm kiếm! Không biết tại sao tôi không thấy cái móc đó trước đây.
Goldenapples

Chà, tôi chắc chắn hy vọng nó có ích, có vẻ như nó có thể thực hiện được mánh khóe ... báo cáo lại và cho chúng tôi biết. :)
t31os

@ t31os Yup, đã làm điều đó! Cảm ơn! Tôi sẽ đăng nó như một câu trả lời, trừ khi bạn nhận được nó trước.
Goldenapples

2
Bạn đi cho nó bạn đời, tôi không quá bận tâm, rất vui vì bạn đã có thể tìm ra giải pháp ...;)
t31os
Licensed under cc by-sa 3.0 with attribution required.