Drupal 6 - verschiedene Hintergrundbilder für Seiten

Dieser Artikel beschreibt die einfache Möglichkeit in Drupal 6 über das Backend jeder Seite einen unterschiedlichen Hintergrund zuzuweisen. Nach gleichem Prinzip kann man auch andere Layout-Bilder je Seite über das Backend verwalten. So bietet sich zum Beispiel die Möglichkeit neben dem Hintergrund-Bild auch einen Banner bzw. ein Header-Bild zu ändern.

Benötigte Module

Folgende Module müssen installiert werden. Eine Installations-Beschreibung sowie einen Download-Link findet man auf den verlinkten Seiten.

Nach der Installation die Module Content, FileField und ImageField aktivieren.

Feld zur Inhaltsverwaltung hinzufügen

Nun kann ein Bildupload-Feld zur Inhaltsverwaltung hinzugefügt werden. Dazu geht man im Backend auf Verwalten->Inhaltsverwaltung->Inhaltstypen und wählt den gewünschten Typ aus.

Die Felder werden wie folgt befüllt:

drupal add field

Nach einem Klick auf "speichern" kann man noch einige Einstellungen vornehmen. Der Hilfetext kann zum Beispiel einen Hinweis auf die gewollte Größe des Hintergrundbildes angeben.
Unter Pfadeinstellungen kann man im Feld Dateipfad einen Unterordner angeben, in den die Bilder gespeichert werden. Hier gibt man zum Beispiel background-images ein.
Im Punkt Globale Einstellungen sollte man dann noch den Hacken für Erforderlich setzen und die Anzahl der Werte auf 1 setzen, da dies bei Hintergrundbildern sinnvoll erscheint.

Nach dem Speichern der vorgenommenen Einstellungen kann man nun Unter Inhalt erstellen und dem bearbeiteten Inhalts-Typ ein Hintergrundbild einfügen:

drupal add bg image

 

Theme-Dateien bearbeiten

Anschließend müssen auch im Theme noch Einstellungen getroffen werden, um das gewünschte Hintergrundbild anzuzeigen. Dazu die Datei template.php bearbeiten (oder anlegen):

  1. function mytheme_preprocess_page(&$variables) {
  2.  
  3.   // background image
  4.   $node = $variables['node'];
  5.   $variables['backgroundimage'] = $node->field_background_image[0]['filepath'];
  6.   unset($node->content['field_background_image']); // do not show background image in content
  7. }
Der Name der Funktion muss natürlich entsprechend angepasst werden: mytheme mit dem entsprechenden Theme-Namen ersetzen.

Zuletzt muss das Background-Image auch noch ins Seiten-Template in der Datei page.tpl.php eingefügt werden. Der Pfad zum Bild wird durch folgenden code gebildet:

  1. print $base_path.$backgroundimage;

Blog: 

Kommentare

Hey, das Tutorial beschreibt genau das, was ich versuche.
Doch beim umsetzen stoß ich immer an das Problem das der Hintergrund im FrontEnd nicht angezeigt wird.

Im Backend steht ehr unter dem Content, wenn ich ins FrontEnd wechsle sehe ich gar nichts.
Die Hintergrundbilder werden unter "/sites/default/files/background-images/" abgespeichert (dort liegen sie auch).

Eingebunden habe ich die Hintergründe wie folgt:

body style="background-image:url('<?php print $base_path.$backgroundimage; ??>');"

im Frontend wird mir folgendes ausgeworfen:

body style="background-image:url('/drupal6/');"

Kann mir hier vielleicht jemand den Schubbser in die richtige Richtung geben?
Wäre super. (Die hab ich mal rausgelassen, sonst zerschießt es den Beitrag).

Grüße

Danke an dieser Stelle für das super-erklärte-Bilderwechseldings. Habt mir sehr geholfen....

Hallo,
hier wird $backgroundimage nicht ausgegeben. Kann daran liegen, dass in Drupal zuerst der Cache geleert werden muss, damit die Änderungen an der template.php übernommen werden. MfG schnere

Hallo,

genau das Thema, dass ich gesucht habe.

Das Hintergrundbild lässt sich anzeigen, aber leider nicht mit Text im Vordergrund

überschreiben.

Muss die Zeile im page.tpl.php an einer bestimmten Stelle stehen?

Ist die Variable 'backgroundimage' richtig, oder wäre 'background-image' oder ähnlich

richtig?  Wenn ich nämlich die Variable in der function ansehe, kommt hier niergends "backgroundimage' als Variable vor.

Über eine Lösung würde ich mich sehr freuen.

