Wer schon versucht hat ein WordPress mit einem Responsive Layout umzusetzen, kennt das Problem mit der Darstellung der Bilder. Diese werden üblicherweise mit der folgenden CSS-Anweisung skalierbar gemacht.
img { max-width:100%; }Nun hat WordPress aber die Eigenart, beim Einfügen eines Bildes folgenden Code zu erstellen.
<img title=”Title-Text” src=”http://www.domain.ch/wp-content/uploads/2011/06/bild.jpg” alt=”Alt-Text” width=”250″ height=”249″ />Das Problem: die Breiten- und Höhenangaben des img-Tags
Mit der Kombination der max-width Anweisung und der zwei Attribute „width“ und „height“ können aber nicht alle Browser gleich gut umgehen. Im Internet Explorer kann ein solches Bild bei einer schmalen Ansicht der Seite dann zum Beispiel so ausschauen (im Vergleich dazu rechts das gleiche bild im Firefox):
Das Bild wird verzerrt dargestellt, da sich die Breite automatisch ändert, die Höhe aber fix gemäss dem height-Attribut interpretiert wird. Um dieses Problem zu lösen, braucht es demzufolge die Möglichkeit, diese zwei Attribute aus den img-Tags zu entfernen. So können die diversen Browser die Proportionen der Bilder entsprechend ihrer Grösse richtig darstellen. Für diesen Zweck bietet WordPress glücklicherweise Filterfunktionen an, mit welchen der HTML-Code verändert werden kann. Diese Funktionen können in die Datei „functions.php“ geschrieben werden.
Die Filterfunktion, um die Attribute width und height aus dem img-Tag zu filtern
Die Filterfunktion übernimmt diese Aufgaben mit regulären Ausdrücken.
function image_tag($html) {
return preg_replace(array(
'/\s+width="\d+"/i',
'/\s+height="\d+"/i'
),
array(
'',
''
),
$html);
}
add_filter('get_image_tag', 'image_tag');Durch diesen Filter werden die Attribute des img-Tags entfernt. Dadurch hat man im Bezug auf Responsive Webdesign, respektive das korrekte Skalieren der Bilder, das erwähnte Problem im Internet Explorer gelöst.
Zu beachten: Der Filter entfernt die Attribute während dem einfügen im WordPress Editor. Aus diesem Grund werden Bilder, welche schon vorher eingefügt wurden auch nicht beeinflusst, sondern besitzen ihre width- und height-Attribute nach wie vor. Für ältere Bilder ist es deshalb unumgänglich, diese nochmals neu einzufügen. Das Resultat kann auch im Editor in der HTML-Ansicht angeschaut werden.
Quelle: Artikel How to Change Image Attributes in WordPress Posts von Craig Buckler auf der Webseite SitePoint.
Dasselbe Problem mit dem Artikelbild
Die oben genannte Methode funktioniert leider nur für Bilder innerhalb der Beiträge oder Seiten, und nicht für das Artikelbild, welches für jeden Artikel definiert werden kann. Um auch in den Artikelbildern die zwei Attribute zu entfernen, habe ich noch keine befriedigende Lösung gefunden. Es gibt allerdings einen kleinen Hack, welcher scheinbar auch zum Ziel führt. Wenn in den jeweiligen Templates der Thumbnail-Befehl mit folgenden Parametern aufgerufen wird, werden die Attribute ebenfalls entfernt:
the_post_thumbnail(array(0.1,0.1));Ein kleiner Haken dieser Methode ist, dass dem img-Tag dadurch eine etwas unverständliche Klasse hinzugefügt wird. Diese hat aber, soweit ich dies sehen konnte, keine negativen Auswirkungen auf die Darstellung.
Und was mache ich, wenn mein WordPress Blog schon mehrere hundert Bilder enthält und ich diese Funktion trotzdem auf alle enthaltenen Bilder anwenden möchte? Per Hand das ganze manuell ändern ist dabei keine Option.
Das müsste doch eigentlich per SQL-Befehl dann umsetzbar sein für alle Bilder, oder irre ich in dem Punkt?
Hallo Stefan
Ich kann mir ehrlich gesagt nicht vorstellen, dass dies mit einem SQL-Befehl möglich ist, aber ich bin auch nicht der Spezialist, was das Zusammenspiel von WordPress mit seiner Datenbank anbelangt.
Ich bin auf das Problem beim Erstellen eines neuen Themes gestossen, da sind halt noch keine Artikel und damit Bilder vorhanden, aber praktisch wäre es für bestehende Webseiten natürlich schon, wenn dieser Filter auf schon eingefügte Bilder angewendet werden könnte. Leider kann ich dir auf diese Frage aber im Moment keine Antwort geben. Wenn ich diesbezüglich was neues erfahre, lass ich es dich wissen.
Grüsse Christoph
Hallo Leute,
bin sehr froh diesen Artikel gefunden zu haben, ärgere mich schon den ganzen Tag mit den verzerrten Bildern im I-Explorer herum, habe bisher nur Firefox verwendet.
Allerdings habe ich kaum Ahnung, bin auch nicht in der Lage selbst eine functions.php zu erstellen, da in meinem verwendeten Theme keine vorhanden ist.
Habe nicht gewusst, dass es so eine Wissenschaft ist, eine Blogseite vernünftig aufzubauen *g
Allerdings wäre es mir sehr wichtig, dass meine Bilder auch im I-Explorer korrekt angezeigt werden.
Gibt es eine Möglichkeit, diesen „Trick“ manuell an jedem einzelnen Bild anzuwenden? Denn soviele Bilder sind es nicht in meinem Blog.
Vielen Dank
Cassia
Hoi Cassia
Ich glaube nicht, dass es einen anderen Trick gibt, da es irgendeine Funktion braucht, um die gespeicherten Bilder in die Datenbank zu schreiben. Bist du sicher dass nirgends eine Datei mit den Namen functions.php auf dem Server zu finden ist?
Ich kenne leider keine andere Möglichkeit, die Attribute der Bilder zu entfernen.
Grüsse
Christoph
Danke für deine schnelle Antwort!
Ich muss dazu sagen, dass ich wirklich nicht annähernd deine Kenntnisse habe, bin ein absoluter Anfänger auf diesem Gebiet!
Daher verstehe ich nicht mal, wie ich auf einem Server eine bestimmte functions.php finden soll! Ich bearbeite meinen Blog über das ganz normale Dashboard von wordpress.
Schade, ich dachte ich könnte im Nachhinein die Attribute des Bildes ändern, so dass es auch im IE vernünftig angezeigt wird.
Dann ist es wohl schwierig, in ein paar Sätzen die notwendige Hilfe zu geben. Was du mal versuchen könntest, ist im Dashbord unter „Design“ und dann „Editor“ zu schauen. Dort sollte in der rechten Spalte die functions.php eigentlich unter dem Titel „Theme Funktionen“ auch angezeigt werden. Falls ja könnte Sie dort auch gleich verändert werden.
Vielen Dank für diesen Artikel. War mir eine große Hilfe 🙂
Irgendwie bin ich auf deinen Artikel gestoßen. Daher vielleicht nützt es ja jemanden. Es gibt noch eine andere Thumbnail-Lösung. Diese wird hier beschrieben: http://www.blissfulinterfaces.com/making-wordpress-images-responsive/
Wenn man kein Bock auf function.php hat, dann gibt es dafür sogar schon ein WordPress-Plugin:
http://responsagewordpressplugin.com/