[CSS] Random achtergrond

[Verwijderd]

Ik hoop dat er hier wel een keer goed geholpen mee kan worden.
Hopelijk staat ie goed, omdat het een combi van css en php betreft.

Ik loop tegen een probleempje aan. Ik wil een random header hebben. Ik gebruik echter een achtergrondcode in de css. Omdat ik met een gewoon php scriptje tegen het probleem aanloop dat ik de complete site opnieuw moet uitlijnen, kan ik dat dus niet in de div zelf zetten.

Ik heb op internet rondgekeken en ik kwam een oplossing tegen door in de css de achtergrond op deze manier toe te passen:

code:

 background-image: url(style.php);

Echter werkt dit niet. Ik krijg geen achtergrond te zien. Dus dit is vreemd.

In style.php staat overigens dit:

code:

    <?php 
            $nr = rand(1,9); 
            echo '<img src="../images/'.$nr.'.jpg">'; 
            ?>

Op de html pagina werkt deze code echter wel naar behoren. Alleen krijg ik hem vanuit de css dus niet aangeroepen.

Heb echter ook andere oplossingen gevonden, maar deze werkten met veel uitgebreidere codes, ik spreek over een regel of 20 aan php code voor hetzelfde effect als bovenstaande code met 2 regels bereikt.

Ik vind ook oplossingen in javascript, maar daar maak ik liever geen gebruik van.

Ik heb ook oplossingen gezien waarbij de php word ge embed in de css. Maar dit zijn echter voorbeelden waar de css in de pagina staat. Mijn css is een apart bestandje. Dus ik ben bang dat dit ook niet werkt.

Heeft iemand een idee hoe ik een random image in de css kan zetten? Het liefst met t stukje php script wat ik al heb (omdat dit stand alone gewoon goed werkt).

[MoietyMe]

Klopt het pad van je CSS-bestand naar het PHP-bestand wel?

Wat je nu doet is een html regel uitschrijven in je CSS.

Maak van die PHP dit:

PHP:

 <?php 
            $nr = rand(1,9); 
            echo '../images/'.$nr.'.jpg'; 
            ?>

[ Voor 64% gewijzigd door MoietyMe op 04-02-2012 20:22 ]

[MsG]

Moet het niet juist gewoon een pad blijven ipv ge-echo't als een daadwerkelijke afbeeldings-tag?

Want de syntaxis is normaalgesproken: background-image: url('/kaas.jpg'); en niet iets met <img />

[Verwijderd]

MsG schreef op zaterdag 04 februari 2012 @ 20:22:
Moet het niet juist gewoon een pad blijven ipv ge-echo't als een daadwerkelijke afbeeldings-tag?

Want de syntaxis is normaalgesproken: background-image: url('/kaas.jpg'); en niet iets met <img />

Aj, dat is misschien wel een hele goeie, nog niet aan gedacht door het verschil met html gerelateerde php script en css aanduiding...

ik ga de code eens in dit veranderen:

code:

 <?php 
            $nr = rand(1,9); 
            echo '../images/'.$nr.'.jpg'; 
            ?>

[Herko_ter_Horst]

Als je de URL op deze manier wilt gebruiken, dan moet style.php een image opleveren en geen HTML file of tekst.

Een andere optie is om de hele CSS file m.b.t. PHP te laten genereren.

[ Voor 4% gewijzigd door Herko_ter_Horst op 04-02-2012 20:28 ]

[MoietyMe]

@Herko, moet het per se een image zijn of mag het ook het pad naar het plaatje zijn? Leek mij dat dat ook wel zou werken.

[samo]

Nee, je geeft in de css aan wat de url van de background is, en niet wat de url van een padverwijzijng of een url van een pagina met de afbelding is. Dus dat moet echt een plaatje zijn.

[Verwijderd]

code:

 <?php 
            $nr = rand(1,9); 
            echo '../images/'.$nr.'.jpg'; 
            ?>

bovenstaande geprobeerd, heeft geen effect gehad.

In principe zou ie met dit script dus style.php moeten vervangen voor ../images/(nummer).jpg Ik heb niet het idee dat dit dus gebeurd.

[MoietyMe]

samo schreef op zaterdag 04 februari 2012 @ 20:30:
Nee, je geeft in de css aan wat de url van de background is, en niet wat de url van een padverwijzijng of een url van een pagina met de afbelding is. Dus dat moet echt een plaatje zijn.

Dat snap ik, maar dacht dat het php bestand dan de url terug zou geven.

/me heeft niet zoveel verstand van php

[Herko_ter_Horst]

Denk even na over wat een PHP script doet: het levert een bestand met inhoud op.

[Verwijderd]

