request: randomize head image in ChaoticSoul theme

[technozeus]

Hi to all.
I would like to change randomly (at any reload of the page) the image in the head of Chaoticsoul theme (image_left.jpg and image_right.jpg). I have the code to randomly those images but the problem is that the images are set in the css file.
Is there the possibility to set the path in the php files (theme.php for example)?
Thanks a lot.

[technozeus]

ok, I'm implementing it by javascript code but I would prefer to use php code

[just_some_guy]

SELECT * FROM cpg1411_pictures ORDER BY RAND() LIMIT 1;

Will get info about a random image.

[technozeus]

mmmhhh, but the image that the template use for "head" is not an image in the db, is an image in the folder of template (421x149px).
Well, I solved whit a javascript, is not what I prefer, but works.
I post the mod for anyone else interest:

In the file "template.html" add before "</head>":

Code Select Expand

<script language="javascript" type="text/JavaScript">
function rndImage() {
numImg = 11;
numRet = Math.floor(Math.random() * (numImg++));
if (numRet==0){
numRet = 1
}
return numRet;
};
</script>

then, replace

Code Select Expand

<div class="image_header bkgleft"> </div>
<div class="image_header bkgright">

with

Code Select Expand

<script language="javascript" type="text/JavaScript">
var img = rndImage();
document.write('<div style="background-image: url(yourimagepath/image_left_'+img+'.jpg); float: left; border: 1px solid #363430; height: 149px; width: 421px;"></div>'+
'<div style="background-image: url(yourimagepath/image_right_'+img+'.jpg); float: right; border: 1px solid #363430; height: 149px; width: 421px;"></div>');
</script>

Now:
1) replace "yourimagepath" with the folder path of your images.
2) create how many couple of images you want (who know the template know that in the head there is 2 image) and call they image_left_x and image_right_x
3) replace numImg in the function rndImage() with the number of your images couple
4) sorry for my english
5) any suggested is apreciate

[Joachim Müller]

Thanks for posting your solution. You're right that JavaScript should be avoided if possible. To do the random stuff server-sided (using PHP), you'll have to come up with some tweaks. I suggest using the custom_header feature for that purpose, since that's what it has been disgned for in the first place. The PHP script that should reside in the file that the custom_header patrh is pointing to should be a simple if/then toggle similar to the one you came up with in JavaScript. Something like this should do the trick:

Code Select Expand

<?php
$random_number = rand(0,3); // the first parameter is the minimum, the second the maximum
if ($random_number == 0) {
print '<img src="path/to/your/first/image.jpg" border="0" alt="" />';
} elseif ($random_number == 1) {
print '<img src="path/to/your/second/image.jpg" border="0" alt="" />';
} else {
print '<img src="path/to/your/third/image.jpg" border="0" alt="" />';
}
?>(This is of course pretty crude code that is meant as a proof of concept. You get the idea)

[technozeus]

using custom_header...good idea, but I don't know about the layout of the page of this theme. I will try and i will tell you.
I'd prefer php code also because I could scan the directory with the images and do all dinamic...
I do immediately some test
Thanks!

[technozeus]

Ok, thanks to joachim for his suggestion, I solved with the custom header:
- create a new files in coppermine base dir (ex custom_header.php) and add it in the config menu as header
- add this code:

Code Select Expand

<?php
$path_img = "yourpathofimages";
$total_images = (count(glob("$path_img{*.gif,*.jpg,*.png}", GLOB_BRACE)))/2;
$num_img = rand(1,$total_images);
print "<div style=\"background-image: url($path_img/image_left_$num_img.jpg); float: left; border: 1px solid #363430; height: 149px; width: 421px;\"></div>
<div style=\"background-image: url($path_img/image_right_$num_img.jpg); float: right; border: 1px solid #363430; height: 149px; width: 421px;\"></div>";
?>

- modify the file template.html in the theme Chaoticsoul like this:
find

Code Select Expand

<div id="page">
{CUSTOM_HEADER}
remove {CUSTOM_HEADER}
find

Code Select Expand

<div id="headerimg" class="clearfix">
<div class="image_header bkgleft"> </div>
<div class="image_header bkgright"> </div>
</div>
replace with

Code Select Expand

<div id="headerimg" class="clearfix">
{CUSTOM_HEADER}
</div>

Thanks for this beautifull tamplate, I like it very much