Fluid Images – das kann auch Drupal!

Resposive Design für Websites ist eigentlich kein Hexenwerk. Die Anpassung des Layouts und der Inhaltselemente an die Anforderungen unterschiedlicher Ausgabegeräte lösen wir – notfalls unterstützt von etwas Javascript – mit Media Queries: Wenn viel Platz ist, stehen alle drei Spalten des klassischen Portal-Designs neben einander, bei kleineren Bildschirmen und auf Tablets und Smartphones werden erst zwei, dann nur eine Spalte angezeigt. Die Inhalte erscheinen unter- statt neben einander. Am liebsten hätten wir, dass sich abgesehen von den Break Points, an denen das Layout für schmalere Bildschirme neu organisiert wird, die Inhaltsspalten auch dazwischen schon flexibel an den sich verändernden Viewport angepasst werden.

Dies kurze Beschreibung ist nicht originell und beschreibt längst nicht alle Anforderungen an Webdesign, das auf allen Displays möglichst einfach benutzbar sein soll. Es gibt da allerdings eine Aufgabe, die uns den Schweiß auf die Stirn treibt: Wie bekomme ich Bilder so flexibel, dass sie sich dem Layout anpassen?

Das Problem ist bekannt. Flexibles Webdesign, das das Raster der Website in em oder % auszeichnet, stößt bei Bildern an seine Grenzen. Wenn ein Bild 600px breit ist, kann es bei Desktop-Rechnern die volle Breite der mittleren Spalte ausfüllen. Auf dem Smartphone sprengt es einfach den Rahmen.

Kein Ding, dann sorgen wir eben mit CSS dafür, dass das Bild höchstens so breit wird wie das umgebende Element, sagen wir mal, die Layout-Spalte:

1
2
3
img {
	max-width: 100%;
}

Wenn das Bild keine im HTML-Element hart codierte width- und height-Angaben trägt, wird es dann bei Layout-Spalten, die schmaler als 600px sind, praktisch skaliert (Benutzer von IE6 und kleiner: Dont’t try that at home. Oder fügt per Conditional Comments width=100% für Bilder ein). Nicht nur die Breite wird angepasst, sondern auch die Höhe auf den der Breite proportional entsprechenden Wert zusammengeschoben. Passt!

Wer statische Seiten handcodiert, hat an der Stelle kein Problem. Er kann das img ohne width und height ausgeben. Aber wer tut das schon? Websites kommen heute aus Content Management Systemen. Und die liefern Bilder als Komplettpaket mit Höhe, Breite, Alt- und Title-Tags aus. Das war auch einmal sehr gut, denn mit den festgeschriebenen Werten konnte der Browser die Bilder schneller rendern. Aber: Wenn wir die Bilder mit max-width: 100% in der Größe einschränken, werden sie in der Breite zwar angepasst, aber die Höhe bleibt so, wie sie im img-Tag festgelegt wurde.

Wollen wir flexible Bilder, müssen wir die Ausgabe des img-Tags so anpassen, dass sie keine Maßangaben enthält. Und dabei sollte natürlich der Code des Kernsystems nicht angetastet, sondern überschrieben werden.

Bei Drupal geht es ganz einfach im individuell verwendeten Theme, genauer gesagt, in der functions.php.

1
2
3
4
5
6
7
8
9
10
11
12
13
< ?php
	function meintheme_image($variables) {
		$attributes = $variables['attributes'];
		$attributes['src'] = file_create_url($variables['path']);
		// hier width und height aus dem Array entfernen
			foreach (array('alt', 'title') as $key) {
				if (isset($variables[$key])) {
					$attributes[$key] = $variables[$key];
				}
			}
		return '';
		}
?>

Damit werden alle Bilder ohne feste Maße ausgegeben und können mit CSS an ihre Umgebung angepasst werden. Wer öfter mit Drupal arbeitet, weiss, dass dies eine updatefähige Lösung ist, denn die Funktion im Core bleibt damit unangetastet.

Wer mehr über die Hintergründe erfahren möchte (oder auch weitere Lösungen zum Problem der Bildausgabe für unterschiedliche Devices erfahren will), kann hier nachlesen:

Dieser Beitrag wurde unter cms abgelegt am von .

Über Susanna Künzl

Seit 12 Jahren berate ich Unternehmen auf ihrem Weg ins Internet. Ziel ist eine Website, die den Kunden wie ein aktiver Mitarbeiter unterstützt. Mein persönlicher Schwerpunkt liegt auf den Content Management Systemen und ihrer Programmierung. Diese CMS sind meine Baustelle: TYPO3, Drupal, Wordpress und Joomla.