Empêcher wordpress de coder en dur les attributs de largeur et de hauteur img
7 réponses
- votes
-
- 2011-09-30
Vouspouvez obtenir l'URL de l'image sélectionnéeet l'ajoutermanuellement à votre contenu,parexemple:
<?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; ?>
You can get featured image URL and add it to your content manually, eg:
<?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; ?>
-
nefonctionne quepour lespages wordpress codéesen dur,ce quiestinutilepour un CMS.only works for hard coded wordpress pages, which is useless for a CMS.
- 0
- 2013-06-29
- S..
-
Gardez à l'esprit: Cetteméthodeempêche lesimages réactives depuis WP 4.4 carellen'inclutpas l'attribut `srcset`.Keep in mind: This method prevents responsive images since WP 4.4 because it doesn't includes the `srcset` attribute.
- 0
- 2016-02-05
- Drivingralle
-
- 2011-09-30
Vouspouvez supprimer les attributs de largeuret de hauteuren filtrant la sortie de lafonction
image_downsize
trouvée danswp-includes/media.php
. Pour cefaire,vous écrivez votreproprefonctionet l'exécutez via lefichierfunctions.php de votrethème ouen tant queplugin.<₹Example:
Supprimez les attributs
width
etheight
./** * 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 lanouvellefonction 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'oubliezpasnonplus demettre à l'échelle correctement lesimages 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.
Salutations,
You can remove the width and height attributes by filtering the output of
image_downsize
function found atwp-includes/media.php
. To do this, you write your own function and execute it via your theme's functions.php file or as a plugin.Example:
Remove the
width
andheight
attributes./** * 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; }
Attach the new function to the
image_downsize
hook:/* 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 );
Also don't forget to scale the images correctly in your 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 */ }
Hope this helps you.
Cheers,
-
Cela supprimemalheureusement `srcset`,`tailles`et autres attributs d'image responsive.:( Ceciestma sollution actuelle,qui reconstruit les attributsen arrière: https://gist.github.com/cibulka/8e2bf16b0f55779af590472ae1bf9239This removes `srcset`, `sizes` and other responsive image attributes unfortunately. :( This is my current sollution, that rebuilds the attributes back: https://gist.github.com/cibulka/8e2bf16b0f55779af590472ae1bf9239
- 0
- 2017-10-04
- Petr Cibulka
-
- 2013-09-26
Vouspouvez utiliser lefiltre
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-le dans votrefichier
functions.php
You can use the
post_thumbnail_html
filter to remove the attribute:function remove_img_attr ($html) { return preg_replace('/(width|height)="\d+"\s/', "", $html); } add_filter( 'post_thumbnail_html', 'remove_img_attr' );
Place this in your
functions.php
file-
Fonctionnetoujours comme un charme.Still works like a charm.
- 0
- 2017-08-31
- Rahul
-
- 2016-07-09
Vouspouvez remplacer les styles/attributsen ligne avec
!important
:.wp-post-image { width: auto !important; /* or probably 100% in case of a grid */ height: auto !important; }
Cen'estpas la solution lapluspropre,maiselle résout votreproblème.
You can overrule inline styles/attributes with
!important
:.wp-post-image { width: auto !important; /* or probably 100% in case of a grid */ height: auto !important; }
It's not the cleanest solution, but it solves your problem.
-
Pour une raison quelconque,la classe `wp-post-image`n'étaitpasincluse dansmesimages.Au lieu de cela,j'avais quelque chose comme `wp-image-26`.J'ai dû utiliser un autre sélecteurmais l'idée afonctionné.For some reason the class `wp-post-image` wasn't included in my images. Instead I had something like `wp-image-26`. I had to use another selector but the idea worked.
- 0
- 2018-05-16
- Pier
-
- 2016-10-23
Lameilleure solutionest deplacerjquery dans lepied depage
jQuery(document).ready(function ($) { jQuery('img').removeAttr('width').removeAttr('height'); });
Best solution is to place jquery in footer
jQuery(document).ready(function ($) { jQuery('img').removeAttr('width').removeAttr('height'); });
-
Uneexplication surpourquoi c'est la «meilleure» solution?Any explanation about why this is the "best" solution?
- 0
- 2017-08-27
- Kit Johnson
-
parce queparfois "add_filter"ne fonctionnepas là où vous le souhaitez,c'estpourquoij'ai ditbecause sometimes "add_filter" don't work where you want it to be that's why I said
- 1
- 2017-09-03
- Asad Ali
-
- 2018-08-07
Solution CSS:
img[class*="align"], img[class*="wp-image-"] { width: auto; height: auto; }
Solution PHP:
Celaempêchera l'ajout d'attributs largeur/hauteur surtoutmédianouvellement ajouté dans l'éditeur WP (via 'Ajouter unmédia').Pourinfo,celapeut é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 );
CSS solution:
img[class*="align"], img[class*="wp-image-"] { width: auto; height: auto; }
This allows responsive images to work as they should, meanwhile you maintain the width and height attributes in the img element, which is probably better for older browsers, performance and/or to pass HTML validators.
PHP solution:
This will prevent the addition of width/height attributes on any newly-added media in the WP editor (via 'Add Media'). FYI, it may affect your image captions too!
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 );
-
- 2020-01-20
Voici une solution Javascript simple:
<script type="text/javascript"> jQuery.noConflict(); jQuery(document).ready(function($){ $('img').each(function(){ $(this).removeAttr('width') $(this).removeAttr('height'); }); }); </script>
Celapeut être utilisépour cibler desimages spécifiques au lieu detoutes lesimagesen utilisant un sélecteur CSS,comme ceci:
$('.myspecificclass img').each(function()
Here is a simple Javascript solution:
<script type="text/javascript"> jQuery.noConflict(); jQuery(document).ready(function($){ $('img').each(function(){ $(this).removeAttr('width') $(this).removeAttr('height'); }); }); </script>
This can be used to target specific images instead of all images by using a CSS selector, like so:
$('.myspecificclass img').each(function()
Jeme demande s'ilexiste unmoyen simple d'arrêter WordPress de coder automatiquementen dur les attributs de hauteuret de largeur de l'imageen vedette,autre que l'utilisation de regex ...
Commej'utilise unegrilleflexiblepourmonprojet (quine l'estpas!),celapose desproblèmes d'imagegéniaux.