Website Background automatisch Ändern

tx_g · 19. Mai 2017

Hallo,
ich hatte gerade vor meine Website etwas um zugestallten.

Ich hatte vor ein GIF als Background zu benutzen, welches (evtl per PhP) zu bestimmten Uhrzeiten gewechselt wird (Morgens Gif1, Mittags Gif2, Abends Gif3 und nachts Gif4).

Allerdings habe ich das Problem, dass ich nicht wirklich Ahnung habe wie man das sinnvoll umsetzen kann, weil via Cron die Dateien auszutauschen ist jetzt auch nicht gerade so wie es gehen sollte.
Könntet ihr mir da bitte weiterhelfen?

funkmasterflow · 19. Mai 2017

Hallo,
guck' Dir dazu mal die date-Funktionen in PHP an. http://php.net/manual/de/function.date.php
Du musst dann gucken, ob der aktuelle Timestamp (in Stunden und Minuten) größer oder kleiner ist, als einer der Zeiträume für deine 4 Bilder.
Davon abhängig, schreibst Du den Pfad zu deinem Bild in eine Varaible.
Nun gibst Du das HTML-Element per "echo" aus und setzt den Inline-Style "background-image".

PHP:

echo '<div style="background-image:url('.$imagePath.');"></div>';

tx_g · 19. Mai 2017

Ok, also wenn ich das so richtig sehe müsste es mit der Zeit so gehen:

Code:

<?php
 
$imagePath[0] = "/img/morgens.png";
$imagePath[1] = "/img/mittags.png";
$imagePath[2] = "/img/abends.png";
$imagePath[3] = "/img/nachts.png";
 
$date = date("h");
 
if($date > 6 AND $date <= 11 ) {
    $index=0;
} elseif($date > 11 AND $date <= 18 ) {
    $index=1;
} elseif($date > 18 AND $date <= 21 ) {
    $index=2;
} else {
    $index=3;
}
 echo '<div style="background-image:url('.$imagePath[$index].');">'
?>

So ganz funktioniert es leider nicht. Die Variable .$imagePath[$index]. beinhaltet leider nicht den link den es haben sollte (es wird Morgens ausgegeben.)

Ergänzung (19. Mai 2017)

Ah Problem gelöst.

Code:

$date = date("h");

gibt die Zeit nur im 12h Format aus. Ist es dann

Code:

$date = date("H");

dann geht alles so wie es sollte

Danke für die Hilfe

funkmasterflow · 19. Mai 2017

Na du lässt Dir auch die Zeit im 12h-Format überprüfen. Lies' mal in der Doku nach, wie du auf 24h prüfst

//Edit:
Da war ich zu langsam

Prima, dass Du es selbst lösen konntest.
Gern geschehen.

coolmodi · 19. Mai 2017

Ich würde von Gifs abraten!

1. Falls es sich um ein "Video" handelt, welches den ganzen Bildschirm ausfüllen soll, werden die extrem groß.
2. Falls es ein Bilderdurchlauf/"Diashow" werden soll, dann ist die Qualität einfach richtig schlecht (256 Farben max.)

Im 2. Fall würde ich zu 100% auf JS setzten, und damit die Bilder als Jpeg durchlaufen lassen. Im 1. Fall würde ich eher einen HTML5 webm background machen, das sieht nicht nur besser aus, es ist auch kleiner.

Edit: Webm ist zugegeben etwas komplexer, aber so eine Diashow sind ein paar wenige Zeilen code.

tx_g · 19. Mai 2017

coolmodi schrieb:
Im 1. Fall würde ich eher einen HTML5 webm background machen, das sieht nicht nur besser aus, es ist auch kleiner.

Edit: Webm ist zugegeben etwas komplexer, aber so eine Diashow sind ein paar wenige Zeilen code.

Klingt auch gut, ist halt nur die Frage wie ich damit die "Animation" mit 250 Einzelbildern bei 25/30fps hinbekomme und wie man das dann mit dem Wechseln der Animation zur Zeit xy anpassen müsste.

Ich kuck gleich mal mich dazu etwas im Internet um ob ich mir dort etwas zu nutzen machen kann, evtl kannst du mir es aber auch verraten

coolmodi · 19. Mai 2017

