web-dev-qa-db-fra.com

Arrêtez wordpress de coder en dur les attributs img width et height

Je me demande s’il existe un moyen simple d’arrêter en premier lieu WordPress en codant 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.

imagespost-thumbnails
17
Richard Sweeney

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; ?>
6
Vilius Paulauskas

Vous pouvez supprimer les attributs width et height en filtrant la sortie de la fonction image_downsize trouvée à 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 hook 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.

À votre santé,

14
byjml

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

10
Yi Jiang

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 cela résout votre problème.

2
Rogier van der Linde

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

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

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 préférable pour les anciens navigateurs, les performances et/ou la validation des validateurs HTML.

PHP solution:

Cela empêchera l'ajout d'attributs width/height sur tout média ajouté récemment dans l'éditeur WP (via "Ajouter un média"). 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 );
0
MarsAndBack