Viele Grüße

Drupal-Neuling

Hallo,

  1. print $base_path.$backgroundimage;

gibt in page.tpl.php den Pfad zum Bild aus. Dieser kann in einem img-Tag verwendet werden, oder auch direkt mit dem Style-Attribut "backgound-image" dem Body als Hintergrund übergeben werden.

Die Variable kann natürlich auch umbenannt werden.

$variables['meinhintergrundbild'] = $node-&gt;field_background_image[0]['filepath'];

Dann steht im page.tpl.php $meinhintergrundbild zur Verfügung.

MfG schnere

Hallo schnere,irgend etwas gebe ich noch falsch ein.Hier noch mal mein ursprünglicher Code: template.php:function garland_preprocess_page(&$variables) {        // background image         $node = $variables['node'];         $variables['background-image'] = $node->field_background_image[0]['filepath'];         unset($node->content['field_background_image']); // do not show background                                                              image in content         }//der Code steht ganz am Ende von template.phpund impage.tpl.php     <?php endif; ?>    </div> <!-- /container -->  </div>   <!-- /layout -->  <?php print $closure ?>       <?php print $base_path.$backgroundimage; ?></body></html>// der code steht ganz am Ende vom body Drupal:Basisinformation bearbeiten
Feldname:
Der maschinenlesbare Name des Feldes. Der Name kann nicht geändert werden.

Bezeichnung: *
Ein Name der im Inhaltstyp Page als Beschriftung für dieses Feld verwendet werden soll.

Feldtyp:
DezimalzahlFileFließkommazahlGanzzahlTextDer Datentyp der mit diesem Feld in der Datenbank gespeichert werden soll. Diese Option kann nicht geändert werden.

Steuerelement: *
DateiuploadBildDer Formularelementtyp der dem Benutzer angezeigt wird, wenn dieses Feld im Inhaltstyp Page erstellt wird.

Vielleicht bekommen wir es ja doch nich hin Mfg Udo

Änder mal
  1. $variables['background-image']
in
  1. $variables['backgroundimage']
Hat sich wohl auch bei mir ein kleiner copy&paste-fehler eingeschlichen ;) MfG

Hallo, Du verwendest Garland als Theme?
  1. <?php print $base_path.$backgroundimage; ?>
Gibt dir nur den Pfad zum Bild aus. Schau dir mal den Seitenquelltext an, da sollte dann der Pfad an dem Platz des oben genannten Codes drin stehen. Um das Bild als img-Tag auszugeben kannst du folgendes eingeben:
  1. <img src="<?php print $base_path.$backgroundimage; ?>" alt="BackgroundImage" />
Dann solltest du auch ein Bild sehen. Wichtig ist mal, dass der Pfad korrekt ausgegeben wird. MfG schnere

Hallo,

Auszug aus dem Seitenquelltext.
Der "Pfad" müsste vor der Zeile "/
/

Hallo,

hast du wie oben beschrieben probiert in der template.php das background-image in backgroundimage umzubenennen?

Btw. wenn an der template.php was verändert wird sollte in der Admin über Website-Einstellungen->Leistung->"Cache Leeren" der Cache gelöscht werden, damit das auch sicher übernommen wird.

MfG

Hallo schnere,

noch mal betreffend meiner letzten Frage (die noch nicht veröffentlicht wurde),

gibt es eine Möglichkeit einen Text mit TinyMCE vor das Hintergrundbild zu setzen?

Wenn ich über das WYSIWYG einen Text ausgebe dann wird über das Hintergrundbild
der Text mit weißem Hintergrund ausgegeben (Garland Theme). Der Hintergrund müsste
ja transparent sein.

Auch wenn es keine Möglichkeit gibt, bitte kurze Antwort.

Besten Dank im Voraus für eine Rückantwort.

Bis denn
Udo

Sorry, aber bevor du dich mit Drupal befasst, solltest du dich schon ein wenig mit HTML/CSS auskennen. Du kannst den Pfad fürs Hintergrund-Bild im Body-Tag setzen (style="background-image: url()") oder eben einen img-Tag verwenden und den mit CSS in den Hintergrund legen...

Hi,

im
page.tpl.php:

<?php print $content ??>

ist jetzt der Befehl entsprechend eingebunden.

Das Bild wird angezeigt, aber wenn ich in dem entsprechenden node, noch einen
content (Text) ausgebe, dann wird das Hintergrundild nicht mit dem Text
überschrieben sondern er erscheint unter dem Bild.

Hast du noch einen Tipp für mich auf Lager?

Mfg
Udo

Neuen Kommentar schreiben