Wechselndes Hintergrundbild

chrissy-dizzy · 01. Juli 2013 14:57

Welche Möglichkeit gibt es, dem body bei jedem Aufruf ein anderes Hintergrundbild zuzuordnen (aus einem Pool von 5 Bildern)?

Danke für eure Tipps!

Klenkes · 01. Juli 2013 19:31

Zum Beispiel so:

Hier klicken, um den Code zum Kopieren zu markieren

{assign var='background_images' value='uploads/images/random/*.*'|glob}
{capture assign='equation'}rand(0,{$background_images|@count}-1){/capture}
{math equation=$equation assign='randomimage'}
{if !empty($background_images)}
{assign var="newimage" value=$background_images.$randomimage}
{/if}

<body style="background-image:url({$newimage|default:'uploads/images/random/fallback.jpg'});">

Wobei du natürlich deinen Pfad zu den Bildern anpassen musst.
value='uploads/images/random/
und dein: fallback.jpg als Fallback eben.

chrissy-dizzy · 02. Juli 2013 17:57

Danke - ich werde es probieren und mich melden!

noober · 08. Oktober 2013 21:53

genau so etwas suche ich gerade ... wo und wie schreibe ich das hin.

Das Hintergrundbild wird bei mir als seperates div am Ende eingebunden:

.........

</body>
</html>

Klenkes · 09. Oktober 2013 09:56

In deinem Fall so:

Hier klicken, um den Code zum Kopieren zu markieren

{assign var='background_images' value='uploads/images/random/*.*'|glob}
{capture assign='equation'}rand(0,{$background_images|@count}-1){/capture}
{math equation=$equation assign='randomimage'}
{if !empty($background_images)}
{assign var="newimage" value=$background_images.$randomimage}
{/if}

<div id="bg">
  <img src="{$newimage|default:'uploads/images/random/fallback.jpg'}" alt="">
</div>

Pfade anpassen. Fertig.

noober · 09. Oktober 2013 10:14

so, ich habs eingebaut - allerdings erscheint nur das fallback.img:

...
{cms_stylesheet}

{assign var='background_images' value='/uploads/images/random/*.*'|glob}
{capture assign='equation'}rand(0,{$background_images|@count}-1){/capture}
{math equation=$equation assign='randomimage'}
{if !empty($background_images)}
{assign var="newimage" value=$background_images.$randomimage}
{/if}

</head>

....
<div id="bg">
<img src="{$newimage|default:'uploads/images/random/fallback.jpg'}" alt="">
</div>

Klenkes · 09. Oktober 2013 10:17

Nein. In den HEAD kannst du es nicht einbauen, da der BODY vor dem Head verarbeitet wird, ist das Bild noch nicht bekannt.
Setze es dorthin, wo du die Ausgabe haben willst. In einem Template z.B.

noober · 09. Oktober 2013 10:29

jetzt habe ich es am Anfang vom body - geht nicht, was mache ich falsch

<body>
{assign var='background_images' value='/uploads/images/random/*.*'|glob}
{capture assign='equation'}rand(0,{$background_images|@count}-1){/capture}
{math equation=$equation assign='randomimage'}
{if !empty($background_images)}
{assign var="newimage" value=$background_images.$randomimage}
{/if}

Klenkes · 09. Oktober 2013 10:38

Hab es grade mal unter CMSMS 1.11.7 getestet.
An's Ende der Template gesetzt - funktioniert einwandfrei.

Kopfkratz...

noober · 09. Oktober 2013 10:51

habs auch mal vor body-Ende eingefügt, geht nicht ... ich poste mal den Link - Seite ist im Rohbau smile

Beitrag geändert von noober (09. Oktober 2013 19:30)

NaN · 09. Oktober 2013 11:52

Sind die Bilder auch im Verzeichnis "/uploads/images/random/" ?
Ist die Funktion glob() bei Dir aktiviert? (ist eine PHP-Funktion, die je nach Hoster auch deaktiviert sein kann. Stichwort phpinfo(); )

Lass Dir mal anzeigen, was für Bilder gefunden werden:

Hier klicken, um den Code zum Kopieren zu markieren

{assign var='background_images' value='/uploads/images/random/*.*'|glob}
{$background_images|print_r}

Und zu guter Letzt: {$background_images} ist ein numerisches Array. D.h. diese Zeile:

Hier klicken, um den Code zum Kopieren zu markieren

{assign var="newimage" value=$background_images.$randomimage}

Müsste eigentlich so lauten:

Hier klicken, um den Code zum Kopieren zu markieren

{assign var="newimage" value=$background_images[$randomimage]}

