Suppression d'attributs de dimension d'image et de légende

9

Cette question est une émanation de la cette discussion sur la suppression attributs de dimension des images. Le code de solution fourni sur ce fil fonctionne très bien, à la différence qu’il a malheureusement pour effet secondaire que tous les codes abrégés [caption] sont rayés de l’image.

Après plusieurs heures de fouille dans le code principal, j’en ai trouvé la cause. Le plug-in wpeditimage TinyMCE chargé d'ajouter le shortcode [caption] vérifie les attributs de largeur dans le shortcode et la balise img . S'il ne les trouve pas, il suffit de supprimer la légende. Comme cela se fait "à la volée" avec JavaScript dans l'éditeur TinyMCE, je ne vois aucun type de filtre WordPress susceptible de résoudre ce problème. Je serais très heureux de me tromper cependant. :)

Pour finir, ma solution temporaire a été d’utiliser le jQuery suivant pour supprimer toutes les balises fautives côté client. Ceci, associé à un filtre sur img_caption_shortcode pour empêcher l’utilisation d’un style de largeur, semble faire l'affaire. Ce n'est pas joli, mais c'est un pansement pour l'instant. Quelqu'un a une meilleure idée?

// Strip width and height attributes from img, video, and object in the main article so we can have fluid images
var $fluid_items = $('.main-article-wrapper').find('img,video,object');
$fluid_items.removeAttr('width');
$fluid_items.removeAttr('height');
    
posée Dominic P 04.11.2011 - 21:18

1 réponse

18

ce n'est peut-être pas la réponse exacte que vous recherchez, mais je pense que je viens de trouver une solution de contournement plutôt bonne.

J'ai pris le code suivant parmi les vingt-onze thèmes CSS (qui est parfaitement sensible à mon humble avis):

/* Images */
.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 */
}

C’était assez pour rendre toutes les images réactives (du moins celles qui sont incorporées dans le contenu ...) Maintenant, j'ai des images sensibles, mais quand la légende est utilisée, j'ai toujours le même problème, car cela se produit parce que tinyMCE ajoute un attribut de style au conteneur de légende avec la largeur de l'image. Pour résoudre ce problème, je n'ai qu'à ajouter ceci à mon CSS:

            .wp-caption { max-width: 100%; }

Fait! fonctionne bien pour moi, bien que cela puisse ne pas fonctionner pour les images en vedette.

J'espère que cela aide quelqu'un: -)

    
réponse donnée Talbatz 03.01.2012 - 11:33

Lire d'autres questions sur les étiquettes