[JS/PHP] Random image script, meerdere weergave's

[Ronnyrr]

Hallo allemaal,

Zelf ben ik nu al een jaar bezig met webdesign en heb ik alles vanuit mezelf geleerd en liep eigenlijk zo goed als nooit tegen problemen aan. En al helemaal niet tegen een probleem waar ook niet me mee kon, of wil helpen. Dus denk ik misschien heb ik hier meer geluk.

Ik heb een website draaien op de Wordpress CMS. Werkt allemaal prima. Maar nu moet er iets meer gebeuren waar ik nog niet veel verstand van heb.

Er draait op de site een javascript waardoor er een random image word weergegeven in een bepaalde div. Is ook de bedoeling werkt verder prima. Maar op élke pagina worden dezelfde afbeeldingen random weergegeven. Maar nu wil ik iets verder gaan hiermee.

Dit is het javascript:

code:

imgs = new Array("http://www.sitedeals.nl/images/head/vogel.jpg", "http://www.sitedeals.nl/images/head/vogels.jpg",  "http://www.sitedeals.nl/images/head/blaarkop.jpg", "http://www.sitedeals.nl/images/head/blaarkoppen.jpg", "http://www.sitedeals.nl/images/head/bloem.jpg");
 
function random_img()
{
    document.getElementById('head').style.backgroundImage="url('"+imgs[Math.floor(Math.random()*imgs.length)]+"')";
}

En hier is de website te vinden.
http://tiny.cc/k8kqe

De bedoeling is dat bij de pagina van projecten andere afbeeldingen random weergegeven worden als op de 'normale' website. Normaal zou ik dit wel weten op te lossen door op elke pagina gewoon andere foto's in de head in te laden. Maar nu maak ik dus gebruik van Wordpress waardoor dat niet zo makkelijk gaat, of ik denk natuurlijk te moeilijk.

Want mijn gedachten gaan uit naar dat er iets in de function.php mee gedaan moet worden oid? Alleen is dat eigenlijk het enige document in wordpress waar ik nog geen ervaring mee heb. Heb al wat gegoogled op uitleg over de function.php maar daar kwam ik ook niet veel verder mee. Misschien iemand een goed linkje of een betere oplossing?

Heb het ook al aan andere mensen gevraagd en toen vertelde ze me dat je de document locatie kan moet opvragen en zo foto's in kan laden. Op deze manier;

code:

href = document.location.href;

Echter heb ik daar nog niet veel kaas van gegeten en loop ik nu een beetje vast. Iemand die mij hiermee misschien verder kan helpen?

Bedankt,
Ronny

[DiSiLLUSiON]

Ik denk dat je iets te ingewikkeld wilt. Je zal dan in plaats van wat je nu hebt, in php (bijvoorbeeld page.php of single.php) voor elke paginaID een array aan moeten maken met afbeeldingen, waar je er vervolgens een random van uitkiest.

Makkelijker is om voor elke pagina één of géén afbeelding in te stellen via het post-meta veld in de Wordpress admin en deze dan in PHP uitlezen.

[Ronnyrr]

Bedankt voor je reactie.
Ik heb nu al het huidige wat ik nu heb in de header.php gezet en niet in de single.php of page.php.

Maar wat jij dus bedoeld is dat ik het script weg moet halen.
In elke pagina geen of één afbeelding moet inladen via de post-meta veld in Wordpress. En dan uitlezen op een manier met php?

Heb er zelf naar gekeken. Maar kan ik de Wordpress admin niks vinden over Meta tags. Ik maak wel gebruik van de All-in one SEO plugin. Als ik tussen alle scripts en pagina's zoek in de wordpress map op de server vind ik ook niks over post-meta tags. Ik vind alleen de meta.php maar daar kan ik persoonlijk niet veel in vinden wat ik hiermee zou kunnen gebruiken.

Dit is dan denk ik iets waar ik nog niet achter ben met Wordpress ondanks dat ik het al een poosje gebruik?

