scriptygoddess

16 May, 2002

fast random image php

Posted by: kristine In: CSS|Scripts

When I was creating the concept of my Buffy Skin for my journal, I knew that I had too many images to just use one on each sidebar. So I went on a search for a way to do random images.

But, my other quandry was that I wanted to do random images as backgrounds with words on top of them. So I took my first trip in the php manuals and figured out how to randomly pick a background and stick it into a div background.

Note, this isn't nearly as terrifically full-scale as Lynda's tutorial. If you are looking for something with random filenames and differing widths, hers is the way to go. But for the basics, I really like how this turned out….

First off, I saved all of my images as the same size pictures with a gradient so that text could be seen on top of them. I snuck different closeups and points of views into the different pictures.

I named each image a number from 1 to 20. (1.jpg, 2.jpg, and so on), and placed them in a directory on my server.

Then I found the php command for selecting a random number:

<?php echo rand(1,20) ?>

That just means – give me a random number between (and including) 1 and 20.

Because PHP processes before CSS does, I could generate this random number by putting inside of an inline style command.

<div style="background-image:url(http://love-productions.com/hopelessromantics/skins/nav/buffy/<?php echo rand(1,20) ?>.jpg);>sidebar text here</div>

This just tells it to take that random number that we generated and use it as a file name for the background image of the div.

And that's it! I saved this inside of my skin header (which is .php) with a bit more formatting added, and I've got different backgrounds with just a reload.

Note: Because I used two sidebars, everyonce in a while I get the same image on each sidebar. Something else I might research in the future would be a way to echo a random number that is different than the one that already has been echoed on the other side of the page. But for all intensive purposes, it does its job, and gives me great fun to see what combination of people I might end up with on my sidebars.

9 Responses to "fast random image php"

1 | Row

May 16th, 2002 at 11:41 pm

Avatar

On my site, I use three different groups of images. What I do is this:

I write an array from 0 to 25, listing the image url, dimensions, and alt text. Then I put this at the bottom:

srand(time());
$random = (rand(0,9));
$random1 = (rand(10,18));
$random2 = (rand(19,25));

Then where I want the pictures to display, I just put

<? echo $photo[$random]; ?> <? echo $photo[$random1]; ?> <? echo $photo[$random2]; ?>

It ensures that the three pics are never duplicated, and it also allows me to categorise the photos.

2 | Row

May 16th, 2002 at 11:42 pm

Avatar

Of course if you categorised your Buffy pics you would lose a little of that surprise element :(

3 | Lynda

May 16th, 2002 at 11:50 pm

Avatar

Awesome and very simple, Kristine! :)

There are ways to make sure the same number doesn't pop up twice, but I'm so tired that I'm sure what I'm thinking of is too complicated and a far simpler solution can be reached so I'm going to sleep on it before posting it. LOL.

It would involve setting a $rand variable to a random number between 1-20, then setting a $rand2 variable also between 1-20, however if $rand == $rand2, it has to pick again…

I'm not positive this would work, but in theory it should:

Set this up after the body tag:

<?php
$rand = rand(1, 20);
$rand2 = rand(1,20);
while ($rand2 == $rand):
$rand2 = rand(1, 20);
endwhile;
?>

Then echo $rand and $rand2 in the appropriate places. Again, dunno if it works, but in theory, it will set $rand2 and then while $rand2 is coming up the same number as $rand, it will reset $rand2 to another random variable.

4 | kristine

May 17th, 2002 at 8:48 am

Avatar

That makes sense. Pick a number, and pick a number, and if they match, try again.
Can you explain the while and endwhile parts of that code for me? (i'm such a newbie php-er, and so I'm totally wanting knowledge!!!) When you are back up and awake of course :giggle:

5 | Lynda

May 17th, 2002 at 9:05 am

Avatar

This is the first time I've used while, endwhile, actually, but I think I'm familiar with all the other loops..hehe.

basically, the first time the script runs into while, it's an IF statement. IF $rand2 is the same number as $rand, then…

The next line RESETS the $rand2 to a completely new random number..

I'm not positive it will work because, as I said, I've never used while, endwhile before but it seemed the easiest solution – I know other loops could do it too with more code.

So WHILE $rand2 is the same number as $rand (because if we just JUST an if statement, it might pick the same number) it's going to reset $rand2.

Does that make any more sense? I'm not sure I'm more awake. hehe.

6 | Cis

June 5th, 2002 at 2:51 pm

Avatar

I use that skin on your site. i like it alot. I wish there was a noscroll feature to it though, so that the pattern stayed put and the text scrolled on instead of the image repeating at the bottom.

7 | Gameboy

September 30th, 2002 at 1:13 pm

Avatar

Here's a random output function that I use on my site. You can define HTML strings that can be anything, just an image, or text, or a link. I like this function because you can easily alter it, because of the automatically incrementing array item declaration that PHP offers. AND, you can make items conditional, for example you can put some items in "if" constructs that use the date and display the item only before a certain date, or on a particular weekday.

$banarr[]='enter complete html here – image, text, link.. anything';
$banarr[]='and another one';
if (date('l')=='Tuesday') {
$banarr[]='this one may show on tuesdays only';
}
$banarr[]='repeat the empty banarr[] declaration for each new item';
echo $banarr[rand(0,sizeof($banarr)-1)];

The last line produces the output – all in just one line of code. You may want to make the above into a function, where you have the array as a parameter, or simply to call the function on several places on your site.

8 | Jennifer

March 23rd, 2003 at 2:16 pm

Avatar

Is there a way to MAKE the same random number appear 2 times on the same page? I would like to generate random b&w pictures at the top (numbered 1-5bw.gif) and I also have the same images in color (numbered 1-5color.gif) When you mouseover the b&w images, the colored one appears. Right now, the random numbers generated are different, so it changes the picture, heh. Is there a simple way to do this…say, $rand1 == $rand2 or something? Thanks!

9 | Alegis

June 19th, 2003 at 7:24 am

Avatar

Thanks, I needed this

Featured Sponsors

Genesis Framework for WordPress

Advertise Here


  • Scott: Just moved changed the site URL as WP's installed in a subfolder. Cookie clearance worked for me. Thanks!
  • Stephen Lareau: Hi great blog thanks. Just thought I would add that it helps to put target = like this:1-800-555-1212 and
  • Cord Blomquist: Jennifer, you may want to check out tp2wp.com, a new service my company just launched that converts TypePad and Movable Type export files into WordPre

About


Advertisements