Und das mit dem Random müsste auch einfacher gehen:

Hier klicken, um den Code zum Kopieren zu markieren

{$background_images="uploads/images/random/*.*"|glob}
{append var='background_images' value='uploads/images/random/fallback.jpg'}
{$random_index=$background_images|@array_rand}

<body style="background-image:url({$background_images[$random_index]});">

noober · 09. Oktober 2013 13:15

Die Bilder sind im richtigen Ordner.

System Info zeigt:
PHP „register_globals“ (register_globals) Erfolgreich abgeschlossen Aus (Nein)

Sind das die benötigten globals, wenn ja und sie nicht aktiviert sind, wie kann ich sie aktivieren?

Funktionieren tut das Ganze noch nicht.

nockenfell · 09. Oktober 2013 13:42

glob != register_globals

glob ist eine PHP Funktion:
http://php.net/manual/de/function.glob.php

Klenkes · 09. Oktober 2013 13:52

phpinfo() würde ganz oben im ersten Block in etwa so etwas zeigen:
Registered PHP Streams php, file, glob, data, http, ftp, zip, compress.zlib, phar ...

Klenkes · 09. Oktober 2013 13:57

Falls du nicht weißt wie man da ran kommt.
Erstelle dir im z.B. Root deiner Installation eine Datei mit dem Inhalt:

Hier klicken, um den Code zum Kopieren zu markieren

<?php
  echo phpinfo();
?>

Und rufe dann die Datei im Browser auf.

Wenn du sie nicht mehr brauscht, die Datei wieder löschen.

noober · 09. Oktober 2013 14:13

ah, wieder was gelernt mit der php info ... danke

Registered PHP Streams zeigt u.a. glob

czarnowski · 09. Oktober 2013 15:27

Man sollte alle Fileaktionen vermeiden wenn möglich. Glob grast immer das ganze angegebene Verzeichnis ab pro Besucher und das für jede Seite wo es eingesetzt wird.
Eine Vielzahl von Aktionen senkt also die Performance weil die Serverlast höher wird.
Auch die pro Eintrag enthaltene Pfad ist überflüssig - den definiert man einfach einmal beim Einsatz.
Hat man nur 5 Images oder ein paar mehr definiert man diese schlicht und ergreifend und verwendet diese.

Beispiel:

Hier klicken, um den Code zum Kopieren zu markieren

[== Smarty ==]
{assign var="randompicture" value=array('bild1.jpg','bild2.jpg','bild3.jpg','bild4.jpg','bild5.jpg')}
<body style="background-image:url(uploads/images/random/{$randompicture[array_rand($randompicture)]});">

noober · 09. Oktober 2013 16:46

auch das geht nicht, wobei der Fehler beim Einbau liegen kann, es wird gar kein Bild angezeigt:

<body>
.....
{assign var="randompicture" value=array('bg-01.jpg','bg-02.jpg','bg-03.jpg','bg-04.jpg')}
<div id="bg">
<img src="url(uploads/images/random/{$randompicture[array_rand($randompicture)]});">
</div>
....

czarnowski · 09. Oktober 2013 17:51

Getestet mit 1.11.9 und läuft.
Allerdings ist

Müll - was soll das denn sein

es ist kein style und es ist keine imagelink

noober · 09. Oktober 2013 18:19

sorry, aber wie muss das denn richtig sein? .... wie oben erwähnt ich bin Grafiker und KEIN Programmierer smile

czarnowski · 09. Oktober 2013 18:39

Ok

http://www.w3schools.com/html/html_images.asp

da steht grundsätzliches drin.

Aber so wird das Image angezeigt und ist kein Hintergrund.

</div>

Näheres unter http://www.w3schools.com/css/css_background.asp

mike-r · 09. Oktober 2013 19:22

czarnowski schrieb:

<img src="url(uploads/images/random/{$randompicture[array_rand($randompicture)]});">
Müll - was soll das denn sein

Du könntest Dir mal den Link anschauen bevor Du hier so einen "Müll" verzapfst.

Beitrag geändert von mike-r (09. Oktober 2013 19:22)

noober · 09. Oktober 2013 19:29

so, hab jetzt nochmal Klenkes Version versucht, diese funktioniert jetzt.

@czarnowski: die Einbindung des Hintergrundbildes wollte ich schon ganz gerne als img machen wie es schon angelegt war, die Methode scheint mir in den meisten Browsern zu funktionieren.

http://css-tricks.com/perfect-full-page … und-image/
CSS-Only Technique #2

Vielen Dank nochmal für Eure Hilfe.

czarnowski · 10. Oktober 2013 10:36

