Contao-Camp 2024
Ergebnis 1 bis 15 von 15

Thema: Zufallsbilder als Hintergrund

  1. #1
    Contao-Nutzer Avatar von gesti
    Registriert seit
    28.04.2011.
    Ort
    Meckenheim, D
    Beiträge
    98

    Standard 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.

  2. #2
    Contao-Fan Avatar von markocupic
    Registriert seit
    06.12.2010.
    Ort
    Oberkirch (Schweiz)
    Beiträge
    660

    Standard

    HAllo gesti

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

    Gruss Marko

  3. #3
    Contao-Nutzer Avatar von gesti
    Registriert seit
    28.04.2011.
    Ort
    Meckenheim, D
    Beiträge
    98

    Standard

    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">
    <!--
    
    var Anzahl = 11;     // Anzahl der Bilder
    
    var ZufallJetzt = new Date()
    var ZufallsZahl = ZufallJetzt.getSeconds() % (Anzahl);
    
    // Zuweisungen abhängig von der Zufallszahl
    
    if (ZufallsZahl==0) {
    TextFarbe = "#C04000";
    GrafikUrl = "img/index/1.jpg";
    UnterTitel="Schloss und Riegel, Fotoauftrag der BFSM 2010"
    }
    
    if (ZufallsZahl==1) {
    TextFarbe="#DF0000";
    GrafikUrl = "img/index/2.jpg";
    UnterTitel="Schloss und Riegel, Fotoauftrag der BFSM 2010"
    }
    
    if (ZufallsZahl==2) {
    TextFarbe="#DF0000";
    GrafikUrl = "img/index/3.jpg";
    UnterTitel="Schloss und Riegel, Fotoauftrag der BFSM 2010"
    }
    
    if (ZufallsZahl==3) {
    TextFarbe="#DF0000";
    GrafikUrl = "img/index/4.jpg";
    UnterTitel="Schloss und Riegel, Fotoauftrag der BFSM 2010"
    }
    
    if (ZufallsZahl==4) {
    TextFarbe="#DF0000";
    GrafikUrl = "img/index/5.jpg";
    UnterTitel="Schloss und Riegel, Fotoauftrag der BFSM 2010"
    }
    
    if (ZufallsZahl==5) {
    TextFarbe="#DF0000";
    GrafikUrl = "img/index/6.jpg";
    UnterTitel="Schloss und Riegel, Fotoauftrag der BFSM 2010"
    }
    
    if (ZufallsZahl==6) {
    TextFarbe="#DF0000";
    GrafikUrl = "img/index/7.jpg";
    UnterTitel="Schloss und Riegel, Fotoauftrag der BFSM 2010"
    }
    
    if (ZufallsZahl==7) {
    TextFarbe="#DF0000";
    GrafikUrl = "img/index/9.jpg";
    UnterTitel="Schloss und Riegel, Fotoauftrag der BFSM 2010"
    }
    
    
    if (ZufallsZahl==8) {
    TextFarbe="#DF0000";
    GrafikUrl = "img/index/11.jpg";
    UnterTitel="Schloss und Riegel, Fotoauftrag der BFSM 2010"
    }
    
    if (ZufallsZahl==9) {
    TextFarbe="#DF0000";
    GrafikUrl = "img/index/14.jpg";
    UnterTitel="Schloss und Riegel, Fotoauftrag der BFSM 2010"
    }
    
    if (ZufallsZahl==10) {
    TextFarbe="#DF0000";
    GrafikUrl = "img/index/15.jpg";
    UnterTitel="Schloss und Riegel, Fotoauftrag der BFSM 2010"
    }
    
    
    function Zufallsbild01() {
    document.write("<img src='" + GrafikUrl+ "' border='0' alt='Zufallsbild'><br>")
    document.write("<font color='" + TextFarbe +"'>" + UnterTitel + "</font><br>")
    return
    }
    
    // -->
    
    </script>
    Und wie riefe ich das im CSS auf? In HTML ging es mit
    Code:
    <script type="text/javascript" language="JavaScript">
    <!--
    Zufallsbild01();
    //-->
    </script>

  4. #4
    Contao-Fan Avatar von markocupic
    Registriert seit
    06.12.2010.
    Ort
    Oberkirch (Schweiz)
    Beiträge
    660

    Standard

    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

  5. #5
    Contao-Nutzer Avatar von gesti
    Registriert seit
    28.04.2011.
    Ort
    Meckenheim, D
    Beiträge
    98

    Standard

    Herzlichen Dank, Marco, das hat mich weiter gebracht!

  6. #6
    Contao-Fan
    Registriert seit
    26.06.2009.
    Beiträge
    266

    Standard

    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( 
    $extListstrtolower$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( 
    $extListstrtolower$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 (100100)
                or die (
    "Cannot initialize new GD image stream");
            
    $background_color imagecolorallocate ($im255255255);
            
    $text_color imagecolorallocate ($im0,0,0);
            
    imagestring ($im255,  "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!
    Geändert von minstyle (09.09.2011 um 12:14 Uhr)

  7. #7
    Contao-Fan
    Registriert seit
    17.08.2010.
    Beiträge
    274

    Standard

    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

  8. #8
    Contao-Fan
    Registriert seit
    17.08.2010.
    Beiträge
    274

    Standard

    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
    Angehängte Grafiken Angehängte Grafiken
    Angehängte Dateien Angehängte Dateien

  9. #9
    Contao-Nutzer
    Registriert seit
    14.01.2011.
    Beiträge
    25

    Standard

    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.

  10. #10
    Contao-Fan
    Registriert seit
    26.06.2009.
    Beiträge
    266

    Standard

    Zitat Zitat von svr Beitrag anzeigen
    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.

  11. #11
    Contao-Fan
    Registriert seit
    17.08.2010.
    Beiträge
    274

    Standard

    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
    Angehängte Dateien Angehängte Dateien

  12. #12
    Contao-Fan
    Registriert seit
    17.08.2010.
    Beiträge
    274

    Standard

    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

  13. #13
    Contao-Fan
    Registriert seit
    17.08.2010.
    Beiträge
    274

    Standard

    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

  14. #14
    Contao-Nutzer
    Registriert seit
    29.12.2011.
    Beiträge
    109

    Standard

    Zitat Zitat von minstyle Beitrag anzeigen
    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

  15. #15
    Contao-Nutzer
    Registriert seit
    12.07.2012.
    Beiträge
    29

    Standard 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.

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •