[Css trick] Random background image

Kosse · Post by **Kosse** » Mon 2. Apr 2007, 10:57

Hi guys,

I made a random image rotator, it's quite easy. This is not a hack, just an implementation.

It work sthe same (almost) as the {RANDOM:folder} but because I wanted it as a CSS background-image I had to do the following: I put in the HEADER (in templates of backend) the following code:

Code: Select all

<style type="text/css" media="screen">
#info {
	background-image: url(/picture/footer/[PHP] echo ("footer".rand(0,15).".jpg")[/PHP]) ;
}
</style>

1) Where you put all the pictures in /picture/footer (you can also put it in another folder, just change path).
2) You need to put 15 images (or change 0,15)
3) you need to name them footer1.jpg, footer2.jpg, etc. As long as it is ' footer NUMBER . jpg ' (if you want to use .gif, just change jpg with gif in the [PHP] and put only .gif images in your folder

4) The background image applies to the div #info, you can of course use your own css names, just change #info to #yourname.

You can see it in the header at http://www.exil.be/index.php?fr_history (WIP: I used the same images in footer and header, but in header it is the PHP random and in the footer the replacement tag {RANDOM:picture/footer} )

Voilà, maybe you can use it too, have fun.

Cheers

pepe · Post by **pepe** » Tue 3. Apr 2007, 00:22

Hi Kosse,

i'm shure, you will become one of the GREAT phpWCMS-gurus.... it's a question of time only!

I LIKE it very much... because it's so SIMPLE... AND WORKS!
That's the real art of programming! 3 lines of code... and up it goes!
You are a real GENIOUS!

I have seen it 5 minutes ago... and it's just running in one of my sites

So.. thanks again!

Kosse · Post by **Kosse** » Tue 3. Apr 2007, 12:14

pepe wrote:Hi Kosse,

i'm shure, you will become one of the GREAT phpWCMS-gurus.... it's a question of time only!

I LIKE it very much... because it's so SIMPLE... AND WORKS!
That's the real art of programming! 3 lines of code... and up it goes!
You are a real GENIOUS!

I have seen it 5 minutes ago... and it's just running in one of my sites So.. thanks again!

nice you liked it pepe

I've been using your php code snippet strip_prefix on almost all my sites, so what you give, you recieve back

And as for being a guru, well... humble humble, I know a bit about phpwcms yes, but not a 'guru' :p
All best,
Cheers

StudioZ · Post by **StudioZ** » Wed 4. Apr 2007, 17:29

Hi Kosse

Just like Pepe said... love it when it is so simple

This is a really cool idea

Thank you for sharing

It proves again how well designed PhpWCMS is

Cheers,

Yves

Nordlicht · Post by **Nordlicht** » Thu 6. Sep 2007, 09:49

Is there anybody who figured out how to include a php sript
like the one below into a css-file for background?

Code: Select all

<?php 
switch($GLOBALS['content']['cat_id']) { 

case 1: echo '../images/header/headerR1C1.JPG'; break; 

default: echo '../images/header/headerR1C2.JPG'; 
} 
?>

heliotrope · Post by **heliotrope** » Fri 14. Sep 2007, 15:28

hello,
first, thanks a lot Oliver for this cms... it's an incredible tool...

I'm trying to insert random background on Body background..
Your hack seems ok , but what should I put instead of "#info" ???
where should I put php code : in "header"? in "content"? in "footer"????
I found nothing about this in thi ssupport forum.
Thanks in advance

heliotrope · Post by **heliotrope** » Mon 24. Sep 2007, 19:17

no one able to help me ???

DeXXus · Post by **DeXXus** » Mon 24. Sep 2007, 20:15

heliotrope wrote:no one able to help me ???

http://www.phpwcms.de/forum/viewtopic.php?t=15677

pSouper · Post by **pSouper** » Thu 27. Sep 2007, 22:19

Hi Kosse, Pepe et al.
Although Kosse has a nice'n'simple solution this script may help some people too...

Code: Select all

<?php
/*
	INSTRUCTIONS
	1. Modify the $folder setting in the configuration section below.
	2. Add image types if needed (most users can ignore that part).
	3. Upload this file (rotate.php) to your webserver.  I recommend
	   uploading it to the /tempaplte/inc_script/ folder.
	
usage 1. You may link to the file as you would any normal image file, like this:

example 1.		<img src="http://example.com/rotate.php">

useage 2. You can also specify the image to display like this:

example 2.		<img src="http://example.com/rotate.php?img=myPic.jpg">
		
		This would specify that an image named "myPic.jpg" located
		in the image-rotation folder should be displayed.
	
usage 3. You may also call this script directly from a css file :)
example 3. background: url(../inc_script/rotator.php) no-repeat center top;

*/
/* ------------------------- CONFIGURATION -----------------------
	Set $folder to the full path to the reletive location of your images fro mthe folder this file is save within.
	For example - in phpwcms you should save this file in: /template/inc_script/  SO, to use random images for your /template/img folder use... $folder = '../img/';
	If the rotate.php file will be in the same folder as your
	images then you should leave it set to $folder = '.';
*/
	$folder = '../img/rotator/';

    $extList = array();
	$extList['gif'] = 'image/gif';
	$extList['jpg'] = 'image/jpeg';
	$extList['jpeg'] = 'image/jpeg';
	$extList['png'] = 'image/png';
