Wenn Sie ein Bild über den WordPress-Medien-Uploader hochladen und es dann in den Editor einfügen, wird es mit Breiten- und Höhenattributen versehen. Diese sind normalerweise erwünscht, da sie dem Browser helfen, beim Layout angemessenen Platz für das Bild zu reservieren. Wenn Sie jedoch verhindern möchten, dass die Einfügeaktion diese Attribute hinzufügt, können Sie diesen Code zu Ihrer functions.php-Datei oder einem eigenen Funktionalitäts-Plugin hinzufügen.
add_filter( 'post_thumbnail_html', 'remove_width_attribute', 10 );
add_filter( 'image_send_to_editor', 'remove_width_attribute', 10 );
function remove_width_attribute( $html ) {
$html = preg_replace( '/(width|height)="\d*"\s/', "", $html );
return $html;
}
Update: Das ist heutzutage höchstwahrscheinlich eine schlechte Idee, da width und height dazu beitragen, während des Ladens Platz für das Bild zu reservieren, selbst in fließbandbreiten Situationen.
Bei mir scheint dies auch die Bildunterschrift zu entfernen, wenn ich ein Bild in einen Beitrag einfügen möchte. Passiert das auch anderen?
Ja, leider erlebe ich dasselbe Problem.
Ich habe den oben vorgeschlagenen Code entfernt und bin stattdessen auf die hier empfohlene CSS-Lösung umgestiegen: http://wordpress.stackexchange.com/a/37768/17599
Drew, du hast mir das Leben gerettet, danke
Vielen Dank, sehr geehrter Herr!
Hallo Leute, das ist ähnlich dem, was ich brauche, aber ich muss die Attribute von Bildern entfernen, die im Feld „Beitragsbild“ angezeigt werden. Wie kann ich das ändern, um das zu erreichen? Hier ist, was ich in den WordPress-Foren gepostet habe: http://wordpress.org/support/topic/editing-featured-image-size-in-the-editor?replies=5#post-3109119
Ich habe das verwendet, aber dann festgestellt, dass beim Bearbeiten eines Bildes (Hinzufügen einer Bildunterschrift) aus dem Beitrag selbst (im Gegensatz zum Medien-Uploader) WordPress die Breiten und Höhen erneut anwendet. Habe hier eine Lösung gefunden, indem ich einen Filter auf „the_content“ angewendet habe.
https://snipt.net/dnnsldr/remove-image-height-and-width-for-responsive-design-in-wp/
Das war sehr nützlich bei der Arbeit mit Twitter Bootstrap, wo Bilder für den Karussell dynamisch skaliert werden mussten.
Danke Chris!
Danke dafür! Genau das, was ich gesucht habe, aber ich brauchte immer noch den Shortcode für die Bildunterschriften, damit sie funktionieren. Ich habe festgestellt, dass durch Änderung der Priorität von 10 auf etwas Größeres als 20 der Shortcode-Filter zuerst ausgeführt und dennoch erstellt wird.
z.B.
addfilter( 'image_send_to_editor', 'remove_width_attribute', 50 );Ich habe dann das hier modifiziert: http://justintadlock.com/archives/2011/07/01/captions-in-wordpress um die Ausgabe des Shortcodes zu ändern, um die Breite aus dem Caption-Div und anderes zu entfernen.
Anscheinend habe ich zu früh gesprochen. Diese Lösung funktioniert, solange der Benutzer niemals zwischen den Tabs „Visuell“ und „HTML“ im Editor wechselt.
Also… ich habe das hier benutzt
und einen eigenen Bildunterschriften-Shortcode erstellt
Damit diese Änderungen nicht durch Bearbeitungen oder Updates des Beitrags rückgängig gemacht werden, wenden Sie die Funktion als Filter auf the_content an, anstatt send_to_editor.
Ich habe einen schnellen Gist erstellt, der dies zusammen mit einigen anderen Änderungen bündelt, die helfen, hartcodierte Bildbreiten- und Höhenattribute in WordPress insgesamt zu beheben: https://gist.github.com/4557917
Spielt es eine Rolle, wo ich es einfüge? Ich habe es an verschiedenen Stellen in functions.php eingefügt, aber es funktioniert immer noch nicht. Danke für jede Information.
-Mike
Danke dafür! Hat sofort funktioniert.
Ich weiß, dass ich etwas spät kommentiere, aber es gibt einen besseren Weg, dies zu tun, und er bietet die Möglichkeit, viel mehr als nur die Breiten- und Höhenattribute zu entfernen. Soweit ich weiß, hat niemand sonst eine Möglichkeit vorgeschlagen, es so zu machen, wie ich es hier beschrieben habe.
Bild-Tags beim Hinzufügen von Medien neu erstellen
Das Internet bietet viele Blogbeiträge, die es auf Ihre Weise tun, aber meine Art ist anders, denn anstatt zu versuchen, ein vorhandenes Bild-Tag zu ändern, haben Sie die Möglichkeit, ein neues zu erstellen, genau so, wie Sie es möchten.
Nun… ich finde überall im Netz Code wie diesen, aber ich habe mit allem das gleiche Problem.
[caption id="XXX" ...] … Beschreibung[/caption] wird auch entfernt.
Und das ist nicht das, was ich will. Wie kann ich nur Breiten- und Höheninformationen entfernen? Nichts mehr, nichts weniger. Es wäre schön, wenn mir jemand eine Lösung geben könnte, die funktioniert.
Verwenden Sie SimpleXML. Der Link, den ich in meinem ersten Kommentar eingefügt habe, zeigt, wie man es benutzt. Sie können die Funktion anpassen, um Ihr Bild-Tag genau so neu zu erstellen, wie Sie es möchten.
Entschuldigung Brain, aber ich kann Ihnen nicht folgen. Muss ich Ihr Skript zu dem Skript mit preg_replace hinzufügen oder muss ich das „preg_replace“-Skript durch Ihres ersetzen? (Ich denke, letzteres ist richtig?) und dann wird Ihr Skript nur das img-Tag neu erstellen, richtig?
Auf meinem Server ist SimpleXML aktiviert, aber es funktioniert immer noch nicht. Ich habe Ihr Skript 1:1 kopiert, nur zum Testen. Muss ich eine XML-Datei erstellen? Sollte es nicht auch mit HTML(5)-Dateien (generiert mit PHP) funktionieren?
Können Sie ein Beispiel geben, wie ich nur die Breite/Höhe entfernen kann? Ich glaube, ich habe Ihr Skript nicht richtig verstanden :-/
derElch, wenn Sie meinen Code direkt in Ihre functions.php-Datei einfügen, anstatt des im Blogbeitrag vorgeschlagenen, und wenn SimpleXML aktiviert ist, sollte das alles sein, was Sie tun müssen.
Nun, das dachte ich auch, aber es passiert nichts, genau der gleiche Code wie zuvor, beginnend mit
[caption id="XXX" width="XXX" (ich weiß, dass das immer noch nicht entfernt ist)]< a …>< img src=”XXX” … width=”XXX” height=”XXX”/>< /a>Beschreibung[/caption]
Ich habe versucht, das resultierende img-Tag zu modifizieren, um besser sehen zu können, aber nichts passierte, immer noch genau der gleiche Code wie zuvor, einschließlich (und des „preg_replace“).. Irgendwelche Ideen?
Warum sie entfernen, wenn man sie leicht mit einfachem CSS überschreiben kann? width: whatever; height: auto;
Wenn ich das HTML entfernen möchte, was müsste ich ändern?
Ich schätze, es könnte nützlich sein, die Höhen-/Breitenattribute zu haben.
Meine [CSS]-Lösung https://twitter.com/ldexterldesign/status/346656591480762369
Mit freundlichen Grüßen,
Dies kann auch mit jQuery erreicht werden.
IMG-Breiten- und Höhenattribute mit jQuery entfernen
http://www.redbridgenet.com/how-to/remove-img-height-and-width-attributes-with-jquery/
Hat perfekt so funktioniert, wie es war! Danke!
Gibt es Möglichkeiten, dies anders zu tun, als jQuery oder einen CSS-Hack zu verwenden?
Ein alter Hut, aber ein guter! Das sollte eine Standardoption in den Funktionen sein… Besonders für RWD. Danke, Chris!
Ich bin auf ein Problem mit iframes gestoßen, also habe ich meinen Regex überarbeitet, um nur auf Bilder zu wirken.
Hier ist, was ich benutzt habe
Hat mir SEHR geholfen, danke!!!
Es scheint, dass dies mit WordPress 3.9 nicht mehr funktioniert hat? Hat jemand anderes dieses Problem? Schade, da es ein Eckpfeiler meiner responsiven Lösungen ist.
Was, wenn ich einen Grafikdesigner habe, der mir ein schönes und sauberes responsives Layout mit einer einzigen einfachen Klasse für das Bild gibt? Ich versuche wirklich alles, damit das Bild wie „ erscheint, aber bisher konnte ich es einfach nicht tun.
Ich dachte, die Verwendung von etwas wie
the_post_thumbnail('full', array('class' => 'img1'));hätte den Trick gemacht, aber ich lag falsch.CRAIG, deine Lösung ist ein Lebensretter.
Danke, Mann!!!!
Craigs Lösung war auch für mich richtig. Danke Craig!
Die äußere Div des Bildes mit Bildunterschrift enthält auch die Breite. Warum zum Teufel macht WordPress das?
Hallo, wie bekomme ich Breiten- und Höhenattribute von externen Bildern?
ex
Ich erstelle eine Metabox und füge ein Bild hinein. [http://www.example.com/img/test-image.jpg].
Ich möchte dieses Bild im Beitrag mit automatisch generierten Höhen- und Breitenattributen anzeigen.
< img src=”http://www.example.com/img/test-image.jpg” width=”” height=”” >
danke
Wenn Sie die neueste Version von Jetpack (v3.8.0 zum Zeitpunkt des Schreibens) verwenden, werden Sie feststellen, dass sie die Attribute
widthundheightbei Bildern mit JavaScript hinzufügt, während die Seite geladen wird, selbst wenn Sie den obigen Code verwenden. Jetpack ist mitdevicepxgebündelt, das Bilder für hochauflösende Displays unterstützt, aber Breiten-/Höhenattribute hinzufügt, die responsive Layouts brechen.Um das Problem zu beheben, fügen Sie einfach Folgendes zu
functions.phphinzu:Danke für die Informationen an alle. WordPress ist einer der einfachsten Enterprise Web Content Management Services, der es Entwicklern ermöglicht, die vollständige Kontrolle über jede Website zu haben. Angesichts der zunehmenden Bedeutung von Grafiken für Websites ist es wichtig, das Bild so zu definieren, dass es auf den Bildschirm passt und nicht zu viel Platz einnimmt. Dieser Code wird bei der Verwaltung der Bildanzeige helfen. Stellen Sie sicher, dass Sie ein responsives Design verwenden, das jetzt ein Rankingfaktor ist und auch den Benutzererlebniswert erhöht.
Super! Genau das, was ich brauchte!
Dieser Schnipsel zerstört die Funktionalität der Bildunterschriften von TinyMCE in WP 4.7.5
Eine weitere Lösung ist, die folgende Zeile in Ihre Theme-Dateien einzufügen, damit NICHT alle Bilder betroffen sind.