Filtern, um Bildbemaßungsattribute zu entfernen?


35

Ich arbeite an einer Site, die auf einer CSS-Vorlage mit fließender Breite basiert, bei der die maximale Breite für Bilder auf die Breite der Spalte festgelegt wird, in der sie enthalten sind, und ich muss die Inline- Breite und -Höhe entfernen Bemaßungsattribute für WordPress Bildern hinzufügt.

Ich mache es mit meinen vorgestellten Bildern mit diesem Filter:

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10, 3 );

function remove_thumbnail_dimensions( $html, $post_id, $post_image_id ) {
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    return $html;
}

Ich weiß, dass ich bei Bedarf denselben Filter auf the_content anwenden kann . Aber gibt es dafür einen besseren Weg?


Zunächst einmal vielen Dank für den sehr hilfreichen Code. Es funktioniert perfekt, um Breiten- und Höhenattribute vom img-Tag zu entfernen, aber aus irgendeinem Grund scheint es auch, den Untertitel-Shortcode zu entfernen, wenn es einen gibt. Weiß jemand, warum das so ist und wie man es korrigiert?
Dominic P

1
Vielleicht solltest du das als eigene Frage posten? Es scheint so deutlich von meinem zu sein, dass es seine eigene Antwort verdient. Trotzdem werde ich versuchen zu antworten ... für alle, die diese Antwort finden und dasselbe Problem haben: Ihr Problem ist, dass für die Funktion img_caption_shortcode, die den Untertitel-Shortcode verarbeitet, eine Breite in den Attributen des Untertitel-Shortcodes angegeben werden muss. Andernfalls wird die Beschriftung vollständig übersprungen und der in die [caption]Shortcode-Tags eingeschlossene Inhalt zurückgegeben .
Goldenapples

Wenn Sie Untertitel-Shortcodes ohne definierte Breite verwenden möchten, müssen Sie Ihr Untertitel-Markup in einer Funktion definieren, die mit dem Filter verknüpft ist img_caption_shortcode . Den Code für eine solche Funktion zu schreiben, ist jedoch mehr, als ich hier in Kommentare einfügen kann.
Goldenapples

@goldenapples, danke für deine hilfreiche Antwort. Ich habe getan, was Sie vorgeschlagen und eine neue Frage gestellt haben: wordpress.stackexchange.com/questions/32931/… . Jede Eingabe dazu wäre sehr dankbar. Wie ich in der Frage erkläre, bin ich mir nicht sicher, ob der Filter img_caption_shortcodeausreicht, um das Problem zu lösen.
Dominic P

1
Vielleicht verpasse ich das Gesamtbild dessen, was Sie tun möchten, ohne Ihren eigentlichen Inhalt zu sehen, aber kann dies nicht allein mit CSS behoben werden? Wenn Sie für Ihre Bilder eine maximale Breite verwenden, sollten Sie in der Lage sein, das Höhenproblem zu überwinden, indem Sie eine Höhe hinzufügen: auto; zu Ihren Inhaltsbildern.
Binaryorganic

Antworten:


36

Vielen Dank an alle!

Der image_send_to_editor Filter war das, was ich suchte ... Dank @ t31os für den Hinweis it out.

Hier sind meine Funktionen jetzt.

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 );

function remove_thumbnail_dimensions( $html ) {
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    return $html;
}

Dadurch werden Inline-Bemaßungsattribute aus Bildern entfernt, die mit abgerufen wurden the_post_thumbnail(), und es wird verhindert, dass diese Attribute neuen Bildern hinzugefügt werden, die dem Editor hinzugefügt wurden. Entfernt sie nicht aus Bildern, die über wp_get_attachment_imageoder andere verwandte Funktionen abgerufen wurden (keine Haken darin), aber diese Fälle können bei Bedarf in den Vorlagendateien verarbeitet werden.


1
Ich musste die \ s aus der Regex entfernen. Danach hat es gut funktioniert. Ich glaube, das lag daran, dass ich nach dem letzten Doppelzitat für die Höheneinstellung kein Leerzeichen mehr hatte.
MattSlay