Na gut, bei 250 Bildern kannst du das mit JS und Jpegs vergessen, das wird auch zu viel.
Aber als Gif hast du da ja selbst mit 720p und eingeschränkter Farbtabelle schnell an die 50MB, wärend ein 720p video locker <10MB haben kann. Je nachdem wie das bei dir aussieht würde ich darüber nachdenken. Hat halt auch Nachteile, z.B. auf mobile würde ich es nicht anzeigen, bzw. geht es da nicht.

Was ist das denn für eine Animation?

Edit: Die Seite hat z.B. ein Video als Hintergrund im oberen Bereich https://www.warmane.com/ (mir ist gerade keine andere eingefallen

)

Edit: Hier sogar als demo mit code https://codepen.io/dudleystorey/pen/knqyK

Das Illidan video hat z.B. 4,5MB, als Gif wären das 50-100MB

tx_g · 19. Mai 2017

coolmodi schrieb:
Was ist das denn für eine Animation?

Es sind Animationen die zu den Tageszeiten passen (unterschiedlich farbiger Himmel). Also nix repräsentatives, einfach nur um da ein schönes Design hin zu bekommen.

Das mit dem Video klingt gut, müsste ich nur kucken wie ich das einfüge. Würde ich dann nicht von meinem Webserver aus laden lassen sondern irgendwo anders z.Bsp yt mit loop und Autoplay.

kling1 · 20. Mai 2017

würde für sowas nicht php missbrauchen..
hier ein javascript beispiel eben zusammengebaut
https://jsfiddle.net/qshdtouv/2/

tx_g · 20. Mai 2017

Ja das sieht auch gut aus, danke sehr. Ich bleibe allerdings erstmal bei php und benutze bis auf weiteres Bilder statt Animationen.
Habe den Code nochmal etwas verändert:

Code:

<?php
 
$imagePath[0] = "/img/morgens.JPG";
$imagePath[1] = "/img/mittags.JPG";
$imagePath[2] = "/img/abends.png";
$imagePath[3] = "/img/nachts.png";
 
$date = date("H");
 
if($date > 6 AND $date <= 11 ) {
    $index=0;
} elseif($date > 11 AND $date <= 18 ) {
    $index=1;
} elseif($date > 18 AND $date <= 21 ) {
    $index=2;
} else {
    $index=3;
}
 echo '<body background="'.$imagePath[$index].'">'
?>

Damit setzt er das Bild als Body-Tag und nicht als div.

kling1 · 20. Mai 2017

das kann man aber auch etwas eleganter ohne das ganze if else geraffel lösen

PHP:

<?php

$images = [
  ['begin' => 6, 'end' => 11, 'img' => '/img/morgens.JPG'],
  ['begin' => 11, 'end' => 18, 'img' => '/img/mittags.JPG'],
  ['begin' => 18, 'end' => 21, 'img' => '/img/abends.png'],
  ['begin' => 21, 'end' => 30, 'img' => '/img/nachts.png']
];

$hour = (int)date('H');
$hour = $hour <= 6 ? $hour + 24 : $hour;

$image = array_pop(array_filter($images, function ($img) use ($hour) {
  return $hour > $img['begin'] && $hour <= $img['end'];
}))['img'];

?>

<body background="<?= $image ?>">

coolmodi · 20. Mai 2017

kling1 schrieb:
das kann man aber auch etwas eleganter ohne das ganze if else geraffel lösen

Ich weiß nicht was ich bei sowas immer denken soll.

1. Das ist wenn einfach (unnötig) komplexer und minimal kürzer.
2. Ist es bestimmt nur noch halb so effizient, wenn überhaupt. Macht zwar (hier) nichts aus, aber besserer code ist es damit sicher nicht. Ganz im Gegenteil.

Edit: Das wäre z.B. eine (kleine) Verbesserung:

PHP:

    if($date > 21 || $date <= 6 ) {
        $index=3;
    } elseif($date > 18 ) {
        $index=2;
    } elseif($date > 11 ) {
        $index=1;
    } else {
        $index=0;
    }

kling1 · 20. Mai 2017

