Will man auf Drupal Webseiten für jede Seite, Kategorien oder eine Gruppe von Seiten unterschiedliche Hintergrundbilder anzeigen, so muss man etwas Hand anlegen, durch gezieltes ändern des Seiten-Themes in der page.tpl.php, bekommt aber schnell ein gutes Ergebnis hin. Hat man einmal die Modifikationen vorgenommen, so kann ganz normal über Drupal Oberflächen die Hintergrundbilder anpassen. Zusätzlich kann man die Hintergrundbilder automatisch in der Größe anpassen und mit Effekte (ImageCacheund ImageCache Actions) bearbeiten. Ein normaler Anwender kann so ohne jegliche Programmierkenntnisse einfach ein Bild hochladen den Rest macht Drupal von alleine.
Hintergrundbilder über CCK (Content-Felder)
Mittels eines CCK-Feldes kann man für jeden Node / Beitrag ein Bild hochladen, welches als Hintergrund eingebunden werden kann. Damit das Bild dann entsprechend durch ImageCache gerendert wird, um Effekte auf das Bild anzuwenden, muss man die Feldanzeige unter den Inhaltstypen anpassen. Für seinen Theme kann man dann das Feld direkt ansprechen und einbinden:
$node->field_hintergrund[0]['filepath']; $node->field_hintergrund[0]['view'];
Bilder für Kategorien
Normalerweise nutzt man in Drupal das Taxonomy-System und Begriffe (Terms) um seinen Inhalt strukturiert anzulegen. Zum Beispiel lassen sich hiermit Kategorien anlegen unter den Beiträge gelistet sind. Will man allen Beiträge unter einem bestimmte Begriff mit einem Hintergrundbild versehen, so kann man das Modul Taxonomy Image nutzen. Hierdurch kann man innerhalb der Taxonomy Optionen Bilder für einzelne Begriffe hinterlegen.
Möchte man die Bilder durch ImageCache rendern, so geht man einfach die Taxonomy Image Konfiguration und setzt eine entsprechende Vorlage (Present).
Beschreibung der API Funktionen von taxonomy_image zum Einbinden ins Theme: Taxonomy Image APIs
#use this function to find terms on the current node taxonomy_node_get_terms($node) #you know the term $imgSrc=taxonomy_image_display($term);
Effekte mit Imagecache
Hochgeladene Bilder lassen sich meist nicht unbedingt 1 zu 1 als Seiten-Hintergrund einbinden. Farbübergänge, Farbverläufe, Größenanpassungen und Skalierungen lassen sich wunderbar mittels ImageCache und ein paar Overlays realisieren. In diesem Zusammenhang sollte man auch gleich Imagecache Actions installieren, dadurch hat man zusätzliche Bearbeitungsmöglichkeiten für seine Bilder.
Da auch halbtransparente PNGs genutzt werden können, kann man mithilfe eines Overlay Bildes wunderbar Farbverläufe und Farbübergänge einblenden.
Da alle genutzten Module bereits die Bilder im ImageCache aufbereiten, kann man die Bilderurls direkt nutzen, falls man innerhalb der page.tpl.php jedoch noch ein Bild durch ImageCache rendern will, nutzt man die Funktion theme mit ImageCache Parameter mehr dazu in den Kommentaren unter Imagecache: dynamic image manipulation
print theme('imagecache',[...]);Theme modifizieren: Bild einbinden
Die Einbindung der Bilder lässt sich über mehrere Wege bewerkstelligen. Normalerweise werden die Hintergrundbilder in den CSS Dateien definiert, es lässt sich allerdings auch über jQuery manipulieren. Da man unter Umständen für eine Seite mehrere mögliche Bilderquellen hat und hier ein Priorität genutzt wird, kann man auch alles direkt im Drupal Theme über die Datei page.tpl.php machen, z.B. durch gezieltes manipulieren eines der Seitenhintergrungelemente wie dem body Tag.
Folgenden Code habe ich innerhalb der page.tpl.php eingefügt. Da ich normalerweise den Zen Theme mit Sub-Themes nutze, stehen mir ein paar Variablen mehr zur Verfügung also nicht wundern.
Zum Zuweisen ändern wir dann den body Tag. Sicherlich gibt es auch anderen eventuelle bessere Möglichkeiten. Position und andere Angaben zum Hintergrund gehören dann allerdings wieder in die CSS-Dateien.
<body class="<?php print $body_classes; ?>" style="background-image: url('<?php print $bodyImg; ?>')">Hier wird dann in unterschiedlichen Source nach möglichen Hintergrundbildern gesucht und der Pfad an die Variable $bodyImg übergeben:
/* some background image handling stuff */
/* a priority list handling for finding background image
* 1. node pages: look for a CCK (Content) Field
* 2. node pages: find image on a termid
* 3. term pages: look for a term image
* 4. other pages and no image found: use default image of the theme
*
**/
$bodyImg = '';
if (isset($node)) {
#we are on a node
#check if a content field gives use a background image
if(isset($node->field_hintergrund[0]['filepath'])) {
$bodyImg = yourtheme_get_image_of_html($node->field_hintergrund[0]['view']);
} else {
$bodyImg = yourtheme_get_term_image($node);
}
} elseif(arg(0) == 'taxonomy' && arg(1) == 'term') {
#we are on a taxonomy page
$bodyImg = yourtheme_image_by_taxonomy_page(arg(2));
}
#if we dont found a background image yet, so use a default one out of the theme folder
if ($bodyImg=='') $bodyImg=$base_path . $directory . '/images/background.jpg';
/* some functions */
/**
* returns a image that is attached to a termid
*/
function yourtheme_image_by_taxonomy_page($term) {
if (!function_exists(taxonomy_image_get_object)) return '';
$imgSrc=taxonomy_image_display($term);
return yourtheme_get_image_of_html($imgSrc);
}
/**
* helper that parses the image url out of a <img> tag
*
* we use imagecache to generate our background images and we are
* using several modules that attach images to different kinds of pages
* all modules have internal imagecache functions, so we dont need extra
* imagecache handling here
*
*/
function yourtheme_get_image_of_html($imgtag) {
if(preg_match('|src="(.*?)"|',$imgtag,$match)) return $match[1];
return '';
}
/**
* extract the termid of a node and search for a images on that termid
*/
function yourtheme_get_term_image($node) {
if (!function_exists(taxonomy_node_get_terms)) return "";
#read all term attached to this node
$keys=array_keys(taxonomy_node_get_terms($node));
#check if we have a term and return only the first one
#because we use only a single vocabulary
if (count($keys)>0) {
$tid = current($keys);
} else {
return '';
}
#read image term an
$imgSrc=taxonomy_image_display($tid);
return yourtheme_get_image_of_html($imgSrc);
}
Disqus - noscript