Recent Topics
  1. b2evolution CMS Support Forums
  2. b2evolution Support
  3. Templates, skins, XHTML and CSS
  4. Random image background

Random image background

1 Apr 13, 2007 17:12    

My b2evolution Version: Not Entered

Hi,
I've got an idea of a new skin for my blog, but to put it in practice I would need a script to show random images as the background when the main page loads. Do you know where to find the script I need? Where should I put it? in the css file? in the _main.php file?

Thanks!

Back to top

2 Apr 14, 2007 04:39

Nice question,

I found this PHP script from http://photomatt.net/scripts/randomimage/ and because it's only a few lines, I can show it here:

<?php
/*
    By Matt Mullenweg > http://photomatt.net
    Inspired by Dan Benjamin > http://hiveware.com/imagerotator.php
    Latest version always at:
    http://photomatt.net/scripts/randomimage
*/

// Make this the relative path to the images, like "../img" or "random/images/".
// If the images are in the same directory, leave it blank.
$folder = '';

// Space seperated list of extensions, you probably won't have to change this.
$exts = 'jpg jpeg png gif';

$files = array(); $i = -1; // Initialize some variables
if ('' == $folder) $folder = './';

$handle = opendir($folder);
$exts = explode(' ', $exts);
while (false !== ($file = readdir($handle))) {
    foreach($exts as $ext) { // for each extension check the extension
        if (preg_match('/\.'.$ext.'$/i', $file, $test)) { // faster than ereg, case insensitive
            $files[] = $file; // it's good
            ++$i;
            }
        }
    }
closedir($handle); // We're not using it anymore
mt_srand((double)microtime()*1000000); // seed for PHP < 4.2
$rand = mt_rand(0, $i); // $i was incremented as we went along

header('Location: '.$folder.$files[$rand]); // Voila!
?>


The code is pretty self explanatory. It is called by this line:

<img src="/dropbox/2003/rotate/rotate.php" alt="A Random Image" />

For your purpose of a background image, you would want to change this last line. In plain old HTML you would call a background image through:

<body background="image.gif">


but your blog is in XHTML, so you could do an embedded css style rule, like so:

<style type="text/css">
body {
  background-image : url(rotate.php)
}
</style>


Put this somewhere in the header of the _main.php file. It presumes you have copied the main PHP code in a file that's called rotate.php and is located in the folder of your skin.

I am not fully sure the PHP file is called correctly the way I proposed. Else try:

<style type="text/css">
body {
  background-image : url(<?php inc("rotate.php"); ?>)
}
</style>

I am sure there are ways like through javaScript to get to the same effect.

Hope to see some result.
Good luck.

Back to top

3 Apr 14, 2007 05:06

Nando wrote:

My b2evolution Version: Not Entered

Hi,
I've got an idea of a new skin for my blog, but to put it in practice I would need a script to show random images as the background when the main page loads. Do you know where to find the script I need? Where should I put it? in the css file? in the _main.php file?

Thanks!

We regularly use random images and text annotations on most of our webpages with a simple client side javascript. But the code for this does not vary the background image.

We also usually vary our separate page backgrounds with specified CSS image URL's.

Randomly varying a single page background can easily be done on the server side with a PHP script, although it could also be done on the client side with javascript and the DOM.

In any event the script source (javascript or PHP) should be installed on the server _main.php module along with the appropriate CSS link file.

Your new skin idea should really look nice with this technique.

Back to top

4 Apr 14, 2007 07:45

Afwas wrote:

Nice question,

I found this PHP script from http://photomatt.net/scripts/randomimage/ and because it's only a few lines, I can show it here:.....

Perhaps a more compact PHP technique would be to generate the CSS...
e.g.

<?php // Random Background Switcher Example
$BG[0]='#insidePage{ background:#000000 url(images/testimage.jpg) no-repeat top; }';
$BG[1]='#insidePage{ background:#000000 url(images/bg_photo_1.jpg) no-repeat top; }';
$ix=rand(0,1);
echo '<style type="text/css">'.$BG[$ix].'</style>'; //Generate a line of CSS
?>

Back to top

5 Apr 14, 2007 07:51

OFFT TOPIC: boblennon please use the "code" or "php" buttons when you post code.

Back to top

6 Apr 14, 2007 07:58

EdB wrote:

OFFT TOPIC: boblennon please use the "code" or "php" buttons when you post code.

Thanks for the heads up EdB. Will do in the future.

Bob Lennon

Back to top

7 Apr 14, 2007 18:20

Nando wrote:

My b2evolution Version: Not Entered

Hi,
I've got an idea of a new skin for my blog, but to put it in practice I would need a script to show random images as the background when the main page loads. Do you know where to find the script I need? Where should I put it? in the css file? in the _main.php file?

Thanks!

Hello Nando,

