Entfernen von Attributen für Bild- und Untertiteldimensionen


9

Diese Frage ist ein Ableger dieser Diskussion zum Entfernen von Dimensionsattributen aus Bildern. Der in diesem Thread bereitgestellte Lösungscode funktioniert sehr gut, außer dass er den unglücklichen Nebeneffekt hat, dass alle [caption]Shortcodes aus dem Bild entfernt werden.

Nachdem ich einige Stunden lang den Kerncode durchgearbeitet hatte, fand ich die Ursache dafür. Das wpeditimage TinyMCE-Plugin, das für das Hinzufügen der [caption]Shortcode-Überprüfungen für Breitenattribute im Shortcode und im imgTag verantwortlich ist. Wenn sie nicht gefunden werden, wird einfach die Beschriftung entfernt. Da dies im TinyMCE-Editor "on the fly" mit Javascript erfolgt, fällt mir kein WordPress-Filter ein, der dieses Problem beheben könnte. Ich würde mich sehr freuen, wenn ich mich als falsch erweisen könnte. :) :)

Als letzte Anmerkung bestand meine vorübergehende Lösung darin, die folgende jQuery zu verwenden, um alle clientseitigen Tags zu entfernen. Dies img_caption_shortcodescheint in Verbindung mit einem Filter , der verhindert, dass dort ein Breitenstil verwendet wird, die Aufgabe zu erfüllen. Es ist nicht schön, aber es ist vorerst ein Pflaster. 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');

Hmmm ... ist die Verwendung des visuellen Editors eine Voraussetzung? Wenn Sie nur den HTML-Editor verwenden, funktioniert ein Filter für img_caption_shortcode einwandfrei ...
goldenapples

@goldenapples, ja, ich möchte den visuellen Editor nicht verlieren, da nicht-technische Leute die Site bearbeiten werden. Vielen Dank für den Vorschlag. Irgendwelche anderen Ideen?
Dominic P

Dominic, können Sie den Code für "einen Filter für img_caption_shortcode, um zu verhindern, dass dort ein Breitenstil verwendet wird" angeben? Dies ist genau das, was ich brauche, aber ich weiß nicht, wie ich diesen Filter schreiben soll.

@ Wendy, hmm, ich kann das Ganze nicht in einen Kommentar einfügen. Wenn Sie eine andere Frage stellen und mir einen Link dazu geben möchten, werde ich sie als Antwort veröffentlichen.
Dominic P

Für den Fall, dass Sie das alles nicht durchgehen wollten, habe ich im Grunde nur das Codex-Beispiel geändert .
Dominic P

Antworten:


18

Es ist vielleicht nicht die genaue Antwort, nach der Sie suchen, aber ich denke, ich habe gerade eine ziemlich gute Problemumgehung gefunden.

Ich habe den folgenden Code aus dem CSS mit elfundzwanzig Themen übernommen (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 war ausreichend, um alle Bilder reaktionsfähig zu machen (zumindest die im Inhalt eingebetteten ...). Jetzt habe ich reaktionsschnelle Bilder, aber wenn Untertitel verwendet werden, habe ich immer noch das gleiche Problem, das auftritt, weil tinyMCE dem Stil ein Stilattribut hinzufügt Beschriftungscontainer mit der Breite des Bildes. Um das zu beheben, musste ich dies nur meinem CSS hinzufügen:

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

Getan! funktioniert gut für mich, obwohl es für vorgestellte Bilder möglicherweise nicht funktioniert.

Ich hoffe das hilft jemandem :-)


Ich hatte noch keine Zeit, dies vollständig zu testen, aber es hat sich in anderen Bereichen bereits als sehr nützlich erwiesen. Danke für die Hilfe.
Dominic P

mein Vergnügen :-)
Talbatz

Getestet in IE9, scheint nicht wie beabsichtigt zu funktionieren!
Kuldeep Daftary

Dies steht im Widerspruch zu den alten IE-Browsern
Tosh

wirklich tolle Lösung! thx
emjay
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.