Random image to template css header

[japla]

Hello,

Any ideas how to call RandomImage from templates screen.css header definition?

Currently this part of my template is:
#header {
   text-align: left;
   width: 873px;
   height: 150px;
   background-color: #144e56;
   background-image: url(header.jpg);
   margin: 0 auto;
   border-top: 4px #FFFFFF solid;
   border-left: 4px #FFFFFF solid;
   border-right: 4px #FFFFFF solid;
   background-repeat: no-repeat;
}

Can I somehow call this RandomImage straight from this css, or do you have other ideas?

Thanks,

Janne

[BerndJM]

Hi,

an easy way would be to write the part for the image as inline CSS in your template, like this:

Code:

<div id="header" style="background-image: url(<?php RandomImage ('path to your pics'); ?>)"></div>

Regards Bernd

[japla]

Thanks for help, anyway it seems that I still have a problem with syntax.

My line is inside index.php
<div id="header" style="background-image: url(<?php RandomImage ('//media/galleria'); ?>)">   </div>

When I look my webpages with this, at the place where picture shoud be, is just   )">

Any ideas, what went wrong?

Thanks,

Janne

[BerndJM]

Oh, I see the mistake,

RandomImage gives back a string for the image tag with width and height values, which you can't use with the background-image 

If you don't need it as a background-image you can try it with a normal img tag. Otherways ... have an idea, but will it check first.

Regards Bernd

[kweitzel]

If you use the CSS as inlin CSS (in the index file of your template), you can change at the bottom of the script:

Code:

echo '<img src="'.WB_URL.$dir.'/'.$image.'" '.$dimensions[3].'>';

This defines the output of the image. If you take away all the tag stuff and only leave the path the output should fit your needs (only in inline CSS though!):

Code:

echo 'WB_URL.$dir.'/'.$image;

Alternatively search the forum for "random background" (maybe together), I once adapted the oroginal script for that.

cheers

Klaus

[BerndJM]

Oh Klaus,

couldn't you say that before I start thinking

Just made this modification in the include.php:

Code:

<?php

/* Random image snippet

   Call this nsippet with:

        RandomImage ('/media','img'); for normal img tag or
        RandomImage ('/media','bgi'); for background-image

   in your template

*/



function RandomImage($dir,$type) {


//read folder and get the picture names

$folder=opendir(WB_PATH.$dir.'/.'); 

while ($file = readdir($folder)) 

$names[count($names)] = $file; 

closedir($folder);



//remove any non-images from array

$tempvar=0;

for ($i=0;$names[$i];$i++){

$ext=strtolower(substr($names[$i],-4));

if ($ext==".jpg"||$ext==".gif"||$ext==".png"){$names1[$tempvar]=$names[$i];$tempvar++;}

}



//random

srand ((double) microtime() * 10000000);

$rand_keys = array_rand ($names1, 2);



//random image from array

$image=$names1[$rand_keys[0]]; 



//image dimensions

$dimensions = GetImageSize(WB_URL.$dir.'/'.$image); 
// "normal" image or background ?
switch ($type) {
case "img" : echo '<img src="'.WB_URL.$dir.'/'.$image.'" '.$dimensions[3].'>';
break;
case "bgi" : echo WB_URL.$dir.'/'.$image;
break;
default : echo '<img src="'.WB_URL.$dir.'/'.$image.'" '.$dimensions[3].'>';
}

}

?>

Than it has to be called with a second parameter "img" for normal image or "bgi" for background-image. So you can use the function for both variants.

Regards Bernd

[japla]

Hello Again,

I think that you will soon kill me.

I first tried Klaus idea, and got error of wrong syntax. I believe that it was ' after echo, error went away but I was not able to make it work. I also tried to search, but no luck of finding the thread which you referred.

Then I tried Bernds idea, but still not working. No errors, no unwanted characters, but also no images.

Few questions:
* I removed #header definitions from screen.css. Is this correct?

* I added line <div id="header" style="background-image: url(<?php RandomImage ('/media/headerimages'); ?>)"> </div> to index.php. Is this correct?

From which point I should count the path for images, from template index.php folder or from RandomImage module folder? Anyway, I tried both, and no luck.

What happens is empty area at the place where images should be.

Any ideas?

Thanks,

Janne
 

[BerndJM]

1.)

* I removed #header definitions from screen.css. Is this correct?

No thats not correct, you need it 'cause there are the other definitions for the header-div like width, height, background-repeat and so on

2.)
If you use my modified RandomImage function you must call it with the second parameter which says the function if you want img or background-image in your case:

Code:

<div id="header" style="background-image: url(<?php RandomImage ('/media/headerimages','bgi'); ?>)"> </div>

Regards Bernd

[kweitzel]

Here is the original post for random background: http://forum.websitebaker.org/index.php/topic,3578.msg26741.html#msg26741

And the code posted above should indeed look a bit different (I think like that):

Code:

echo WB_URL.$dir.'/'.$image;

cheers

Klaus

[japla]

Thank you all for helping me out!

It is now working well.

regards,

Janne

[ruebenwurzel]

Hello,

also have a look at the uccellini template:

http://addons.websitebaker.org/pages/templates.php?template=uccellini

This comes with a built in random header script.

Matthias