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

Cette question est une ramification de cette discussion sur la suppression des attributs de dimension des images. Le code de solution fourni sur ce thread fonctionne très bien, sauf qu'il a pour effet secondaire malheureux que tous les [caption]shortcodes sont rayés de l'image.

Après plusieurs heures de fouille dans le code principal, j'ai trouvé la cause de cela. Le plugin wpeditimage TinyMCE qui est responsable de l'ajout du [caption]shortcode vérifie les attributs de largeur dans le shortcode et la imgbalise. S'il ne les trouve pas, il suffit de supprimer la légende. Depuis, cela se fait `` à la volée '' avec javascript dans l'éditeur TinyMCE, je ne peux penser à aucun type de filtre WordPress qui résoudrait ce problème. Je serais cependant très heureux de me tromper. :)

Comme note finale, ma solution temporaire a été d'utiliser la requête jQuery suivante pour supprimer tous les tags côté client incriminés. Ceci, en conjonction avec un filtre activé img_caption_shortcodepour 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');

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

Iv'e a pris le code suivant du CSS à vingt-onze thèmes (qui est parfaitement réactif à 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 suffisant pour rendre toutes les images réactives (au moins celles intégrées dans le contenu ...) Maintenant, j'ai des images réactives, mais lorsque la légende est utilisée, j'ai toujours le même problème, cela se produit parce que le tinyMCE ajoute un attribut de style à la conteneur de légende avec la largeur de l'image. Pour résoudre ce problème, je devais simplement ajouter ceci à mon CSS:

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

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

J'espère que ça aidera quelqu'un :-)