Filtre pour supprimer les attributs de dimension d'image?


35

Je travaille sur un site basé sur un modèle css de largeur fluide qui définit une largeur maximale sur les images en fonction de la largeur de la colonne qui les contient. Je dois également supprimer les attributs de dimension de largeur et de hauteur intégrés que WordPress ajoute aux images.

Je le fais avec mes images en vedette avec ce filtre:

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10, 3 );

function remove_thumbnail_dimensions( $html, $post_id, $post_image_id ) {
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    return $html;
}

Je sais que je peux appliquer le même filtre à the_content , si nécessaire. Mais y a-t-il une meilleure façon de faire cela?


Tout d'abord, merci pour le code très utile. Cela fonctionne parfaitement pour enlever les attributs width et height de la balise img, mais pour une raison quelconque, il semble également supprimer le shortcode de légende s'il en existe un. Est-ce que quelqu'un sait pourquoi et comment le corriger?
Dominic P

1
Peut-être devriez-vous poster ceci comme sa propre question? Il semble suffisamment distinct du mien pour mériter sa propre réponse. Néanmoins, je vais essayer de répondre ... à quiconque trouvera cette réponse et rencontrera le même problème: votre problème est que la fonction img_caption_shortcode, qui traite le shortcode de légende, nécessite qu'une largeur soit spécifiée dans les attributs de shortcode de légende. Sinon, la légende est ignorée et renvoie simplement le contenu [caption]encapsulé dans les balises shortcode.
Goldenapples

Si vous souhaitez pouvoir utiliser des codes courts de légende sans largeur définie, vous devez définir le balisage de votre légende dans une fonction liée au filtre img_caption_shortcode. Écrire le code pour une fonction comme celle-là est plus que ce que je peux insérer dans les commentaires ici, cependant.
Goldenapples

@goldenapples, merci pour votre réponse utile. J'ai fait ce que vous avez suggéré et posé une nouvelle question ici: wordpress.stackexchange.com/questions/32931/… . Toute contribution à ce sujet serait grandement appréciée. Comme je l'explique dans la question, je ne suis pas sûr que le filtre img_caption_shortcodeactivé suffira à résoudre le problème.
Dominic P

1
Peut-être me manque-t-il le tableau plus général de ce que vous essayez de faire sans voir votre contenu réel, mais ne pouvons-nous pas y remédier en utilisant uniquement le CSS? Si vous utilisez une largeur maximale sur vos images, vous devriez pouvoir résoudre le problème de la hauteur en ajoutant une hauteur: auto; à vos images de contenu.
binaryorganic

Réponses:


36

Merci a tous!

Le filtre image_send_to_editor était celui que je cherchais ... merci @ t31os de l'avoir signalé.

Voici mes fonctions maintenant.

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 );

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

Cela supprime les attributs de dimension en ligne des images extraites avec the_post_thumbnail()et empêche leur ajout aux nouvelles images ajoutées à l'éditeur. Ne les supprime pas des images récupérées via d' wp_get_attachment_imageautres fonctions associées (aucun crochet ne s'y trouve), mais ces cas peuvent être traités dans les fichiers de modèle si nécessaire.


1
Je devais enlever le \ s de la regex. Après cela, ça a bien fonctionné. Je pense que c’est parce que je n’ai pas eu d’espace de fuite après la dernière citation double sur le réglage de la hauteur.
MattSlay 10/10/12

1
@MattSlay Est-ce juste moi qui ai un problème avec la modification permanente du contenu du site? Un thème réactif ne devrait pas avoir à modifier le contenu du site Web pour le mettre en forme correctement. Je vote pour supprimer le filtre image_send_to_editoret l'ajouter à the_content- comme ce billet de blog . Cela sépare la logique de présentation du contenu.
BFTrick

1
@ BFTrick - Cela me semble être une question de contexte. Pour un thème sensible, je suis d’accord avec vous car vous ne pouvez pas compter sur le contenu existant ayant été traité de cette manière, et vous ne savez pas si le prochain thème installé aura besoin de ces attributs de dimension. Dans mon cas, je construisais une application dont le thème faisait partie intégrante du contenu. J'ai donc choisi la méthode de traitement des images moins gourmande en ressources de traitement par le processeur, lors de leur ajout. Mais vous faites valoir un bon point.
Goldenapples

2
Attention: cette réponse casse les légendes des images dans WordPress 3.5.1.
câblé le

5

Modifié ce script un peu. Merci pour l'aide!

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 );
// Genesis framework only
add_filter( 'genesis_get_image', 'remove_thumbnail_dimensions', 10 );
// Removes attached image sizes as well
add_filter( 'the_content', 'remove_thumbnail_dimensions', 10 );
function remove_thumbnail_dimensions( $html ) {
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    return $html;
}

5
Attention, cependant. Filtrer the_content filtrera également les vidéos youtube et tout autre attribut width / height.
MikeNGarrett

1
C'est vrai, mais cela peut être une bonne chose dans un site réactif. Si vous avez besoin de le faire pour les images, vous devez probablement également le faire pour d’autres supports.
BFTrick

1

si vous définissez la taille de l'image dans function.php en tant que "galerie"

add_image_size( 'gallery', 200, 120, true );

vous pouvez supprimer la largeur et la hauteur d'une taille d'image spécifique telle que "galerie":

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10, 4 );

function remove_thumbnail_dimensions( $html, $post_id, $post_image_id,$post_thumbnail) {
    if ($post_thumbnail=='gallery'){
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    }
    return $html;
}

0

Appliquer ce filtre pour the_contentle déclencher pour tout le contenu. Cela sera efficace, mais pourrait affecter les performances et le temps de chargement de votre site. Il serait préférable que vous disiez à WordPress de ne pas insérer les balises inline width et height lorsque vous insérez des images.

Malheureusement, les scripts qui insèrent réellement l'image sont construits en JavaScript et interagissent avec l'éditeur wyiwyg de TinyMCE. Il y aurait peut-être un moyen de le connecter directement, mais sans utiliser les add_filter()appels standard .


1
Un filtre ne fonctionnerait-il pas image_send_to_editorici?
t31os

@ t31os - Je pense que c'est ce que je cherchais! Je ne sais pas pourquoi je n'ai pas vu ce crochet avant.
Goldenapples

Eh bien, j’espère bien que cela aide, on dirait que c’est peut-être ce qui convient le mieux… faites-nous savoir et faites-le-nous savoir. :)
t31os

@ t31os Yup, ça a fait l'affaire! Merci! Je vais le poster en tant que réponse, à moins que vous n'y arriviez d'abord.
Goldenapples

2
Tu y vas mon pote, je ne suis pas trop inquiet, heureux que tu
aies
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.