Herko_ter_Horst schreef op zaterdag 04 februari 2012 @ 20:33:
Denk even na over wat een PHP script doet: het levert een bestand met inhoud op.

Het leverd in het nieuwe geval toch geen html code, maar slechts een url op van de afbeelding, althans dat is wel de bedoeling

[MoietyMe]

Zoiets als dit zou moeten werken:

PHP:

<?php
header("Content-type: image/jpg"); // header gif
header("Cache-Control: no-cache, must-revalidate"); // elke keer verversen
srand((double)microtime()*1000000); // random getal
$nr = rand(1, 12); // laatste cijfer is het aantal images dat je hebt.
$fn=fopen("$nr.jpg","r");
fpassthru($fn);
?> 

[Manuel]

@Good Fella: Waarom fopen en fpassthru gebruiken als file_get_contents al volstaat?

[Verwijderd]

Good Fella schreef op zaterdag 04 februari 2012 @ 20:36:
Zoiets als dit zou moeten werken:

PHP:

<?php
header("Content-type: image/jpg"); // header gif
header("Cache-Control: no-cache, must-revalidate"); // elke keer verversen
srand((double)microtime()*1000000); // random getal
$nr = rand(1, 12); // laatste cijfer is het aantal images dat je hebt.
$fn=fopen("$nr.jpg","r");
fpassthru($fn);
?> 

Dan moet er toch iets fout zitten in deze css code:

code:

background-image:url('style.php');

Want ook met die bovenstaande code in style.php werkt het niet.

[Herko_ter_Horst]

Verwijderd schreef op zaterdag 04 februari 2012 @ 20:34:
[...]


Het leverd in het nieuwe geval toch geen html code, maar slechts een url op van de afbeelding, althans dat is wel de bedoeling

Ik zei ook niet dat het HTML oplevert, ik zei een bestand met inhoud. Als je in een CSS file een image:url('script.php') zet, gaat de browser het bestand script.php ophalen en verwacht dan een plaatje.

Het is niet zo dat de inhoud van script.php ineens op magische wijze in een CSS bestand wordt opgenomen.

[ Voor 10% gewijzigd door Herko_ter_Horst op 04-02-2012 20:43 ]

[Verwijderd]

Herko_ter_Horst schreef op zaterdag 04 februari 2012 @ 20:42:
[...]

Ik zei ook niet dat het HTML oplevert, ik zei een bestand met inhoud. Als je in een CSS file een image:url('script.php') zet, gaat de browser het bestand script.php ophalen en verwacht dan een plaatje.

Het is niet zo dat de inhoud van script.php ineens op magische wijze in een CSS bestand wordt opgenomen.

Echter t script geeft alleen het pad. Dus dat werkt niet. is gebleken. Ik probeer mee te denken, maar mijn kennis gaat zover de dingen die ik weet, en juist waar ik niet uit kom, vraag ik via een forum.

[MoietyMe]

Manuel schreef op zaterdag 04 februari 2012 @ 20:39:
@Good Fella: Waarom fopen en fpassthru gebruiken als file_get_contents al volstaat?

Geen idee. Dit stond nog op mijn server in een mapje verstopt. Werkt dus dacht gooi dat hier neer

[Herko_ter_Horst]

Verwijderd schreef op zaterdag 04 februari 2012 @ 20:44:
[...]


Echter t script geeft alleen het pad. Dus dat werkt niet. is gebleken. Ik probeer mee te denken, maar mijn kennis gaat zover de dingen die ik weet, en juist waar ik niet uit kom, vraag ik via een forum.

Daarom zeg ik: als je nadenkt over wat PHP doet, snap je het advies dat je krijgt ook.

De opties zijn dus:

• laat style.php een plaatje opleveren (d.m.v. de code van Good Fella/Manuel)
• laat je hele CSS maken door een PHP script en zet in dat script een random image URL in de output op de plek waar nu 'style.php' staat.

Als dat niet werkt, klopt er iets niet in je paden.

Als je de laatste code van Good Fella (die met de fpassthru) in style.php zet en dan in je browser rechtstreeks naar die style.php gaat, krijg je dan een plaatje te zien?

[ Voor 56% gewijzigd door Herko_ter_Horst op 04-02-2012 20:49 ]

[Verwijderd]

Herko_ter_Horst schreef op zaterdag 04 februari 2012 @ 20:46:
[...]

Daarom zeg ik: als je nadenkt over wat PHP doet, snap je het advies dat je krijgt ook.

De opties zijn dus:

• laat style.php een plaatje opleveren (d.m.v. de code van Good Fella/Manuel)
• laat je hele CSS maken door een PHP script en zet in dat script een random image URL in de output op de plek waar nu 'style.php' staat.

