it-swarm.com.de

Entfernen von Bild- und Beschriftungsdimensionsattributen

Diese Frage ist ein Ableger der dieser Diskussion zum Entfernen von Bemaßungsattributen aus Bildern. Der in diesem Thread bereitgestellte Lösungscode funktioniert sehr gut, mit der Ausnahme, dass der unglückliche Nebeneffekt ist, dass [caption]-Shortcodes aus dem Bild entfernt werden.

Nachdem ich mehrere Stunden lang den Kerncode durchgearbeitet hatte, fand ich die Ursache dafür. Das wpeditimage TinyMCE-Plugin, das für das Hinzufügen des [caption]-Shortcodes verantwortlich ist, prüft, ob im Shortcode und im img-Tag Breitenattribute vorhanden sind. Wenn sie nicht gefunden werden, wird einfach die Beschriftung entfernt. Da dies 'on the fly' mit Javascript im TinyMCE-Editor durchgeführt wird, kann ich mir keine Art von WordPress-Filter vorstellen, der dieses Problem beheben würde. Ich würde mich sehr freuen, wenn ich mich als falsch erweisen würde. :)

Als letzte Anmerkung bestand meine vorübergehende Lösung darin, die folgende jQuery zu verwenden, um alle anstößigen Tags clientseitig zu entfernen. Dies scheint in Verbindung mit einem Filter für img_caption_shortcode, der verhindert, dass ein Breitenstil dort verwendet wird, die Aufgabe zu erfüllen. Es ist nicht schön, aber es ist ein Pflaster fürs Erste. Hat jemand eine bessere Idee?

// 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');
9
Dominic P

es ist vielleicht nicht die genaue Antwort, nach der Sie suchen, aber ich glaube, ich habe gerade eine ziemlich gute Lösung gefunden.

Ich habe den folgenden Code aus dem elfundzwanzig-Themen-CSS genommen (der imho ordentlich reagiert):

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

Dies reichte aus, um alle Bilder ansprechbar zu machen (zumindest die, die in den Inhalt eingebettet sind ...). Jetzt habe ich ansprechbare Bilder, aber wenn Untertitel verwendet werden, habe ich immer noch das gleiche Problem, das auftritt, weil das tinyMCE dem Attribut "style" hinzufügt Beschriftungscontainer mit der Breite des Bildes. Um das zu beheben, musste ich nur Folgendes zu meinem CSS hinzufügen:

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

Erledigt! Funktioniert gut für mich, auch wenn es für vorgestellte Bilder möglicherweise nicht funktioniert.

Ich hoffe das hilft jemandem :-)

18
Talbatz