Aktuell wage ich erste Gehversuche mit responsiven Layouts in meinem WordPress-Theme. Ziel der ├ťbung ist ein smartphone-taugliches Layout. Leider macht einem WordPress die Arbeit bei Bildern unn├Âtig schwer.

Automatische Bildskalierung mit CSS

Bilder m├╝ssen in responsiven Layouts automatisch mit der Breite des Anzeigeger├Ąts skalieren. Feste Breiten w├╝rden hier zwangsl├Ąufig zu Darstellungsproblemen f├╝hren. Das klingt nun komplizierter als es ist. Mit drei Zeilen CSS lassen sich Bilder abh├Ąngig von der Breite ihres Eltern-Elements automatisch skalieren.

img {
	max-width: 100%;
}

Ein Bild darf also maximal so breit werden, wie seine vorgesehene Weite. Schrumpft das Eltern-Element durch Verkleinern des Viewports, wird das Bild automatisch mitskaliert. Wir m├╝ssen uns also um nichts weiter k├╝mmern, da die Browser den Rest erledigen.

Problemfall WordPress

Leider klappt die automatische Skalierung in WordPress nicht. Wenn man in einem Beitrag Bilder einf├╝gt, setzt WordPress automatisch das width- bzw. height-Attribut auf das img-Element. Sobald auch nur eines von beiden gesetzt ist, wird eine automatische Gr├Â├čenanpassung verhindert. Die Attribute m├╝ssen also weg.

Wie immer, gibt es daf├╝r zig verschiedene M├Âglichkeiten. Beispielsweise k├Ânnte man die ├╝berfl├╝ssigen Element-Eigenschaften per jQuery-Einzeiler entfernen. Wirklich sch├Ân ist das aber nicht. Es w├Ąre doch viel besser, wenn man WordPress dazu bringen k├Ânnte, den Quelltext gleich ohne width und height auszuliefern.

Dank des Hook-Systems in WordPress geht das mit ein paar Zeilen Code in der Datei functions.php des Themes:

add_filter('the_content', 'removeImageDimensions');

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

Die Funktion removeImageDimensions() entfernt per regul├Ąrem Ausdruck unsere unerw├╝nchten G├Ąste width und height. Mittels add_filter() wird der WordPress-Funktion the_content() (gibt den Inhalt eines Beitrags aus) unsere neue Funktion als Ausgabefilter zugewiesen. WordPress f├╝hrt nun bei jedem Aufruf von the_content() unsere neue Funktion removeImageDimensions() aus, die den R├╝ckgabewert von the_content() entsprechend ver├Ąndert.

Damit steht responsiven Bildbreiten nun nichts mehr im Weg.