I thought I'd give your idea a try and set up a demo at:
http://lakeareawebs.com/BGDemo/ if you are interested.

It provides random comments, random foreground images with captions, and random CSS backgrounds.

And while it's only a demo, you can download the source from there if you want to incorporate any of it in your new design.

Best Regards...Bob Lennon

Back to top

8 Apr 14, 2007 21:02

um... it changes one picture - no random quote or foreqround image - unless I enable javascript for your site. How would I know I needed or wanted to do that? Much better to put everything your site requires on your server, and only depend on javascript when it's either a trinket that your page can live without or something you can tell your visitor they must enable in order to go any further. Also a <noscript> tag is a good idea if you use javascript.

Here's what I use for generating 3 random and different quotes from a list. First add your own quotes to the code and save this as _quotes.php in your skins/yourskin folder: 

<?php 
$ranquo = array();
$ranquo[] = "whatever A";
$ranquo[] = "whatever B";
$ranquo[] = "whatever C";
$ranquo[] = "whatever D";
$ranquo[] = "whatever E";

$quotes = count($ranquo)-1;

$rannum1 = rand(0,$quotes);
$rannum3 = $rannum2 = $rannum1;

while ( $rannum2 == $rannum1 ) {
$rannum2 = rand(0,$quotes);
}

while ( ($rannum3 == $rannum2 ) || ( $rannum3 == $rannum1 ) ) {
$rannum3 = rand(0,$quotes);
}

$quote[0] = $ranquo[$rannum1];
$quote[1] = $ranquo[$rannum2];
$quote[2] = $ranquo[$rannum3];

return $quote;

?>

Next in your skin's _main.php file you have to require the file once ... 

<?php require( dirname(__FILE__).'/_quotes.php' ); // RANDOM QUOTE INCLUDED HERE ?>

Then you have to echo each of the quotes in the place you want them to be with something like this:

<?php echo '<p>'.$quote[0].'</p>'; ?>

...

<?php echo '<p>'.$quote[1].'</p>'; ?>

...

<?php echo '<p>'.$quote[2].'</p>'; ?>

It'll obviously be much easier to call only one quote, and the same can be done with an image tag.

Back to top

9 Apr 14, 2007 23:17

Hmmm, I got back home just now and was surprised to see this post with 7 replyes. thanks!

Anyway, everything still seems chinese to me, but I'll do my best to slowly start making the new design.

boblennon - thank you very much! I'll see what I can do from your code, though I would only need the rotating background image.

So where and how should I start. Which file should I start editing? custom.css or ) _main.php ?

Which script is easier and browser friendly? the php one or the java one?

thanks!

Back to top

10 Apr 14, 2007 23:40

Nando wrote:

Hmmm,

Which script is easier and browser friendly? the php one or the java one?

thanks!

I prefer the php code that generates the dynamic CSS. As you say, not everyone permits javascript (although they perhaps should).

More specifically:

 <?php // Random Background Switcher Example
		 $BG[0]='#insidePage{ background:#000000 url(images/testimage.jpg) no-repeat top; }';
		 $BG[1]='#insidePage{ background:#000000 url(images/bg_photo_1.jpg) no-repeat top; }';
		 $ix=rand(0,1);
	     echo '<style type="text/css">'.$BG[$ix].'</style>'; //Generate a line of CSS
	?>

You should include this code just before the </head> tag in the _main.php module, and refer to the #insidePage ID in the <div> wrapper that will hold the background picture.

Good Luck....Bob Lennon

Back to top

11 Apr 14, 2007 23:47

That's pretty nice code for selecting a random background image, including the location to put it at. I'd have probably done it a little different, but in the end it's all the same when it sends a different background image for each page load. I'm too anal on the whole b2evo structure thing I guess, but I'd have slipped it into the head section of the official 'custom' skin using the img folder to hold the image. But obviously it works well! The bit I shared wouldn't do anything for a background image, so between the two ... !

Oh and I disagree on the "everyone should allow javascript" thing. It's much better to assume no one allows it and let them know your web needs it to do a job here and there then expect people to be open to potential security issues on unscrupulous web sites. You and I might be nice people using javascript, but that's not something I'd assume of every web site out there. Anyway that's why I use the noscript extension in FF. Plus I NEVER see google ads ;)

Back to top

12 Apr 15, 2007 23:29

The only disadvantage I see in the last proposed solution is that the images are 'hard coded' in the _main.php. What happens if the image happens not to be where it should be?
The solution I found (No advertisement, I have nothing to do with the coder or his work and he is defenitely not going to pay me if you use his code) first checks whether and which pictures are available before making a choice.

Do you provide us a link once you've got it working?

Good luck.

Back to top

13 Apr 16, 2007 00:22

Ok, I'll duplicate my current skin, rename it and then create a new blog, on which I'll do the tests... I'll keep you guys informed.