[DiSiLLUSiON]

Onder de editor op de post pagina staat een blok 'Custom fields' (geen idee hoe dat in de Nederlandse vertaling heet) met een linkje hoe je deze waardes dan in je header.php kunt gebruiken. Daar kun je een of meerdere afbeeldingen opgeven als metadata en inlezen in je header.php. Vervolgens zou je eventueel via dat javascriptje van je er random een uit kunnen kiezen, maar je kunt het javascriptje dan ook weglaten; zoiets kan namelijk ook via php. Er staat vast wel iets bij de documentatie erover.

Bijvoorbeeld:

PHP:

$afbeeldingen = array('1.jpg', '2.jpg', '3.jpg');
$afbeelding = array_rand(array_flip($afbeeldingen), 1);

Dan is $afbeelding de random afbeelding die je wilt hebben. De truuk voor jou is dus om in die array $afbeeldingen de waardes te krijgen die je in Wordpress onder 'custom fields' opgeeft. Veel success.

Bij nader inzien denk ik ook te moeilijk. Dit bovenste is vooral handig als het later nog aanpasbaar moet zijn voor anderen. Je kunt natuurlijk zoiets zelf ook hardcoden in header.php, door te checken op welke pagina id het is. Er staat in de wordpress manual wel hoe het moet.

[ Voor 40% gewijzigd door DiSiLLUSiON op 14-11-2010 22:34 ]

[Ronnyrr]

Nogmaals bedankt voor je reactie.
Hier kan ik in ieder geval stukken verder mee komen.

Maar kan je dan niet gewoon bij

PHP:

<?php 
$head = array('images/head/vogel.jpg', 'images/head/vogels.jpg', 'images/head/blaarkop.jpg'); 
$head = array_rand(array_flip($head), 1); 
?>

De $head veranderen in een page id en dit stuk telkens herhalen zodat die bij elke pagina nieuwe foto's inlaad?

[DiSiLLUSiON]

Je bedoelt een grote if/else waarbij je voor elke id dit stukje code kopieert/plakt en dan de waardes wijzigt? Dat kan inderdaad.

Als je het netter wilt doen, kun je van $afbeeldingen een multidimensional associative array maken en dan aan de hand van de page id de juiste waarde selecteren.

PHP:

$afbeeldingen = array(
    '1' => array('1.jpg', '2.jpg'),
    '2' => array('3.jpg', '4.jpg')
);

$afbeelding = array_rand(array_flip($afbeeldingen[$pageid]), 1);

Ik weet zo niet uit m'n hoofd hoe je de pageid pakt van Wordpress, maar je moet dus $pageid vervangen door however je dat doet. iets als get_page_id() ofzo, en dan in die array rijen maken met voor elke page id een array met plaatjes.

Wil je trouwens dat élke pagina een rijtje afbeeldingen heeft? Zo kun je namelijk in de knoop komen te zitten als er pagina's bijkomen die je niet in dit lijstje hebt staan, dat moet je dan afvangen.

[ Voor 18% gewijzigd door DiSiLLUSiON op 16-11-2010 00:13 ]

[Ronnyrr]

Bedankt voor de reacties, maar veel problemen, er niet uit komen etc heb ik het toch anders opgelost.
Door de page.php in wordpress aan te passen naar een andere naam whatever.php en die template naam aan te passen en die dan selecteerbaar is in de editor in wordpress via deze code een andere header aangeroepen

PHP:

<?php
/*
Template Name: Overige_Template
*/
if (is_page('overige-projecten')){
    include(TEMPLATEPATH.'/header-overige.php');
}
?>

En dan in header-overige.php dezelfde javascript gebruiken als waarmee ik begon maar dan met andere foto's. Werkt goed, maar denk alsnog dat het een omweg is. Maar wel eentje die ik in ieder geval snap.

Maar nogmaals bedankt!

[BtM909]

met een klein tikje naar /14