// You don't need to edit anything after this point.
// --------------------- END CONFIGURATION -----------------------

$img = null;

if (substr($folder,-1) != '/') {
	$folder = $folder.'/';
}

if (isset($_GET['img'])) {
	$imageInfo = pathinfo($_GET['img']);
	if (
	    isset( $extList[ strtolower( $imageInfo['extension'] ) ] ) &&
        file_exists( $folder.$imageInfo['basename'] )
    ) {
		$img = $folder.$imageInfo['basename'];
	}
} else {
	$fileList = array();
	$handle = opendir($folder);
	while ( false !== ( $file = readdir($handle) ) ) {
		$file_info = pathinfo($file);
		if (
		    isset( $extList[ strtolower( $file_info['extension'] ) ] )
		) {
			$fileList[] = $file;
		}
	}
	closedir($handle);

	if (count($fileList) > 0) {
		$imageNumber = time() % count($fileList);
		$img = $folder.$fileList[$imageNumber];
	}
}

if ($img!=null) {
	$imageInfo = pathinfo($img);
	$contentType = 'Content-type: '.$extList[ $imageInfo['extension'] ];
	header ($contentType);
	readfile($img);
}
?>

StudioZ · Post by **StudioZ** » Thu 27. Sep 2007, 22:27

PSouper wrote:I may be very hard to ignore but those whom know me best will tell you it's well worth the effort.

I can only agree with you and your fineprint

Hey! Thanks PSouper for sharing!

I love this community.

Cheers,

Yves

pSouper · Post by **pSouper** » Thu 27. Sep 2007, 23:12

it's been a long time and far less often than I'd like too but I too try to help - honest

take care Yves

mmgun999 · Post by **mmgun999** » Sat 2. Jan 2010, 15:27

I'm a bit of a rookie when it comes to css. I implemented your code in my site, but it doesn't work. Maybe it's because of the fact it can not be applied to the body background. I didn't put the info ID in a div tag, but in the body tag. Or maybe I need to have some kind of rotator.php code in my image-directory.

Code: Select all

<head>

<style type="text/css" media="screen">
#info {
   background-image: url(/images/skins/[PHP] echo ("skins".rand(0,25).".jpg")[/PHP]) ;
}
</style>

</head>

<body id="info">

Could you please help to correct it. I'd like to have a random background image on page load.

Post by **update** » Sun 3. Jan 2010, 13:43

You can try something like the following (or similar ones)

Code: Select all

<head>

<style type="text/css" media="screen">
body#info {
   background-image: url(/images/skins/[PHP] echo ("skins".rand(0,25).".jpg")[/PHP]) ;
}
</style>

</head>

<body id="info">

Perhaps this is working

Post by **flip-flop** » Sun 3. Jan 2010, 14:00

I can´t understand, how you create <body id="info">.
There is no way in newer versions to do so.

My suggestion:

E.g. have a look into the file .....template/inc_script/frontend_init/disabled/inject_body_id.php

With a small change it looks like this:
file: template/inc_script/frontend_init/inject_body_id_01.php

Code: Select all

<?php

// -----------------------------------------------------------------------------------
// Setup a body id and insert a little inline css snippet into the head area.
// -----------------------------------------------------------------------------------

$template_default['body']['id'] = 'bg-image';  // it will be produced always "bg-image[cat-id]"


   /* Hm I want to write some default CSS */
   $block['custom_htmlhead']['mycss']  = '  <style type="text/css">' . LF . '  <!--' . LF;
   $block['custom_htmlhead']['mycss'] .= '   #bg-image'.$content['cat_id'].' { ' . LF;
   $block['custom_htmlhead']['mycss'] .= '      background: transparent url(images/skins/skins'.rand(0,25).'.jpg) no-repeat left top;' . LF;
   $block['custom_htmlhead']['mycss'] .= '   }';
   $block['custom_htmlhead']['mycss'] .= LF . '  //-->' . LF . '  </style>';

?>

conf.inc.php:

Code: Select all

$phpwcms['allow_ext_init']    = 1;  //allow including of custom external scripts at frontend initialization

Output e.g.:

Code: Select all

<head>
...
...
<style type="text/css">
  <!--
   #bg-image3 { 
      background: transparent url(images/skins/skins7.jpg) no-repeat left top;
   }
  //-->
</style>
...
...
</head>

<body id="bg-image3">

Knut

Post by **update** » Sun 3. Jan 2010, 14:22

Or just try to drop the line

Code: Select all

$template_default['body']['class'] = 'mybody anotherNecessaryClass_';

into your /config/phpwcms/conf.template.default.inc.php file

Now you eventually could trigger it like this

Code: Select all

<head>

<style type="text/css" media="screen">
body.mybody {
   background-image: url(/images/skins/[PHP] echo ("skins".rand(0,25).".jpg")[/PHP]) ;
}
</style>

</head>

<body class="mybody anotherNecessaryClass_77">

...many ways to Rome...

give it a try!

EDITED because of some wrongly spelled parts

[Css trick] Random background image

[Css trick] Random background image

random background image via css

Re: [Css trick] Random background image

Re: [Css trick] Random background image

Re: [Css trick] Random background image

Re: [Css trick] Random background image