1
@MattSlay Habe nur ich ein Problem damit, den Inhalt der Website dauerhaft zu ändern? Ein ansprechendes Design sollte nicht den Inhalt der Website ändern müssen, damit es korrekt formatiert wird. Ich stimme dafür, den Filter zu entfernen image_send_to_editorund ihn stattdessen hinzuzufügen the_content- wie in diesem Blogbeitrag . Dies trennt die Präsentationslogik vom Inhalt.
BFTrick

1
@BFTrick - Scheint für mich eine Frage des Kontexts zu sein. Bei einem ansprechenden Thema stimme ich Ihnen zu, da Sie sich nicht darauf verlassen können, dass vorhandene Inhalte auf diese Weise verarbeitet wurden, und Sie nicht wissen, ob für das nächste installierte Thema diese Dimensionsattribute erforderlich sind. In meinem Fall habe ich eine App erstellt, bei der das Thema ein wesentlicher Bestandteil des Inhalts war. Daher habe ich die weniger prozessorintensive Methode zum Verarbeiten der Bilder gewählt, als sie erstmals hinzugefügt wurden. Aber Sie machen einen guten Punkt.
Goldenapples

2
Warnung: Diese Antwort unterbricht Bildunterschriften in WordPress 3.5.1.
Wired

5

Modifizierte dieses Skript ein wenig. Danke für die Hilfe!

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 );
// Genesis framework only
add_filter( 'genesis_get_image', 'remove_thumbnail_dimensions', 10 );
// Removes attached image sizes as well
add_filter( 'the_content', 'remove_thumbnail_dimensions', 10 );
function remove_thumbnail_dimensions( $html ) {
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    return $html;
}

5
Aber Vorsicht. Durch Filtern des Inhalts werden auch YouTube-Videos und andere Breiten- / Höhenattribute gefiltert.
MikeNGarrett

1
Stimmt, aber das ist vielleicht eine gute Sache in einer responsiven Site. Wenn man es für Bilder machen muss, muss man es wahrscheinlich auch für andere Medien machen.
BFTrick

1

wenn du die Bildgröße in function.php als "Galerie" einstellst

add_image_size( 'gallery', 200, 120, true );

Sie können Breite und Höhe bestimmter Bildgrößen wie "Galerie" entfernen:

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10, 4 );

function remove_thumbnail_dimensions( $html, $post_id, $post_image_id,$post_thumbnail) {
    if ($post_thumbnail=='gallery'){
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    }
    return $html;
}

0

Wenn Sie diesen Filter anwenden, the_contentwird er für alle Inhalte ausgelöst. Dies ist effektiv, kann jedoch die Leistung und Ladezeit Ihrer Site beeinträchtigen. Es wäre besser, wenn Sie WordPress anweisen, beim Einfügen von Bildern nur die Tags für die Breite und Höhe der Zeilen nicht einzufügen.

Leider sind die Skripte, die das Bild tatsächlich einfügen, in JavaScript erstellt und interagieren mit dem Wysiwyg-Editor von TinyMCE. Es könnte eine Möglichkeit geben, sich direkt anzumelden, aber nicht die Standardaufrufe zu add_filter()verwenden.


1
Würde hier nicht ein Filter image_send_to_editorfunktionieren?
t31os

@ t31os - Ich glaube, das habe ich gesucht! Ich weiß nicht, warum ich diesen Haken vorher nicht gesehen habe.
Goldenapples

Nun, ich hoffe auf jeden Fall, es hilft, es sieht so aus, als ob es den Trick machen könnte ... melde dich und lass es uns wissen. :)
t31os

@ t31os Yup, das hat den Trick gemacht! Vielen Dank! Ich werde es als Antwort posten, es sei denn, Sie kommen zuerst dazu.
Goldenapples

2
Sie gehen für es Kumpel, ich bin nicht zu aufgeregt, glücklich, dass Sie in der Lage waren, eine Lösung zu finden ...;)
t31os
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.