Back to top

14 Apr 16, 2007 00:37

@boblennon
Nice little php script as an alternative to JS.
I use it for changing header images.
Now just need to add captioning and "alt" tags :)

Back to top

15 Apr 17, 2007 02:11

Tried to rotate the top image just to have an idea of how it works and I failed completely. I never managed to set it up correctly. I have created the rotate.php file uploaded it to the skin folder, as well as the pics and didn't work :-/

Back to top

16 Apr 17, 2007 04:02

It works on my testsite: http://www.hemminga.net/background/.
I needed to make two changes. In the proposed rotate.php change the last line in:

echo($folder.$files[$rand]); // Voila!


Call the style through:

<style type="text/css">
body {
  background-image : url(<?php include("rotate.php"); ?>)
}


Place this last code in the <head> section of index.php (or _main.php of your skin)
View the source of my test site.

Good luck

Back to top

17 Apr 17, 2007 12:08

But Im not using it as the background it yet. I'm just testing in the top image of the blog so far.... So I guess I won't need the second code bit you posted?

Back to top

18 Apr 17, 2007 16:44

<img src="<?php include('rotate.php'); ?> " alt="A Random Image" />


for a single image.

Back to top

19 Apr 17, 2007 17:27

Still not working. Maybe Im uploading the files to the wrong folder?

I havent changed the rotate.php file at all. I just uploaded it to the skins/myskin folder, with all the images I would like to rotate.

And I inserted the code above in the _main.php file where the previous image was.

Have I done anything wrong? Have I uploaded the rotate.php file to the wrong folder?

Back to top

20 Apr 17, 2007 17:37

The code start with this line:

// Make this the relative path to the images, like "../img" or "random/images/".
// If the images are in the same directory, leave it blank.
$folder = '';


If you leave it as is it presumes your images are in the same folder as "rotate.php' is. If your images are in a different folder, change the parameter with the folder *relative to 'rotate.php'*.

Back to top

21 Apr 17, 2007 17:38

Nando wrote:

I havent changed the rotate.php file at all.

Do make the change in the last line, as I proposed.

Back to top

22 Apr 17, 2007 17:39

I've uploaded the rotate.php file and the images to the skins/myskin folder. And it didnt work :(

Back to top

23 Apr 17, 2007 17:42

Afwas wrote:

Nando wrote:

I havent changed the rotate.php file at all.

Do make the change in the last line, as I proposed.

Just done that and nothing :(

Back to top

24 Apr 17, 2007 17:45

here's the rotate.php file

 <?php
/*
    By Matt Mullenweg > http://photomatt.net
    Inspired by Dan Benjamin > http://hiveware.com/imagerotator.php
    Latest version always at:
    http://photomatt.net/scripts/randomimage
*/

// Make this the relative path to the images, like "../img" or "random/images/".
// If the images are in the same directory, leave it blank.
$folder = '';

// Space seperated list of extensions, you probably won't have to change this.
$exts = 'jpg jpeg png gif';

$files = array(); $i = -1; // Initialize some variables
if ('' == $folder) $folder = './';

$handle = opendir($folder);
$exts = explode(' ', $exts);
while (false !== ($file = readdir($handle))) {
    foreach($exts as $ext) { // for each extension check the extension
        if (preg_match('/\.'.$ext.'$/i', $file, $test)) { // faster than ereg, case insensitive
            $files[] = $file; // it's good
            ++$i;
            }
        }
    }
closedir($handle); // We're not using it anymore
mt_srand((double)microtime()*1000000); // seed for PHP < 4.2
$rand = mt_rand(0, $i); // $i was incremented as we went along

echo($folder.$files[$rand]); // Voila! 
?>

and here's the bit where I changed the main.php file:

<a href="http://www.abittersweetlife.net/blog"><img id="frontphoto" src="<?php include('rotate.php'); ?>" alt="A Bittersweet Life" /></a>

Back to top

25 Apr 17, 2007 17:51

Looks correct to me. What does the source of the generated page say? Do you have at least the alt text where the image should be?
Check my test site: http://www.hemminga.net/background/ for a working version.

Back to top

26 Apr 17, 2007 17:57

Yes, I get the alt text only

I think I might be uploading the files to the wrong folder. Not really sure....

Back to top

27 Apr 17, 2007 18:06

Got it! The files should be in the /blog folder and not in the skins folder.

Thanks for your help :)

Edit:
I think the script has a bug. I uploaded 4 images and there's one image it doesn't display. it displays the alt text instead :-/ Weird....

Back to top

29 Apr 28, 2007 03:46

Try MTV without trusting them with javascript and you'll see a fairly basic page with NO changing anything.

Back to top

30 Apr 28, 2007 05:01

:) I can't even do online banking with Javascript turned off

I think a PHP solution for the background images would have been much better

Back to top


Form is loading...