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

16

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.

Richard Sweeney
la source

Réponses:

7

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; ?> 
Vilius Paulauskas
la source
ne fonctionne que pour les pages wordpress codées en dur, ce qui est inutile pour un CMS.
S ..
Gardez à l'esprit: Cette méthode empêche les images réactives depuis WP 4.4 car elle ne comprend pas l' srcsetattribut.
Drivingralle
13

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é,

byjml
la source
Cela supprime srcset, sizeset d'autres attributs d'image réactifs malheureusement. :( Ceci est ma sollution actuelle, qui reconstruit les attributs: gist.github.com/cibulka/8e2bf16b0f55779af590472ae1bf9239
Petr Cibulka
10

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

Yi Jiang
la source
Fonctionne toujours comme un charme.
Rahul
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.

Rogier van der Linde
la source
Pour une raison quelconque, la classe wp-post-imagen'a pas été incluse dans mes images. Au lieu de cela, j'avais quelque chose comme wp-image-26. J'ai dû utiliser un autre sélecteur mais l'idée a fonctionné.
Pier
2

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

jQuery(document).ready(function ($) {
    jQuery('img').removeAttr('width').removeAttr('height');
});
Asad Ali
la source
Une explication sur la raison pour laquelle il s'agit de la "meilleure" solution?
Kit Johnson
1
parce que parfois "add_filter" ne fonctionne pas là où vous le souhaitez, c'est pourquoi j'ai dit
Asad Ali
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 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 );
MarsAndBack
la source