Forums

mattyoungmark

Hi! Graphic designer, utter programming noob here. I'm trying to use the tip here (http://css-tricks.com/a-quick-and-dirty ... -an-image/) to randomize an image in my wordpress theme.

The image is in my style.css file in the following lines of code:

.logo h2{
float:left;text-indent:-100000px;background:url(images/slogan_4.png) no-repeat left top;width:327px;height:94px;margin:10px 0 0 0px;

I'm trying to swap out the slogan_4.png image randomly with slogan_1 through slogan_6, but replacing the number "4" with the following snippet:

<?php echo(mt_rand(1,6)); ?>

...just makes the image disappear. Anybody know what I'm doing wrong? I know the 6 images are labeled correctly, since I can switch between them by just changing the 4 to a 3 in the code.

http://www.blogosaur.com (the image I'm trying to effect is the little blue monkey quote in the header)

mismatchingpanda

Hi, from the sounds of it, I think you are trying to add PHP to your CSS file. You can't really do this.

A possible fix would be to make multiple classes with your different background, and randomly fill in the class name where you want the random picture to go.

so for example

lets start with the css,


.bg1    { background: #ff0066; }
.bg2    { background: #0066ff; }
.bg3    { background: #ff6600; }
.bg4    { background: #cccc00; }
.bg5    { background: #ccccff; }
.bg6    { background: #a10000; }

now lets right a php function that will randomly output one of those class


function randomClass() {
    $num = rand(1,6); //will pick a number between and including 1 and 6
    echo 'bg'.$num;
}

and then for the html


<div class=\"class1 class2 class3 <?php randomClass(); ?>\"></div>

If this is an outdated way im sorry, I have only started working with php again just in the last few days. But this should at least help you look at it in a different way, good luck.

The site looks beautiful too, well done.

Cheers

ikthius

easiest way is to make a php script that changes the output.

but keep the markup on the html page:

HTML


<div class=\"imageright\"> //this div is not needed for you, i use it in a site, but this changes so did not add it to the php
<?php
include('/www/abc/public_html/images.php'); //where your script is
?>	
</div>

images.php


<?php
/*
	STORE BANKS OF IMAGES AS INTEGER NUMBERS WITH A .jpg EXTENSION.
	ONCE STORED AND IMAGES UPLOADED, CHANGE THE $maxNumImages VARIABLE TO
	MAXIMUM NUMBER OF IMAGES IN THAT DIRECTORY
*/

//****** MAIN IMAGE SETTINGS  ********
$maxNumImages = 10;// change this number to the total number of images
$imageURL = \"http://www.abc.com/images/abcImageBank/\";
$imageExtension = \".jpg\";

//****** RANDOM NUMBER GENERATOR  ********
$num = rand(1, $maxNumImages);

//****** GENERATING ARRAY OF IMAGES ********
for ( $counter = 1; $counter <= $maxNumImages; $counter += 1) 
{
	$image[$counter] = $imageURL . $counter . $imageExtension;
}
//****** OUTPUT OF IMAGE ********
echo \"<img src='\" . $image[$num] . \"' title='' alt='' /><br>\";
?>

so take away your image declaration in the css, let the php do it

NOTE: it is random, so you may load each time and get something new, sometimes you wont, but you could get the same image 3/4 times...... thats the luck of the draw

EDIT: Just thought, you may be able to put your images.php file in the background declaration of the css e.g.
#logo {background:url(http://abc.com/scripts/images.php);} not tested it, but it is a file and the end result is echo-ing out the actual image file.

pluggyboy

I put a tutorial on my blog on how to randomise images in wordpress recently, but it's focused on background images. the principals are the same though: http://giteguru.com/starting-gite-websi ... ros-theme/

hth,

Dave

mattyoungmark

Thanks, everyone! That last tip from Dave worked quick and easy on the first try. I swear, these forums restore my faith in humanity!

ikthius

how did you get it to work?

mattyoungmark

I replaced

(images/slogan_4.png)

with

(images/slogans/random.php)

and then created a "slogans" folder in my images directory that contained the pngs to be randomized and the "random.php" script I found here:

http://ma.tt/scripts/randomimage/

Worked like a charm!

treehouse : what would you like to learn today?

Forums

Help with "A Quick and Dirty Way To Randomize an Image"