Empêchez WordPress de coder en dur les attributs de largeur et de hauteur img

Je me demande s'il y a un moyen simple de stopper WordPress automatiquement le codage en dur des attributs de hauteur et de largeur de l'image, autre que l'utilisation de l'expression régulière ...

Comme j'utilise une grille flexible pour mon projet (qui ne l'est pas!), Cela provoque des problèmes d'image géniaux.

Vous pouvez obtenir l'URL de l'image sélectionnée et l'ajouter manuellement à votre contenu, par exemple:

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

Vous pouvez supprimer les attributs largeur et hauteur en filtrant la sortie de la image_downsizefonction trouvée dans wp-includes/media.php. Pour ce faire, vous écrivez votre propre fonction et l'exécutez via le fichier functions.php de votre thème ou en tant que plugin.

Exemple:

Supprimez les attributs widthet 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;
}

Attachez la nouvelle fonction au image_downsizecrochet:

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

N'oubliez pas non plus de redimensionner correctement les images dans votre 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 */
}

J'espère que cela vous aidera.

À votre santé,

Vous pouvez utiliser le post_thumbnail_htmlfiltre pour supprimer l'attribut:

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

add_filter( 'post_thumbnail_html', 'remove_img_attr' );

Placez ceci dans votre functions.phpdossier

Vous pouvez remplacer les styles / attributs en ligne avec !important:

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

Ce n'est pas la solution la plus propre, mais elle résout votre problème.

La meilleure solution consiste à placer jquery dans le pied de page

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

Solution CSS:

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

Cela permet aux images réactives de fonctionner comme elles le devraient, tout en conservant les attributs width et height dans l'élément img, ce qui est probablement mieux pour les navigateurs plus anciens, les performances et / ou pour passer des validateurs HTML.

Solution PHP:

Cela empêchera l'ajout d'attributs largeur / hauteur sur tout nouveau média ajouté dans l'éditeur WP (via «Ajouter un média»). Pour info, cela peut également affecter vos légendes d'image!

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