Ik ga even niets over de codes zeggen. Kan zijn dat het op de andere manier wel werkt.
Echter de css laten maken door een php script? Hoe wil ik dat voor elkaar krijgen?

edit: Paden zijn gecontroleerd. Puur images/1.jpg als background image werken, net zoals de overige nummers

[ Voor 7% gewijzigd door Verwijderd op 04-02-2012 20:50 ]

[RobIII]

Sorry, maar ik zie telkens alleen maar "het werkt niet, het doet niet wat ik wil", "hoe moet dat". We zitten hier niet om handjes te houden en dit is toch wel basic en neigt behoorlijk naar een scriptrequest.

Maak een stylesheet (blaat.css) met daarin een element { background-image: url('foo.php'); }. Vervolgens maak je een foo.php die of op deze manier een image uitpoept, of een redirect doet naar '/images/.$randomnr..jpg'. Houd even rekening met caching-headers e.d. want anders zal je image wellicht niet zo random zijn als je zou willen.
Daarna test je het simpelweg door te surfen naar mijnsite.tld/foo.php. Krijg je dan géén image te zien dan doe je iets verkeerd; krijg je wél een image, controleer dan even of je niet stiekem een <img> tag hebt uitgepoept; je wil enkel de binary laten serveren, géén html.

We hebben je inmiddels vaak genoeg gewezen op je eigen inzet; neem nou in hemelsnaam eens de moeite om in ieder geval een tutorial HTML/CSS/PHP/Whatever-je-op-dat-moment-probeert-te-doen door te nemen zodat je in ieder geval de basics beheerst.

[ Voor 33% gewijzigd door RobIII op 04-02-2012 20:54 ]

[Herko_ter_Horst]

Verwijderd schreef op zaterdag 04 februari 2012 @ 20:49:
[...]

Ik ga even niets over de codes zeggen. Kan zijn dat het op de andere manier wel werkt.
Echter de css laten maken door een php script? Hoe wil ik dat voor elkaar krijgen?

Eh, CSS code in een PHP script zetten in plaats van HTML code?

edit: Paden zijn gecontroleerd. Puur images/1.jpg als background image werken, net zoals de overige nummers

Nee, dat bedoel ik niet. Wat krijg je als je http://jouwserver/style.php in je browser intikt?

[ Voor 80% gewijzigd door Herko_ter_Horst op 04-02-2012 20:52 ]

[CB32]

Ik heb het zelf zo geregeld met Javascript. Kun je em eventueel ook nog timen...

code:

function pickbg()
{
    pick = Math.floor(Math.random()*5)+1;
    document.getElementById('bgimage').src = "/weblog3/backgrounds/" + pick + ".jpg";
}

en dan een div elementje

code:

<div id="bg">
    <img id="bgimage" src="backgrounds/5.jpg" />
</div>

met alvast een plaatje voor de zekerheid.
Voorbeeld op http://christianberkman.nl/weblog3
(werkt alleen in chrome, was probeerseltje)

[ Voor 10% gewijzigd door CB32 op 04-02-2012 20:53 ]

[Manuel]

Het makkelijkste is het oplossen zoals RobIII het zegt, dan krijg je dus een script zoals dit:

PHP:

<?php
header('Cache-Control: no-cache, must-revalidate');
echo '/images/random_backgrounds/' . mt_rand(1, 9) . '.jpg';

Het enige waar jij dan nog zeker van moet zijn is dat het pad klopt en dat er ook echt plaatjes instaan.

[RobIII]

Manuel schreef op zaterdag 04 februari 2012 @ 20:53:
Het makkelijkste is het oplossen zoals RobIII het zegt, dan krijg je dus een script zoals dit:

PHP:

<?php
header('Cache-Control: no-cache, must-revalidate');
echo '/images/random_backgrounds/' . mt_rand(1, 9) . '.jpg';

Helemaal niet; en dat is ook helemaal niet wat ik zeg. Wat denk je dat dit gaat doen? Als je dit doet krijg je gewoon de string output:

Text output:

/images/random_backgrounds/6.jpg

Wat je wil is de daadwerkelijke image serveren: dat doe je of met een fpassthru/file_get_contents/whathaveyou of met een redirect en je laat 't serveren van de image over aan je webserver.

[ Voor 7% gewijzigd door RobIII op 04-02-2012 20:57 ]

[Verwijderd]

Herko_ter_Horst schreef op zaterdag 04 februari 2012 @ 20:50:
[...]

Eh, CSS code in een PHP script zetten in plaats van HTML code?


[...]

Nee, dat bedoel ik niet. Wat krijg je als je http://jouwserver/style.php in je browser intikt?

images/(getal).jpg in tekst. bij refresh uiteraard een ander getal. Een string dus.

Echter als ik de code van good fella gebruik, krijg ik dit:

code:

Warning: fopen(5.jpg) [function.fopen]: failed to open stream: No such file or directory in E:\wamp\www\Pobreshphp\style2.php on line 6

Warning: fpassthru() expects parameter 1 to be resource, boolean given in E:\wamp\www\Pobreshphp\style2.php on line 7

Dus ik begrijp waarom deze ook niet werkt, want er komt geen plaatje uit. Echter zie ik ook dat hij de imagesmap gewoon overslaat.

gebruikte code is dus deze, voor de duidelijkheid:

code:

<?php 
header("Content-type: images/jpg"); // header gif 
header("Cache-Control: no-cache, must-revalidate"); // elke keer verversen 
srand((double)microtime()*1000000); // random getal 
$nr = rand(1, 12); // laatste cijfer is het aantal images dat je hebt. 
$fn=fopen("$nr.jpg","r"); 
fpassthru($fn); 
?>

[thegve]

Wat ook een optie is, is om de CSS file te laten generen door een PHP script. Dan verwijs je in je HTML code (link tag) naar het PHP script.

PHP:

<?php
header('content-type: text/css');
$bgnum = rand(1,9);
echo sprintf('background-image: %s.jpg', $bgnum);

Nadeel is dat een verwijzing naar een echt CSS bestand meestal sneller geladen kan worden ( en in-memory gecached ) door je webserver en het filesystem van de server.
In dat geval kan je dit dus, mij inziens, beter optimaliseren naar een <style> tag binnen je HTML code, ik ga er vanuit dat deze toch al door PHP word gegenereerd.

[CB32]

In dat geval kan je dit dus, mij inziens, beter optimaliseren naar een <style> tag binnen je HTML code, ik ga er vanuit dat deze toch al door PHP word gegenereerd.

Dat is eigenlijk wel een handige oplossing, niet aan gedacht. Mocht ik zelf weer eens verder gaan met mijn weblog kan dat natuurlijk ook...

[RobIII]

Verwijderd schreef op zaterdag 04 februari 2012 @ 21:02:
Echter als ik de code van good fella gebruik, krijg ik dit:

code:

Warning: fopen(5.jpg) [function.fopen]: failed to open stream: No such file or directory in E:\wamp\www\Pobreshphp\style2.php on line 6

Warning: fpassthru() expects parameter 1 to be resource, boolean given in E:\wamp\www\Pobreshphp\style2.php on line 7

Dus ik begrijp waarom deze ook niet werkt, want er komt geen plaatje uit. Echter zie ik ook dat hij de imagesmap gewoon overslaat.

Come on. Kijk nou eens anderhalve minuut naar de foutmelding en de bijbehorende code. Denk nou eens even 2 minuten na voor je post.

Verwijderd schreef op zaterdag 04 februari 2012 @ 21:02:

code:

<?php 
$fn=fopen("$nr.jpg","r"); 
?>

Mis je daar niet toevallig (een stuk van) een pad

Ik zet dit topic dicht zodat je zelf eens wat meer moeite gaat doen; hier kun je prima zelf uit komen. Lees desnoods de post hieronder nog even (die was nog IBTL )

[ Voor 7% gewijzigd door RobIII op 04-02-2012 21:07 ]

[Herko_ter_Horst]

Verwijderd schreef op zaterdag 04 februari 2012 @ 21:02:
[...]


images/(getal).jpg in tekst. bij refresh uiteraard een ander getal. Een string dus.

Echter als ik de code van good fella gebruik, krijg ik dit:

code:

Warning: fopen(5.jpg) [function.fopen]: failed to open stream: No such file or directory in E:\wamp\www\Pobreshphp\style2.php on line 6

Warning: fpassthru() expects parameter 1 to be resource, boolean given in E:\wamp\www\Pobreshphp\style2.php on line 7

Dus ik begrijp waarom deze ook niet werkt, want er komt geen plaatje uit. Echter zie ik ook dat hij de imagesmap gewoon overslaat.

gebruikte code is dus deze, voor de duidelijkheid:

code:

<?php 
header("Content-type: images/jpg"); // header gif 
header("Cache-Control: no-cache, must-revalidate"); // elke keer verversen 
srand((double)microtime()*1000000); // random getal 
$nr = rand(1, 12); // laatste cijfer is het aantal images dat je hebt. 
$fn=fopen("$nr.jpg","r"); 
fpassthru($fn); 
?>

Denk je wel even na als je een stukje code overneemt? Kijk je dan even in de documentatie van fopen?

Als jouw plaatjes NIET in dezelfde folder als het script staan, moet je de juiste folder in het script zetten. Als jouw images in E:\wamp\www\Pobreshphp\images staan, moet je fopen("images/$nr.jpg", "r") in je script zetten.