Du bist nicht angemeldet. Der Zugriff auf einige Boards wurde daher deaktiviert.

#1 19. Juli 2016 16:05

redigo/
Server-Pate
Ort: Zürich
Registriert: 20. Januar 2011
Beiträge: 485
Webseite

[GELÖST] {random_image_url}

Ich weiss, Sommer, Urlaub, aber vielleicht bin ich ja doch nicht der einzige, der jetzt arbeitet ;-)

Ich möchte mit dem tag {random_image_url} die Hintergrundbilder randomisieren.
Im CSS habe ich (blauäugig!) eingetragen:
background: {random_image_url folder='uploads/images/hgbilder'}

Wirkung: Leider =0.

Kann mir jemand auf die Sprünge helfen?

Offline

#2 19. Juli 2016 17:26

NaN
Moderator
Ort: Halle (Saale)
Registriert: 09. November 2010
Beiträge: 4.140

Re: [GELÖST] {random_image_url}

Also 1.: im Stylesheet keine geschweiften Klammern sondern doppelte eckige Klammern verwenden.

2. der CSS-Syntax sieht falsch aus. Ich weiß nicht was {random_image_url} genau macht, aber ich bezweifle, dass es die für CSS nötige Syntax in der Form ausgibt:

background: url("url zum Bild")

Also müsstest Du es meiner Meinung nach so schreiben:

background: url("[[random_image_url folder='uploads/images/hgbilder']]")

3. Das Sytelsheet wird gecached. Ergo siehst Du immer dasselbe Bild. Nämlich das Zufallsbild, welches beim ersten Aufruf nach dem Löschen des Caches ermittelt wurde.

Lösung: Inline-Stylesheets:

<style>
    DEIN_SELECTOR_FÜR_DAS_HTML_ELEMENT_MIT_DEM_HINTERGRUNDBILD {
        background: url("{random_image_url folder='uploads/images/hgbilder'}")
    }
</style>

Offline

#3 20. Juli 2016 09:10

redigo/
Server-Pate
Ort: Zürich
Registriert: 20. Januar 2011
Beiträge: 485
Webseite

Re: [GELÖST] {random_image_url}

Danke, NaN, vor allem für den Hinweis, dass das Stylesheet gecached wird und damit random verhindert.
Aber dein Vorschlag mit dem Inline-Style im Template

<style>
    selector {
        background: url("{random_image_url folder='uploads/images/hgbilder'}")
    }
</style>

funktioniert leider nicht.

Ich habe schwer den Verdacht, dass ich vom Tag {random_image_url} zu viel verlange, wenn er ein Bild und nicht nur die entsprechende url anzeigen soll. Die Infos zu diesem Tag sind ja auch ziemlich rudimentär.

Hast du oder vielleicht sonst jemand eine Idee, wie das Problem von randomized Hintergrundbildern gelöst werden könnte?

Offline

#4 20. Juli 2016 10:22

Klenkes
Server-Pate
Ort: 89428 Syrgenstein
Registriert: 17. Dezember 2010
Beiträge: 1.391

Re: [GELÖST] {random_image_url}

Ich mach das immer so: (Im HEAD)

{assign var='background_images' value='uploads/startseitenfoto/*.*'|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}
<style>
  #head { background-image:url({$newimage|default:'uploads/startseitenfoto/bg_header2.jpg'}); }
</style>

uploads/startseitenfoto/ und #head natürlich anpassen.

Offline

#5 20. Juli 2016 10:46

redigo/
Server-Pate
Ort: Zürich
Registriert: 20. Januar 2011
Beiträge: 485
Webseite

Re: [GELÖST] {random_image_url}

Danke, Klenkes, das funktioniert – beinahe perfekt. Ich brauche nur noch das no-repeat left top unterbringen, damit ich ein Einzelbild bekomme. Aber wo soll das hin innerhalb der vielen Klammern? Bisheriges Herumprobieren blieb leider erfolglos?

Offline

#6 20. Juli 2016 10:57

NaN
Moderator
Ort: Halle (Saale)
Registriert: 09. November 2010
Beiträge: 4.140

Re: [GELÖST] {random_image_url}

<style>
    #head { 
        background: url({$newimage|default:'uploads/startseitenfoto/bg_header2.jpg'}) left top no-repeat; 
    }
</style>

Hier nochwas zum nachlesen.

Offline

#7 20. Juli 2016 14:15

redigo/
Server-Pate
Ort: Zürich
Registriert: 20. Januar 2011
Beiträge: 485
Webseite

Re: [GELÖST] {random_image_url}

