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

[mattyoungmark]

Hi! Graphic designer, utter programming noob here. I’m trying to use the tip here (https://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:

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:

Code:

…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,

Code:

.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

Code:

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

and then for the html

Code:

#56835

ikthius

Member

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

but keep the markup on the html page:

HTML

Code:

//this div is not needed for you, i use it in a site, but this changes so did not add it to the php

images.php

Code:

“;
?>

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.

#56844

pluggyboy

Member

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

#56851

mattyoungmark

Member

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

#56858

ikthius

Member

how did you get it to work?

#56905

mattyoungmark

Member

I replaced

Code:

(images/slogan_4.png)

with

Code:

(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!

[ikthius]

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

but keep the markup on the html page:

HTML

Code:

//this div is not needed for you, i use it in a site, but this changes so did not add it to the php

images.php

Code:

“;
?>

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

Code:

(images/slogan_4.png)

with

Code:

(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!

[Author]

Posts