[Css trick] Random background image

Post custom hacks and enhancements for phpwcms here only. Maybe some of these things will be included in official release later.
User avatar
Kosse
Posts: 1066
Joined: Thu 9. Sep 2004, 12:08
Location: Brussels, Belgium
Contact:

[Css trick] Random background image

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
Posts: 3954
Joined: Mon 19. Jan 2004, 13:46

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

User avatar
Kosse
Posts: 1066
Joined: Thu 9. Sep 2004, 12:08
Location: Brussels, Belgium
Contact:

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

User avatar
StudioZ
Posts: 802
Joined: Fri 28. May 2004, 19:57
Location: Québec, Canada
Contact:

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

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
Image
PhpWCMS Evangelist, -- iRoutier.com Running phpWCMS 1.4.2, r354 -> Great Version!!!!

Nordlicht
Posts: 160
Joined: Wed 12. Apr 2006, 08:16
Location: Germany, near Hamburg
Contact:

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'; 
} 
?>

User avatar
heliotrope
Posts: 33
Joined: Fri 14. Sep 2007, 15:21

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

User avatar
heliotrope
Posts: 33
Joined: Fri 14. Sep 2007, 15:21

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

no one able to help me ???

User avatar
DeXXus
Posts: 2168
Joined: Fri 28. Nov 2003, 06:20
Location: USA - Florida

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

User avatar
pSouper
Posts: 1552
Joined: Tue 11. Nov 2003, 15:45
Location: London
Contact:

random background image via css

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);
}
?>

User avatar
StudioZ
Posts: 802
Joined: Fri 28. May 2004, 19:57
Location: Québec, Canada
Contact:

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 :wink:
Hey! Thanks PSouper for sharing! 8)
I love this community.

Cheers,

Yves
Image
PhpWCMS Evangelist, -- iRoutier.com Running phpWCMS 1.4.2, r354 -> Great Version!!!!

User avatar
pSouper
Posts: 1552
Joined: Tue 11. Nov 2003, 15:45
Location: London
Contact:

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
Posts: 1
Joined: Sat 2. Jan 2010, 15:17

Re: [Css trick] Random background image

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.

User avatar
update
Moderator
Posts: 6394
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: [Css trick] Random background image

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 ;)
It's mostly all about webdesign, logo design, new and old pages refresh, print BUT slowly switching to be supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.

User avatar
flip-flop
Moderator
Posts: 8178
Joined: Sat 21. May 2005, 21:25
Location: HAMM (Germany)
Contact:

Re: [Css trick] Random background image

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
Last edited by flip-flop on Sun 3. Jan 2010, 14:47, edited 2 times in total.
>> HowTo | DOCU | FAQ | TEMPLATES/DOCS << ( SITE )

User avatar
update
Moderator
Posts: 6394
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: [Css trick] Random background image

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 ;)
Last edited by update on Mon 4. Jan 2010, 14:24, edited 1 time in total.
It's mostly all about webdesign, logo design, new and old pages refresh, print BUT slowly switching to be supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.

Post Reply