Impedisci a wordpress di codificare in modo rigido gli attributi di larghezza e altezza di img

Mi chiedo se c'è un modo semplice per fermare in alto WordPress automaticamente codificando gli attributi di altezza e larghezza delle immagini, oltre all'utilizzo di regex ...

Dato che sto usando una griglia flessibile per il mio progetto (chi non lo è!) Questo sta causando alcuni problemi di immagine funky.

Puoi ottenere l'URL dell'immagine in primo piano e aggiungerlo manualmente ai tuoi contenuti, ad esempio:

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

È possibile rimuovere gli attributi di larghezza e altezza filtrando l'output della image_downsizefunzione trovata in wp-includes/media.php. Per fare ciò, scrivi la tua funzione ed eseguila tramite il file Functions.php del tuo tema o come plugin.

Esempio:

Rimuovere gli attributi widthe 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;
}

Collegare la nuova funzione al image_downsizegancio:

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

Inoltre, non dimenticare di ridimensionare correttamente le immagini nel tuo 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 */
}

Spero che questo ti aiuti.

Saluti,

È possibile utilizzare il post_thumbnail_htmlfiltro 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' );

Metti questo nel tuo functions.phpfile

Puoi scavalcare stili / attributi incorporati con !important:

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

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

La soluzione migliore è posizionare jquery a piè di pagina

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

Soluzione CSS:

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

Ciò consente alle immagini reattive di funzionare come dovrebbero, nel frattempo mantieni gli attributi di larghezza e altezza nell'elemento img, che è probabilmente migliore per i browser più vecchi, le prestazioni e / o il passaggio di validatori HTML.

Soluzione PHP:

Ciò impedirà l'aggiunta di attributi di larghezza / altezza su qualsiasi supporto appena aggiunto nell'editor WP (tramite "Aggiungi supporto"). Cordiali saluti, potrebbe influire anche sui sottotitoli 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 );