Björn Landmesser

Amazing how difficult it is to find out how to refer to images in a CSS file in JSF 2 using libraries. But finally I found it out with the help of a colleague.

Imagine you have an image background.png in a resource library called images. When you want to use this image as background in CSS you just write

.myclass {
    background-image: url(#{resource['images:background.png']});
}

Not so difficult, isn’t it?

Auf der Seite der Innenstadtgemeinde Itzehoe habe ich ein wenig PHP und CSS eingefügt, um dafür zu sorgen, dass unterschiedliche Seiten unterschiedliche Bilder im Header anzeigen.

Auf meiner Seite, auf der sich dieser Blog befindet, werden unterschiedliche Header mittels Artikelbildern erreicht. Das bedeutet aber, dass man für jede Seite, die ein anderes Bild als den Standard haben soll, ein eigenes Bild hoch laden muss. Auf der Innenstadtgemeinde-Seite soll aber z.B. für Gemeinde und alle Unterseiten von Gemeinde das selbe Bild erscheinen.

Um dies zu erreichen habe ich folgenden PHP-Code in die header.php eingefügt:

<p id="headerimage" class="<?php
  $tmp = substr(get_permalink(), strlen(get_bloginfo('url'))+1);
  echo substr($tmp,0, strpos($tmp,'/'));
?>" />

Zunächst verwundert vielleicht die Verwendung eines Paragraphen als Element für das Hintergrundbild. Das hängt vom gewählten Theme ab. Typischerweise benutzt man hier ein div. Ein img hat den Nachteil, dass die Bild-URL im Attribut src angegeben wird, und nicht über CSS verändert werden kann.

Dieser PHP-Code nimmt die aktuelle Seiten-URL, z.B. http://www.kirche-itzehoe.de/isg/musik/orgeln/, schneidet dort den Anfang http://www.kirche-itzehoe.de/isg/ weg (das, was get_bloginfo('url') zurückgibt) und wirft dann noch alles weg, was nach dem folgenden / kommt. Somit bleibt bei dieser URL noch musik übrig, und somit ergibt sich

<p id="headerimage" class="musik" />

Nun kann man einfach mittels CSS unterschiedliche Bilder verwenden.

#headerimage.kirchen {
  background: url('images/myheaders/altar.jpg');
}

#headerimage.musik {
  background: url('images/myheaders/orgel.jpg');
}

#headerimage.gemeinde {
  background: url('images/myheaders/empore.jpg');
}

Voraussetzung dafür, dass das funktioniert ist eine lesbare Permalink-Struktur. Dazu wählt man unter Einstellungen / Permalinks den Artikelnamen aus.

Die Bilder, die als Header verwendet werden sollen, habe ich per FTP in das Theme-Unterverzeichnis kopiert. Dadurch funktionieren die relativen Links in der CSS-Datei.