web-dev-qa-db-fra.com

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

Cette question découle de la cette discussion relative à la suppression des 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 shortcodes [caption] sont rayés de l’image.

Après plusieurs heures de fouille dans le code principal, j'ai trouvé la cause. Le plugin wpeditimage TinyMCE chargé de l'ajout du shortcode [caption] recherche les attributs de largeur dans le shortcode et la balise img. S'il ne les trouve pas, il suffit de supprimer la légende. Étant donné que 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, en conjonction avec 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');
filtersimages
9
Dominic P

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

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 (au moins celles incorporées dans le contenu ...). Maintenant, j’ai des images sensibles, mais lorsque la légende est utilisée, j’ai toujours le même problème, ce qui se produit car 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 n'ai qu'à 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 :-)

18
Talbatz