Зупиніть wordpress від атрибутів зображення ширини та висоти жорсткого кодування

Мені цікаво, чи існує простий спосіб автоматичного жорсткого кодування WordPress із автоматичним жорстким кодуванням атрибутів висоти та ширини зображення, крім використання регулярного виразів ...

Оскільки я використовую гнучку сітку для свого проекту (хто ні!), Це спричиняє певні проблеми із зображенням.

Ви можете отримати пропоновану URL-адресу зображення та додати її до вмісту вручну, наприклад:

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

Ви можете видалити атрибути ширини та висоти, відфільтрувавши вихідні image_downsizeфункції, знайдені в wp-includes/media.php. Для цього ви пишете власну функцію та виконуєте її через файл теми.php своєї теми або як плагін.

Приклад:

Видаліть widthі 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;
}

Прикріпіть нову функцію до image_downsizeгака:

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

Також не забудьте правильно масштабувати зображення у своєму CSS:

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

Сподіваюся, це вам допоможе.

Ура,

Ви можете використовувати post_thumbnail_htmlфільтр, щоб видалити атрибут:

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

add_filter( 'post_thumbnail_html', 'remove_img_attr' );

Помістіть це у свій functions.phpфайл

Ви можете скасувати вбудовані стилі / атрибути з !important:

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

Це не найчистіше рішення, але воно вирішує вашу проблему.

Найкраще рішення - розмістити jquery в нижньому колонтитулі

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

CSS-рішення:

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

Це дозволяє чуйним зображенням працювати як слід, тим часом ви підтримуєте атрибути ширини та висоти в елементі img, що, ймовірно, краще для старих браузерів, продуктивності та / або для передачі HTML-валідаторів.

PHP рішення:

Це запобіжить додавання атрибутів ширини / висоти на будь-який щойно доданий носій у редакторі WP (через "Додати медіа"). FYI, це може вплинути і на титри зображення!

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