Xóa các thuộc tính kích thước hình ảnh và chú thích

Câu hỏi này là một nhánh trong cuộc thảo luận này về việc loại bỏ các thuộc tính kích thước khỏi hình ảnh. Mã giải pháp được cung cấp trên luồng đó hoạt động rất tốt ngoại trừ việc nó có tác dụng phụ đáng tiếc là bất kỳ [caption]mã ngắn nào đều bị sọc khỏi hình ảnh.

Sau vài giờ đào qua mã lõi, tôi đã tìm ra nguyên nhân của việc này. Plugin TinyMCE của wpeditimage chịu trách nhiệm thêm [caption]kiểm tra shortcode cho các thuộc tính chiều rộng trong shortcode và imgthẻ. Nếu nó không tìm thấy chúng, nó chỉ cần xóa chú thích. Vì, việc này được thực hiện 'nhanh chóng' với javascript trong trình chỉnh sửa TinyMCE, tôi không thể nghĩ ra bất kỳ loại bộ lọc WordPress nào sẽ giải quyết vấn đề này. Tôi sẽ rất vui khi được chứng minh là sai. :)

Như một lưu ý cuối cùng, giải pháp tạm thời của tôi là sử dụng jQuery sau đây để loại bỏ tất cả các thẻ khách hàng vi phạm. Điều này, kết hợp với một bộ lọc trên img_caption_shortcodeđể ngăn kiểu chiều rộng được sử dụng ở đó, dường như thực hiện công việc. Nó không đẹp, nhưng bây giờ nó là một hỗ trợ ban nhạc. Bất cứ ai có một ý tưởng tốt hơn?

// Strip width and height attributes from img, video, and object in the main article so we can have fluid images
var $fluid_items = $('.main-article-wrapper').find('img,video,object');
$fluid_items.removeAttr('width');
$fluid_items.removeAttr('height');

nó có thể không phải là câu trả lời chính xác mà bạn đang theo đuổi nhưng tôi nghĩ rằng tôi vừa tìm thấy một cách giải quyết khá tốt.

Iv'e đã ​​lấy đoạn mã sau từ CSS chủ đề hai mươi mười một (imho phản hồi gọn gàng):

/* Images */
.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 */
}

Điều này thật khó khăn để làm cho tất cả các hình ảnh phản hồi (ít nhất là những hình ảnh được nhúng trong nội dung ...) Bây giờ tôi có hình ảnh phản hồi, nhưng khi sử dụng chú thích, tôi vẫn gặp vấn đề tương tự, điều đó xảy ra vì tinyMCE thêm thuộc tính kiểu vào thùng chứa chú thích với chiều rộng của hình ảnh. Để khắc phục tất cả những gì tôi phải làm là thêm phần này vào CSS của mình:

            .wp-caption { max-width: 100%; }

Làm xong! hoạt động tốt đối với tôi, mặc dù nó có thể không hoạt động đối với các hình ảnh nổi bật.

Tôi hi vọng điêu nay se giup được ai đo :-)