Forums

Rai

Hello everyone,

Someone can help me to apply this snippet of php (it is from this post)
here is the instructions:

1. ABOVE THE DOCTYPE

Set up and array of filenames, which correspond to the file names of the images you are trying to randomize.

<?php
  $bg = array('bg-01.jpg', 'bg-02.jpg', 'bg-03.jpg', 'bg-04.jpg', 'bg-05.jpg', 'bg-06.jpg', 'bg-07.jpg' ); // array of filenames

  $i = rand(0, count($bg)-1); // generate random number size of the array
  $selectedBg = "$bg[$i]"; // set variable equal to which random filename was chosen
?>

1. CSS IN THE

Normally you'd want to keep CSS out of the HTML, but we'll just use it here to echo out the random file name we selected above.

<style type="text/css">
<!--
body{
background: url(images/<?php echo $selectedBg; ?>) no-repeat;
}
-->
</style>

What I most do to apply this on #main-content for example?.

Any help please!
Thanks,
Rai.

Bob

Replace the word body in the last bit of code you posted with #main-content probably.

TT_Mark

Basic CSS!


<style type="text/css">
<!--
#main-content{
background: url(images/<?php echo $selectedBg; ?>) no-repeat;
}
-->
</style>

Rai

You know, is not working for me, here is my code if you can check it.

Thanks.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<?php
  $bg = array('bg-01.jpg', 'bg-02.jpg', 'bg-03.jpg', 'bg-04.jpg', 'bg-05.jpg', 'bg-06.jpg', 'bg-07.jpg' ); // array of filenames

  $i = rand(0, count($bg)-1); // generate random number size of the array
  $selectedBg = "$bg[$i]"; // set variable equal to which random filename was chosen
?>

<html xmlns="http://www.w3.org/1999/xhtml"<?php language_attributes(); ?>>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- titulo -->
<title>
<?php if (is_home()) { echo bloginfo('name');
			} elseif (is_404()) {
			echo 'P&aacute;gina no encontrada';
			} elseif (is_category()) {
			echo ''; wp_title('');
			} elseif (is_search()) {
			echo 'Resultado de la búsqueda';
			} elseif ( is_day() || is_month() || is_year() ) {
			echo 'Archivos:'; wp_title('');
			} else {
			echo wp_title('');
			}
			?>
</title>
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/images/favicon.ico" />
<!-- fin titulo -->

<!-- css -->
<link href="<? bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />
<!-- fin css -->

<style type="text/css">
<!--
#main-content {
background: url(images/<?php echo $selectedBg; ?>) no-repeat;
}
-->
</style>

<?php wp_head(); ?>
</head>

noahgelman

hmmm... try writing it inline instead of in a style tag at the top of the page

Rai

You mean something like this?



<!--
#main-content {
background: url(images/<?php echo $selectedBg; ?>) no-repeat;
}
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<?php
  $bg = array('bg-01.jpg', 'bg-02.jpg', 'bg-03.jpg', 'bg-04.jpg', 'bg-05.jpg', 'bg-06.jpg', 'bg-07.jpg' ); // array of filenames

  $i = rand(0, count($bg)-1); // generate random number size of the array
  $selectedBg = "$bg[$i]"; // set variable equal to which random filename was chosen
?>

<html xmlns="http://www.w3.org/1999/xhtml"<?php language_attributes(); ?>>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- titulo -->
<title>
<?php if (is_home()) { echo bloginfo('name');
                        } elseif (is_404()) {
                        echo 'P&aacute;gina no encontrada';
                        } elseif (is_category()) {
                        echo ''; wp_title('');
                        } elseif (is_search()) {
                        echo 'Resultado de la búsqueda';
                        } elseif ( is_day() || is_month() || is_year() ) {
                        echo 'Archivos:'; wp_title('');
                        } else {
                        echo wp_title('');
                        }
                        ?>
</title>
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/images/favicon.ico" />
<!-- fin titulo -->

<!-- css -->
<link href="<? bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />
<!-- fin css -->

<?php wp_head(); ?>
</head>

Rai

It doesn´t work either.

T_T

jamy_za

I've done this before:

<style type="text/css">
	body{background: url(<?php bloginfo( 'template_url' ); ?>/images/bg<?php echo rand(1, 6); ?>.jpg) no-repeat center top fixed;}
</style>

Rai

Thanks Jamy,

what about the first code above the doctype, you make any changes?
there is something I´m missing....

noahgelman

Wow jamy, that looks really nice and simple

jamy_za

@Rai No, mine is a stand alone script. It's what I've used in production before to achieve the effect you seem to be looking for.

@noahgelman Thanks =)

Rai

This never work for me so I find other way, and it works at the first time:

After


<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

Add this code:


<style>
body {
background: transparent url('<?php include('css.php') ?>') repeat-x; }
</style>

Then create a file call it css.php on your theme folder and add this code on it:


<?php
$f = array(
1 => "http://tudominio.com/wp-content/themes/magiting/images/bgd_po.jpg",
2 => "http://tudominio.com/wp-content/themes/magiting/images/img13.jpg",
3 => "http://tudominio.com/wp-content/themes/magiting/images/img6.jpg",
4 => "http://tudominio.com/wp-content/themes/magiting/images/img23.jpg",
5 => "http://tudominio.com/wp-content/themes/magiting/images/img11.jpg",
6 => "http://tudominio.com/wp-content/themes/magiting/images/img9.jpg",
);
$n = rand(1,6);
?>
<?php echo "$f[$n]";?>

You need to change the file name to your files names,
and you can add more images, just change where it say $n = rand(1,6); where "6" is the number of images you have.

You also need to add more links to your images the "X" is what you need to change to the sequence of files you have.


X => "http://tudominio.com/wp-content/themes/magiting/images/img9.jpg",

I hope this can help someone as help me, I find it on this blog (spanish)

Hair

Hello, I'm new at this. Is it possible to add a duration for this script? Let's say 24hrs before the image changes to another image. Or better yet, can I assign a specific image to a specific day?

Rai

Hello Hair,

For sure you can do that. I ear to my teacher say something about that in a project.

Rai.

treehouse : what would you like to learn today?

Forums

Randomize Background Image