Ok dann ist eines CSS Steuerung.
Dein Problem - hast immer noch nicht wirklich Ahnung wie man einen Imagelink setzt obwohl es hier im Thread Beispiele gibt.
Hier die Kurzform

Hier klicken, um den Code zum Kopieren zu markieren

[== Smarty ==]
{$randompicture=array('bild1.jpg','bild2.jpg','bild3.jpg','bild4.jpg','bild5.jpg')}
<body>
<div id="bg">
  <img src="uploads/images/random/{$randompicture[array_rand($randompicture)]}" alt="">
</div>

Getestet mit NCleanBlue unter aktueller Version und Zugabe der CSS von css-tricks

Nochmals

Glob hier nicht anzuraten - bereits erläutert.
Klenkes Code total umständlich und wegen capture nicht anzuraten.
Man macht für keine simple Zuweisung kein Capture. Der bedingt unter Smarty immer die Anlage eines Buffers, der zudem mit eval gefüllt wird und das kostet richtig Zeit.
Das Problem dabei - bei einem Einzelaufruf wird man diese Zeit nicht bemerken. Bei Benchmarks ist das aber deutlich zu ermitteln.

Und generell ist diese Art der Hintergrundbildeinbindung immer gefährlich.
Die Anleitung von css-tricks ist lediglich rudimentär.
Man füllt via css auch eine HD Schirm mit einem 100x100 Pixel Bild das sieht dementsprechend aus.
Auf der anderen Seite versaut einem ein großes Bild bei kleinen Empfangsmonitoren den Pagespeed.
Das kann also zum Besucherkiller werden.

Lediglich die Jquery Version geht darauf ein.

noober · 10. Oktober 2013 10:49

danke für das Update, ich werde es heute Nachmittag diese Methode nochmal versuchen.

Die Darstellung des Hintergrundbildes wie in CSS Tricks beschrieben sieht auf allen Bildschirmen mit denen ich teste bei einem Anlageformat von 1024x683 auch auf großen Monitoren mit hoher Auflösung (zB 1920x1080 bis hin zum Tablet) gut aus. Wenn ich von Programmierung nichts verstehe von Bildern verstehe ich was smile

Da es bei dieser Seite um eine Kneipe geht, also Atmosphäre und so spielt der Page Speed nicht die entscheidende Rolle, für die Seite gibt es ein mobile Version mit eigenen Templates und Stylesheets natürlich ohne die großen Bilder.

Forum für CMS/made simple

#1 01. Juli 2013 14:57

Wechselndes Hintergrundbild

#2 01. Juli 2013 19:31

Re: Wechselndes Hintergrundbild

#3 02. Juli 2013 17:57

Re: Wechselndes Hintergrundbild

#4 08. Oktober 2013 21:53

Re: Wechselndes Hintergrundbild

#5 09. Oktober 2013 09:56

Re: Wechselndes Hintergrundbild

#6 09. Oktober 2013 10:14

Re: Wechselndes Hintergrundbild

#7 09. Oktober 2013 10:17

Re: Wechselndes Hintergrundbild

#8 09. Oktober 2013 10:29

Re: Wechselndes Hintergrundbild

#9 09. Oktober 2013 10:38

Re: Wechselndes Hintergrundbild

#10 09. Oktober 2013 10:51

Re: Wechselndes Hintergrundbild

#11 09. Oktober 2013 11:52

Re: Wechselndes Hintergrundbild

#12 09. Oktober 2013 13:15

Re: Wechselndes Hintergrundbild

#13 09. Oktober 2013 13:42

Re: Wechselndes Hintergrundbild

#14 09. Oktober 2013 13:52

Re: Wechselndes Hintergrundbild

#15 09. Oktober 2013 13:57

Re: Wechselndes Hintergrundbild

#16 09. Oktober 2013 14:13

Re: Wechselndes Hintergrundbild

#17 09. Oktober 2013 15:27

Re: Wechselndes Hintergrundbild

#18 09. Oktober 2013 16:46

Re: Wechselndes Hintergrundbild

#19 09. Oktober 2013 17:51

Re: Wechselndes Hintergrundbild

#20 09. Oktober 2013 18:19

Re: Wechselndes Hintergrundbild

#21 09. Oktober 2013 18:39

Re: Wechselndes Hintergrundbild

#22 09. Oktober 2013 19:22

Re: Wechselndes Hintergrundbild

#23 09. Oktober 2013 19:29

Re: Wechselndes Hintergrundbild

#24 10. Oktober 2013 10:36

Re: Wechselndes Hintergrundbild

#25 10. Oktober 2013 10:49

Re: Wechselndes Hintergrundbild

Fußzeile des Forums