Impedire a WordPress di codificare automaticamente gli attributi width e height delle immagini

Puoi rimuovere gli attributi width e height filtrando l'output della funzione image_downsize che si trova in wp-includes/media.php. Per fare questo, scrivi la tua funzione e eseguila tramite il file functions.php del tuo tema o come plugin.

Esempio:

Rimuovi gli attributi width e height.

/**
 * Questa è una modifica della funzione image_downsize() in wp-includes/media.php
 * rimuoveremo tutti i riferimenti a width e height, quindi il tag img 
 * non aggiungerà gli attributi width e height all'immagine inviata all'editor.
 * 
 * @param bool false Nessun riferimento a height e width.
 * @param int $id ID dell'allegato per l'immagine.
 * @param array|string $size Opzionale, default è 'medium'. Dimensione dell'immagine, può essere un array o una stringa.
 * @return bool|array False in caso di fallimento, array in caso di successo.
 */
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);

    // prova per una nuova dimensione intermedia
    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' ) {
        // Ripiega sulla vecchia miniatura
        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;
        }
    }

    // Abbiamo la dimensione effettiva dell'immagine, ma potrebbe essere necessario limitarla ulteriormente se content_width è più stretto
    if ( $img_url) {
        return array( $img_url, 0, 0, $is_intermediate );
    }
    return false;
}

Collega la nuova funzione all'hook image_downsize:

/* Rimuovi i riferimenti a height e width dalla funzione image_downsize.
 * Abbiamo aggiunto un nuovo parametro, quindi la priorità è 1, come sempre, e i nuovi 
 * parametri sono 3.
 */
add_filter( 'image_downsize', 'myprefix_image_downsize', 1, 3 );

Inoltre non dimenticare di ridimensionare correttamente le immagini nel tuo CSS:

/* Dimensioni e allineamenti delle immagini */
.entry-content img,
.comment-content img,
.widget img {
    max-width: 97.5%; /* Immagini fluide per articoli, commenti e widget */
}
img[class*="align"],
img[class*="wp-image-"] {
    height: auto; /* Assicurati che le immagini con attributi height e width aggiunti da WordPress siano scalate correttamente */
}
img.size-full {
    max-width: 97.5%;
    width: auto; /* Previene lo stretching delle immagini full-size con attributi height e width in IE8 */
}

Spero che questo ti sia d'aiuto.

Saluti,

Puoi utilizzare il filtro post_thumbnail_html per rimuovere l'attributo:

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

add_filter( 'post_thumbnail_html', 'remove_img_attr' );

Inserisci questo codice nel tuo file functions.php

Puoi sovrascrivere gli stili/attributi inline con !important:

.wp-post-image {
    width: auto !important; /* oppure probabilmente 100% nel caso di una griglia */
    height: auto !important; 
}

Non è la soluzione più pulita, ma risolve il tuo problema.

Soluzione CSS:

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

Questo permette alle immagini responsive di funzionare correttamente, mantenendo comunque gli attributi width e height nell'elemento img, il che è probabilmente meglio per browser più vecchi, prestazioni e/o per superare i validatori HTML.

Soluzione PHP:

Questo codice previene l'aggiunta degli attributi width/height su qualsiasi nuovo media aggiunto nell'editor di WordPress (tramite 'Aggiungi Media'). Nota: potrebbe influenzare anche le didascalie delle immagini!

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

La soluzione migliore è posizionare jQuery nel footer

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

Aggiungi questo pezzo di codice: (Si applica anche al nuovo editor Gutenberg)

/**
 * Disabilita l'aggiunta degli attributi width e height alle immagini
 * 
 * @param bool   $value          Valore corrente
 * @param string $image          Tag immagine HTML
 * @param string $context        Contesto in cui viene chiamato il filtro
 * @param int    $attachment_id  ID dell'allegato
 * @return bool
 */
function disable_add_img_width_height( $value, $image, $context, $attachment_id ) {
    // Disabilita gli attributi width/height solo in questi contesti
    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 );

Ecco una semplice soluzione in Javascript:

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

Questo codice può essere utilizzato per specifiche immagini invece che per tutte, utilizzando un selettore CSS, in questo modo:

 $('.mialcpecificaclasse img').each(function()