Zufallsbilder als Hintergrund

Ich bin dabei, die Schulwebsite [http://www.bkrheinbach.de] endlich mit contao zu "dynamisieren". Geplant sind im Header Metanavi und Navi erster Ebene. Um Dropdown Probleme zu umgehen, gehen die weiteren Ebenen in die Vertikale.
Da der Headbereich damit ganz schön voll ist, würde ich gerne ein zufälliges Bild oben im Hintergrund erscheinen lassen, nicht als Modul im Vordergrund.
Ich habe 10 verschiedene Kopfbilder erstellt und das Zufallsmodul. Gibt es eine Möglichkeit, das nun in den Hintergrund zu packen, um mir mein Layout nicht zu zerschiessen?
Kann leider nichts online zeigen, da der Schulspace zZt noch von anderen Datenbanken zugemüllt ist.

HAllo gesti

mit css und javascript (random) kannst du das machen.

Gruss Marko

Hallo Marko,
also etwas so, wie ich es bei der derzeitigen Version auf der Eingangsseite mit dem Hauptbild gemacht habe?! [Bin leider ein absoluter JavaScript-Laie]

Code:

<script type="text/javascript" language="JavaScript">  </script>

Und wie riefe ich das im CSS auf? In HTML ging es mit

Code:

<script type="text/javascript" language="JavaScript">  </script>

Hallo gesti
Du kannst es so lösen. Mootools sollte aktiviert sein!
Hier das js:

Code:

<script type="text/javascript"> window.addEvent('domready', function() { //random var number=Math.floor(Math.random()*10) if (number==0) { number=1; } var color=new Array(); color[1]="#bbbbbb"; color[2]="#000000"; color[3]="#C04000"; //usw. var title=new Array(); title[1]="Titel 1"; title[2]="Titel 2"; title[3]="Titel 3"; //usw. var pathToImage = 'img/index/' + number + '.jpg'; $('idHeaderDiv').setStyle('background-image', 'url('+ pathToImage +')'); //Titelfarbe $('idTitle').setStyle('color', color[number]); //Inhalt des Titels $('idTitle').set('text', title[number]); }); </script>

Auszug aus dem Template

Code:

<div id="idHeaderDiv"> <h1 id="idTitle">Das ist der Titel</h1> </div>

Gruss Marko

Herzlichen Dank, Marco, das hat mich weiter gebracht!

Ein zufälliges Hintergrundbild kann natürlich auch mit Contao, mit dem Modul "Zufallsbild" realisiert werden.

Möchte man aus irgendweinem Grund darauf verzichten, dann kann man ein zufälliges Hintergrundbild auch mithilfe von PHP realisieren.

So geht man dabei vor:

1. Ordner mit den Zufallsbildern erstellen, z. B. unter /tl_files/img/bg/ und eurer Bilder hier ablegen.
2. PHP-Datei, z. B. mit dem Namen rotate.php erstellen und ebenfalls in dem Ordner /tl_files/img/bg/ ablegen.

PHP-Code:

<?php /* ------------------------- Konfiguration ----------------------- Verzeichnispfad der Hintergrundbilder. Befindet sich die rotate.php im gleichen Ordner wie die Bilder, dann $folder = '.' */ $folder = '.'; /* Welche Dateitypen sollen unterstützt werden? */ $extList = array(); $extList['gif'] = 'image/gif'; $extList['jpg'] = 'image/jpeg'; $extList['jpeg'] = 'image/jpeg'; $extList['png'] = 'image/png'; // --------------------- Ende Konfiguration ----------------------- $img = null; if (substr($folder,-1) != '/') { $folder = $folder.'/'; } if (isset($_GET['img'])) { $imageInfo = pathinfo($_GET['img']); if ( isset( $extList[ strtolower( $imageInfo['extension'] ) ] ) && file_exists( $folder.$imageInfo['basename'] ) ) { $img = $folder.$imageInfo['basename']; } } else { $fileList = array(); $handle = opendir($folder); while ( false !== ( $file = readdir($handle) ) ) { $file_info = pathinfo($file); if ( isset( $extList[ strtolower( $file_info['extension'] ) ] ) ) { $fileList[] = $file; } } closedir($handle); if (count($fileList) > 0) { $imageNumber = time() % count($fileList); $img = $folder.$fileList[$imageNumber]; } } if ($img!=null) { $imageInfo = pathinfo($img); $contentType = 'Content-type: '.$extList[ $imageInfo['extension'] ]; header ($contentType); readfile($img); } else { if ( function_exists('imagecreate') ) { header ("Content-type: image/png"); $im = @imagecreate (100, 100) or die ("Cannot initialize new GD image stream"); $background_color = imagecolorallocate ($im, 255, 255, 255); $text_color = imagecolorallocate ($im, 0,0,0); imagestring ($im, 2, 5, 5, "IMAGE ERROR", $text_color); imagepng ($im); imagedestroy($im); } } ?>

3. In eurer CSS-Datei, welche z. B. unter /tl_files/css/style.css zu finden ist, könnte ihr nun das Zufallsbild wie folgt ansprechen:

HTML-Code:

body { background: #FFF url(../img/bg/rotate.php) 0 0 no-repeat; }

4. Fertig. Viel Spaß damit!

Hallo minstyle

Vielen Dank für Deinen Beitrag, leider funktioniert dies bei mir nicht. Habe es so eingebunden und auch das PHP um die Bildextensions erweitert .JPG, etc.

Siehst Du allenfalls, woran dies liegt, dass meine Bilder im Hintergrund nicht angezeigt werden ?

Vielen Dank und Grüsse
Michi

Liste der Anhänge anzeigen (Anzahl: 3)

Hallo zusammen

Leider bringe ich es nicht zum Laufen. Ich habe es genau so aufgebaut wie im obigen Beitrag von minstyle beschrieben. Habe sogar die selbe Ordnerstruktur genommen, doch es klappt nicht. Der Hintergrund wird nicht angezeigt:

www.loeffler-jost.ch/neu

Siehe auch beiligende Attachments.

Wäre sehr dankbar wenn mir hier jemand helfen könnte, denn ich würde dieses Feature sehr gerne einbauen.

Danke und Grüsse
Michi

Wenn ich die rotate.php direkt aufrufe, stürzt mir der Firefox ab, Chrome und Opera laden zwar eine Seite, allerdings mit sehr sehr sehr vielen unlesbaren Zeichen (wird wohl das Bild sein), im HTML-Code find ich aber folgenden Hinweis:

: Cannot modify header information - headers already sent by (output started at E:\www\vhosts\loeffler-jost.ch\httpdocs\neu\tl_files\img\bg\rotate.php:1) in E:\www\vhosts\loeffler-jost.ch\httpdocs\neu\tl_files\img\bg\rotate.php on line 59

Evtl. liegts daran. Schau doch mal durch ob in deiner PHP-Datei noch irgendwo ein unsichtbares Zeichen vor dem Start-Tag hängt oder Ähnliches.

Ist aber eben nur eine Vermutung, obs wirklich daran liegt kann ich dir nicht sagen.

Zitat:

Zitat von svr

Hallo minstyle

Vielen Dank für Deinen Beitrag, leider funktioniert dies bei mir nicht. Habe es so eingebunden und auch das PHP um die Bildextensions erweitert .JPG, etc.

Siehst Du allenfalls, woran dies liegt, dass meine Bilder im Hintergrund nicht angezeigt werden ?

Xamanoths Fehler kann ich auch nachvollziehen.

Du brauchst die PHP-Datei auch nicht erweitern:

RICHTIG:

PHP-Code:

/* Welche Dateitypen sollen unterstützt werden? */ $extList = array(); $extList['gif'] = 'image/gif'; $extList['jpg'] = 'image/jpeg'; $extList['jpeg'] = 'image/jpeg'; $extList['png'] = 'image/png';

AKTUELL (Deine Modifikation):

PHP-Code:

/* Welche Dateitypen sollen unterstützt werden? */ $extList = array(); $extList['gif'] = 'image/gif'; $extList['jpg'] = 'image/jpg'; $extList['jpeg'] = 'image/jpeg'; $extList['png'] = 'image/png';

Übernimm meinen PHP-Code 1:1 und es sollte dann eigentlich funktionieren, vorallem da du derzeit auch png-Dateien verwenden möchtest.

Liste der Anhänge anzeigen (Anzahl: 1)

Hallo minstyle

Habe nun Deinen Code 1:1 übernommen und nochmals raufgeladen. Der Fehler scheint immer noch vorhanden zu sein:

http://www.loeffler-jost.ch/neu/tl_f.../bg/rotate.php

Woran kann dies den noch liegen?

Anbei auch noch mein php doku.

Vielen Dank und Grüsse
michi

Oder muss ich dies zusätzlich noch im Seitenlayout irgendwo im Header einbauen ? Ich frage dies nur wegen der Fehlermeldung beim Direktaufruf, da dort was mit der Zeile 59 im php steht.

Wenn ja, wie und wo muss ich dies zusätzlich noch einbinden ?

Danke und Grüsse
Michi

Hallo zusammen

Wollte nur informieren, dass es unterdessen klappt. Es war wohl was mit den Bildern. Versuche dies nun noch als GIF laufen zu lassen, da die Bilder doch recht lange brauchen bis sie geladen sind, da sie doch recht grosse KB haben.

Grüsse
Michi

Zitat:

Zitat von minstyle

Ein zufälliges Hintergrundbild kann natürlich auch mit Contao, mit dem Modul "Zufallsbild" realisiert werden.

Hallo,
das mit der rotate.php funktioniert wunderbar. Mich würde nur mal interessieren wie man das selbe Ergebniss mit dem Modul "Zufallsbild" hinbekommt.
Mit dem Modul kann ich ein Zufallsbild ausgeben aber was muss ich machen damit das Bild als Hintergrundgrafik für z.B. den Header ausgegeben wird?

Gruß
Bastian

Bei mir funktioniert's nur wenn ich rotate.php aufrufe

Irgendwie scheint es etwas mit dem Header in sich zu haben. Obwohl ich den Cache ausgeschaltet habe, ruft der Browser (Safari, Firefox) für jede Session 1 Bild und dann bleibt es für alle Seiten das gleiche. Wenn ich den Browser schliesse und dann wieder öffne: gleiche Situation, aber mit einem anderen Bild ...

Ich möchte jedoch, dass das Bild bei jedem Aufruf neu berechnet wird.