es fühlt sich schon falsch an ein else zu machen.. ein elseif ist meistens eh vollkommen unnötig..
einfach etwas clean code lesen.. wenn ich sowas als pull request bekäme und reviewen müsste.. dann würde ich es nicht akzeptieren.. es ist einfach unsauber

coolmodi · 20. Mai 2017

Es fühlt sich falsch an else zu nutzen? Was? Ein einfaches if-else durch völlig unnötige, schwerer zu lesende und langsamer laufende arrayops zu ersetzen würde ich als nicht clean bezeichnen.
Das sehe ja selbst ich als amateur, denn es hat nur Nachteile, außer dass man sich toll fühlen kann weil es komplizierter ist.

kling1 · 21. Mai 2017

es ist nicht komplizierter.. verzweigungen sind kompliziert.. es ist nicht unnötig.. die ganzen elseifs etc sind unnötig

auch bei deinem beispiel hättest du zuminenst das else sparen können

PHP:

$index = 0;
if ($date > 21 || $date <= 6) {
    $index = 3;
} elseif ($date > 18) {
    $index = 2;
} elseif ($date > 11) {
    $index = 1;
}

coolmodi · 21. Mai 2017

kling1 schrieb:
es ist nicht komplizierter.. verzweigungen sind kompliziert.. es ist nicht unnötig.. die ganzen elseifs etc sind unnötig

Verzweigungen und kompliziert(er)? Entschuldigung, aber das ist einfach absoluter Schwachsinn. Deine array operationen sind weitaus komplizierter! Komplizierter zu lesen, und vor allem auch was den Rechenaufwand angeht. Bin zu faul es zu testen, aber ich schätze mal 2-3x so lange wird das wohl dauern. Das hat hier natürlich keine Auswirkung, aber es ist ganz einfach nicht besser.

Das ist doch echt nur noch Codeesoterik von dir, ganz ehrlich.

Performance > Lesbarkeit > Persönliche Vorlieben

kling1 schrieb:
auch bei deinem beispiel hättest du zuminenst das else sparen können

PHP:

$index = 0; if ($date > 21 || $date <= 6 ) { $index = 3; } elseif ($date > 18 ) { $index = 2; } elseif ($date > 11 ) { $index = 1; }

Sich das else zu sparen ändert hier aber auch nicht wirklich was. Du ersetzt einfach ein mögliches else+assignment mit einem garantierten assignment. Besser lesbar wäre es für mich jetzt auch nicht. Wirklich keine Ahnung warum du so einen irrationalen Hass gegen else und elseif hast

Edit: Ich bins jetzt (1000000) mal durch, date() mit statischer 19 ersetzt um möglichst nur den Rest zu haben:

original: 0.216s
meins: 0.170s
array kling: 1.364s
meins kling: 0.188s

Mit ner 7 wäre dann das original minimal vorne. Aber soviel zu if-else ist komplizierter.

kling1 · 21. Mai 2017

coolmodi schrieb:
Performance > Lesbarkeit > Persönliche Vorlieben

best practice > bad practice

es geht doch nicht um die performance.. die ist da sowieso zu vernachlässigen.. sondern um die wartbarkeit des codes..

wenn du das ganze nun erweitern oder anpassen willst musst du erstmal dass array anpassen.. dann den ganzen if else quatsch checken und eventuell da noch mehr zeug rein machen.. bis man überhaupt keine überblick hat..

bei meinem beispiel wären nur die werte im array anzupassen.. außerdem sind es 3 zeilen gegen 9 zeilen...

und das es für dich vll etwas komplizierter aussieht.. ist einfach eine sache der gewöhnung..

The Ripper · 21. Mai 2017

Ich wär ja für ne "navigableMap"

-> einfach wartbar und performanter als Arrays

Suche

Website Background automatisch Ändern

tx_g

Gast

funkmasterflow

Ensign

tx_g

Gast

funkmasterflow

Ensign

coolmodi

Lt. Commander

tx_g

Gast

coolmodi

Lt. Commander

tx_g

Gast

kling1

Gast

tx_g

Gast

kling1

Gast

coolmodi

Lt. Commander

kling1

Gast

coolmodi

Lt. Commander

kling1

Gast

coolmodi

Lt. Commander

kling1

Gast

The Ripper

Lt. Commander

Ähnliche Themen