Wir haben natürlich nicht für alles eine Lösung. Aber an Problemen, über welche wir selber schon gestolpert sind, müssen sich andere ja nicht auch noch die Zähne ausbeissen.

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):

Darstellung WordPress

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.

Share This