Herzlichen Dank, Klenkes und NaN, das läuft jetzt sehr gut. Einziges Problem noch: im entsprechenden Ordner werden auch thumbs abgelegt und auf der Seite dann natürlich auch gezeigt. Wie kann ich das verhindern?

Offline

#8 20. Juli 2016 15:17

NaN
Moderator
Ort: Halle (Saale)
Registriert: 09. November 2010
Beiträge: 4.140

Re: [GELÖST] {random_image_url}

Jetzt wird's zu komplex.

Entweder Du sorgst dafür, dass die Thumbs nicht im selben Verzeichnis liegen (falls möglich) oder Du brauchst ein PHP Script (ähnlich wie {random_image_url}), welches Dir die URL zum Bild ausgibt und ggfs. auch noch nach einem bestimmten Filter arbeitet, um eben a) auch wirklich nur Bilddateien und b) Thumbs nicht mit auszugeben.

Was genau hat denn mit {random_image_url} nicht funktioniert?
Wenn es sich dabei um dieses Plugin handelt, dann sollte es eigentlich genau das machen, was Du willst.

Ich hoffe, Du hattest mein Beispiel mit "selector ..." nicht einfach 1:1 übernommen.
Mit "selector" war der CSS-Selektor gemeint, mit dem das Element, welches das Hintergrundbild haben soll, ausgewählt wird.

Also z.B. "body" für das Body-Element, "#header" für das Element mit der ID "header" oder ".foo" für alle Elemente mit der Klasse "foo" usw.

Offline

#9 21. Juli 2016 10:02

redigo/
Server-Pate
Ort: Zürich
Registriert: 20. Januar 2011
Beiträge: 485
Webseite

Re: [GELÖST] {random_image_url}

Danke, NaN.
Mein Eintrag im Template:
<div id="main">
<style>
    <div#main {
        background: url("{random_image_url folder='uploads/images/hgbilder'}")
    }
</style>

Das funktioniert leider nicht, ich weiss nicht, was ich falsch mache.

Die Version von Klenkes funktioniert. Das Problem mit den Thumbs habe ich «händig» gelöst, alle thumbs im entsprechenden Ordner gelöscht. Die werden nur wieder erstellt, wenn ich ein neues Bild in den Ordner lade...
Für einen «sauberen» Ausschluss der thums fehlt mir schlicht die Fachkenntnis. Also belasse ich es bei meiner «händigen» Lösung.
Danke Klenkes und NaN und bb.
redigo/

Offline

#10 21. Juli 2016 10:23

Klenkes
Server-Pate
Ort: 89428 Syrgenstein
Registriert: 17. Dezember 2010
Beiträge: 1.391

Re: [GELÖST] {random_image_url}

Grade mal getestet.
So funktioniert es schon:

<div id="main">
<style>
div#main {
 background:url({random_image_url folder='uploads/images/hgbilder' excludeprefix=thumb}) no-repeat center center; 
}
</style>

Bei mir werden die Thumbnails rausgefiltert.

Beitrag geändert von Klenkes (21. Juli 2016 10:23)

Offline

#11 21. Juli 2016 11:11

NaN
Moderator
Ort: Halle (Saale)
Registriert: 09. November 2010
Beiträge: 4.140

Re: [GELÖST] {random_image_url}

<style>
    <div#main {
        background: url("{random_image_url folder='uploads/images/hgbilder'}")
    }
</style>

Tippfehler?
Wie sieht denn der HTML-Code am Ende im Browser aus?
Oder hast Du vielleicht mal einen Link?

(Das <style>-Dingens sollte übrigens besser in den <head>, nicht irgendwo ins Template.)

Klenkes schrieb:

excludeprefix=thumb

Ich glaub das ist eh schon der Default-Wert.

Offline

#12 21. Juli 2016 11:13

redigo/
Server-Pate
Ort: Zürich
Registriert: 20. Januar 2011
Beiträge: 485
Webseite

Re: [GELÖST] {random_image_url}

Super, Klenkes, bei mir läuft es so jetzt auch – einwandfrei. Und ich habe auch etwas gelernt ;-)
Nochmals herzlichen Dank.
redigo/

Offline

#13 21. Juli 2016 12:21

Klenkes
Server-Pate
Ort: 89428 Syrgenstein
Registriert: 17. Dezember 2010
Beiträge: 1.391

Re: [GELÖST] {random_image_url}

NaN schrieb:
Klenkes schrieb:

excludeprefix=thumb

Ich glaub das ist eh schon der Default-Wert.

Recht hast du. Kann man weg lassen.

Offline