Empêcher Wordpress de coder en dur les attributs img width et height

16

Je me demande s’il existe une solution simple pour arrêter WordPress de coder automatiquement en dur les attributs de hauteur et de largeur de l’image, autres que l’utilisation de regex ...

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

    
posée Richard Sweeney 30.09.2011 - 09:18

6 réponses

6

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; ?> 
    
réponse donnée Vilius Paulauskas 30.09.2011 - 10:12
14

Vous pouvez supprimer les attributs width et height en filtrant la sortie de la fonction image_downsize 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 width et 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 crochet image_downsize :

/* 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 aide.

A bientôt,

    
réponse donnée byjml 30.09.2011 - 11:13
10

Vous pouvez utiliser le filtre post_thumbnail_html 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 fichier functions.php

    
réponse donnée Yi Jiang 26.09.2013 - 08:12
2

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.

    
réponse donnée Rogier van der Linde 09.07.2016 - 14:55
2

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

jQuery(document).ready(function ($) {
    jQuery('img').removeAttr('width').removeAttr('height');
});
    
réponse donnée Asad Ali 23.10.2016 - 18:13
0

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 maintenant les attributs width et height dans l'élément img, ce qui est probablement mieux pour les navigateurs plus anciens, les performances et / ou le passage des validateurs HTML.

Solution PHP:

Ceci empêchera l'ajout d'attributs width / height sur tout média récemment ajouté dans l'éditeur WP (via 'Add Media'). Pour votre information, cela pourrait également affecter vos légendes d’images!

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 );
    
réponse donnée MarsAndBack 07.08.2018 - 18:54

Lire d'autres questions sur les étiquettes