Page 1 of 3

[Css trick] Random background image

Posted: Mon 2. Apr 2007, 10:57
by Kosse
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

Posted: Tue 3. Apr 2007, 00:22
by pepe
Hi Kosse,

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

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 :lol: So.. thanks again!

Posted: Tue 3. Apr 2007, 12:14
by Kosse
pepe wrote:Hi Kosse,

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

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 :lol: So.. thanks again!
:oops: nice you liked it pepe :oops:
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

Posted: Wed 4. Apr 2007, 17:29
by StudioZ
Hi Kosse :wink:
Just like Pepe said... love it when it is so simple 8)
This is a really cool idea :D
Thank you for sharing :wink:
It proves again how well designed PhpWCMS is 8)

Cheers,

Yves

Posted: Thu 6. Sep 2007, 09:49
by Nordlicht
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'; 
} 
?>

Posted: Fri 14. Sep 2007, 15:28
by heliotrope
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

Posted: Mon 24. Sep 2007, 19:17
by heliotrope
no one able to help me ???

Posted: Mon 24. Sep 2007, 20:15
by DeXXus
heliotrope wrote:no one able to help me ???
http://www.phpwcms.de/forum/viewtopic.php?t=15677

random background image via css

Posted: Thu 27. Sep 2007, 22:19
by pSouper
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);
}
?>

Posted: Thu 27. Sep 2007, 22:27
by StudioZ
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 :wink:
Hey! Thanks PSouper for sharing! 8)
I love this community.

Cheers,

Yves

Posted: Thu 27. Sep 2007, 23:12
by pSouper
:) 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

Re: [Css trick] Random background image

Posted: Sat 2. Jan 2010, 15:27
by mmgun999
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.

Re: [Css trick] Random background image

Posted: Sun 3. Jan 2010, 13:43
by update
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 ;)

Re: [Css trick] Random background image

Posted: Sun 3. Jan 2010, 14:00
by flip-flop
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

Re: [Css trick] Random background image

Posted: Sun 3. Jan 2010, 14:22
by update
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 ;)