Hentikan wordpress dari hardcoding, atribut img width dan height

Saya bertanya-tanya apakah ada cara sederhana untuk menghentikan WordPress secara otomatis hardcoding fitur atribut gambar tinggi dan lebar, selain menggunakan regex ...

Karena saya menggunakan kisi fleksibel untuk proyek saya (siapa yang tidak!) Ini menyebabkan beberapa masalah gambar yang funky.

Anda bisa mendapatkan URL gambar unggulan dan menambahkannya ke konten Anda secara manual, misalnya:

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

Anda dapat menghapus atribut lebar dan tinggi dengan memfilter keluaran image_downsizefungsi yang ditemukan di wp-includes/media.php. Untuk melakukan ini, Anda menulis fungsi Anda sendiri dan menjalankannya melalui file functions.php tema Anda atau sebagai plugin.

Contoh:

Hapus atribut widthdan 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;
}

Lampirkan fungsi baru ke image_downsizehook:

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

Juga jangan lupa untuk membuat skala gambar dengan benar di CSS Anda:

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

Semoga ini bisa membantu Anda.

Bersulang,

Anda dapat menggunakan post_thumbnail_htmlfilter untuk menghapus atribut:

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

add_filter( 'post_thumbnail_html', 'remove_img_attr' );

Tempatkan ini di functions.phpfile Anda

Anda dapat mengesampingkan gaya / atribut sebaris dengan !important:

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

Ini bukan solusi terbersih, tetapi itu memecahkan masalah Anda.

Solusi terbaik adalah menempatkan jquery di footer

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

Solusi CSS:

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

Ini memungkinkan gambar responsif bekerja sebagaimana mestinya, sementara itu Anda mempertahankan atribut lebar dan tinggi pada elemen img, yang mungkin lebih baik untuk browser lama, kinerja, dan / atau untuk melewatkan validator HTML.

Solusi PHP:

Ini akan mencegah penambahan atribut width / height pada media yang baru ditambahkan di WP editor (via 'Add Media'). FYI, itu mungkin juga mempengaruhi keterangan gambar Anda!

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