Oprește WordPress să adauge automat atributele width și height la imagini

Puteți elimina atributele width și height prin filtrarea rezultatului funcției image_downsize găsită în wp-includes/media.php. Pentru a face acest lucru, scrieți propria funcție și o executați prin fișierul functions.php al temei sau ca un plugin.

Exemplu:

Eliminați atributele width și height.

/**
 * Aceasta este o modificare a funcției image_downsize() din wp-includes/media.php
 * vom elimina toate referințele la lățime și înălțime, astfel încât tag-ul img 
 * nu va adăuga atributele width și height imaginii trimise editorului.
 * 
 * @param bool false Fără referințe la înălțime și lățime.
 * @param int $id ID-ul atașamentului pentru imagine.
 * @param array|string $size Opțional, implicit este 'medium'. Dimensiunea imaginii, fie array, fie string.
 * @return bool|array False în caz de eșec, array în caz de succes.
 */
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);

    // încercăm să obținem o dimensiune intermediară în noul stil
    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' ) {
        // Revenim la vechea miniatură
        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;
        }
    }

    // Avem dimensiunea reală a imaginii, dar ar putea fi necesar să o limităm dacă content_width este mai îngust
    if ( $img_url) {
        return array( $img_url, 0, 0, $is_intermediate );
    }
    return false;
}

Atașați noua funcție la hook-ul image_downsize:

/* Elimină referințele la înălțime și lățime din funcția image_downsize.
 * Am adăugat un nou parametru, deci prioritatea este 1, ca întotdeauna, iar 
 * noii parametri sunt 3.
 */
add_filter( 'image_downsize', 'myprefix_image_downsize', 1, 3 );

De asemenea, nu uitați să scalați corect imaginile în CSS:

/* Dimensiuni și alinieri ale imaginilor */
.entry-content img,
.comment-content img,
.widget img {
    max-width: 97.5%; /* Imagini fluide pentru articole, comentarii și widget-uri */
}
img[class*="align"],
img[class*="wp-image-"] {
    height: auto; /* Asigură-te că imaginile cu atribute de înălțime și lățime adăugate de WordPress sunt scalate corect */
}
img.size-full {
    max-width: 97.5%;
    width: auto; /* Previne întinderea imaginilor full-size cu atribute de înălțime și lățime în IE8 */
}

Sper că acest lucru vă ajută.

Toate cele bune,

Poți folosi filtrul post_thumbnail_html pentru a elimina atributul:

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

add_filter( 'post_thumbnail_html', 'remove_img_attr' );

Pune acest cod în fișierul tău functions.php

Puteți suprascrie stilurile/atributele inline folosind !important:

.wp-post-image {
    width: auto !important; /* sau probabil 100% în cazul unui grid */
    height: auto !important; 
}

Nu este cea mai elegantă soluție, dar rezolvă problema ta.

Soluție CSS:

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

Aceasta permite imaginilor responsive să funcționeze corect, în timp ce menții atributele de lățime și înălțime în elementul img, ceea ce este probabil mai bine pentru browserele vechi, performanță și/sau pentru a trece validatoarele HTML.

Soluție PHP:

Aceasta va preveni adăugarea atributelor width/height pe orice media nou adăugată în editorul WP (prin 'Adaugă Media'). Atenție, poate afecta și legendele imaginilor!

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

Cea mai bună soluție este să plasați jquery în subsolul paginii

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

Adaugă acest fragment de cod: (Se aplică și noului editor Gutenberg)

function disable_add_img_width_height( $value, $image, $context, $attachment_id ) {
    if ($context === 'the_content' || $context === 'the_excerpt' ||  $context === 'widget_text_content')
        return false;
    return $value;
}
add_filter( 'wp_img_tag_add_width_and_height_attr', 'disable_add_img_width_height', 10, 4 );

Iată o soluție simplă în Javascript:

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($){
  $('img').each(function(){
  $(this).removeAttr('width')
  $(this).removeAttr('height');
 });
});
</script>

Aceasta poate fi folosită pentru a ținti imagini specifice în loc de toate imaginile, utilizând un selector CSS, astfel:

 $('.clasa-mea-specifica img').each(function()