Member Avatar for m2z

Hi there, please someone suggest a php code for changing site background image/color in every 30 minutes... I have 10 images 1.jpg to 10.jpg in www/images folder.

I have....

body {
    .... ... ...
        ... ... ...
    background: .... url('background.php') 50% 0 fixed;
    background-color: .....;
}

in style.css

what will be my php code in [B]background.php[/B].

I know some code which will change images randomly when reloading pages. But I need to change every 30 minutes...

background: #0facea url(back.php) no-repeat;
... ... ...
... ... ...
... ... ...
}

The code for back.php is :

<?php

header("Content-type: image/jpeg");
header("location:".'pictures/pictures_'.rand(1,6).'.jpg');
?>

Plz anyone reply...

Edited by TrustyTony because: fixed formatting
  • 3 Contributors
  • 3 Replies
  • 837 Views
  • 16 Hours Discussion Span
  • Latest Post Latest Post by Member #120589

Dani AI

Generated

A practical, low‑risk way is to have a tiny PHP script emit a CSS file that picks one of the 10 images based on the current 30‑minute slot and sets caching headers to expire exactly at the next slot. That avoids touching file timestamps, avoids maintaining dozens of hardcoded class rules, and prevents unnecessary reloads while guaranteeing the background will change on the half hour.

<?php
// background.css.php (serve after your main stylesheet)
$images = array_map(function($n){ return "images/{$n}.jpg"; }, range(1,10));
$slot = (int) floor(time() / 1800) % count($images);
$file = $images[$slot];
$nextBoundary = ((int) floor(time() / 1800) + 1) * 1800;
$ttl = max(0, $nextBoundary - time());
header('Content-Type: text/css; charset=UTF-8');
header('Cache-Control: public, s-maxage=' . $ttl . ', max-age=' . $ttl);
header('Expires: ' . gmdate('D, d M Y H:i:s', time() + $ttl) . ' GMT');
$bg = '#0facea';
echo "body { background-color: {$bg}; background-image: url('/{$file}'); background-position: 50% 0; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; }";
?>

Notes and troubleshooting

  • Link this script as a stylesheet after your main CSS so it can override defaults.
  • If the schedule must follow a particular timezone, compute the slot with DateTime and DateTimeZone instead of server time.
  • CDNs or shared proxies sometimes ignore very short max‑age values; include an s-maxage for shared caches or use CDN purge rules when you deploy.
  • The CSS change forces the browser to request the new image URL; image caching is separate from the CSS TTL, so set image headers if you need stricter control.
  • This avoids the file‑timestamp/touch approach suggested (which requires write permissions) and addresses the UX concern raised about frequent cosmetic changes; pick sensible defaults and a fallback color for users with images blocked.

Recommended Answers

All 3 Replies

Member Avatar for Member #120589

If you want to use CSS as opposed to a <img> tag, set a

class="<?php echo $class;?>"

on the body tag.

When you check the system time, calculate the half hours from midnight:

00:00-00:29 = 0
00:30-00:59 = 1

this can be done with a switch or multiple if/elseif

(I think you'll have 48-ish ranges). These values (0,1...) etc can then be used to set the classname in the body tag:

<body class="time_<?php echo $timevalue;?>">

Then your CSS can be something like:

body{
   /*default positions, sizes etc*/
}

.time_0{
   background-image: url('background1231.png');
   background-color: white;
}
.time_1{
   background-image: url('background4638.png');
   background-color: red;
}
..etc...

Just an idea. I have to say, I'd avoid this myself as it could confuse the hell out of an user - personally, I wouldn't like to peruse a site that was constantly changing . A casual browser may look at your site, think mmm that's useful and then try to come back to it, but doesn't recognize the page, so goes away dumbfounded. What about your 'identity' and feel? Colour schemes are extremely important - keep changing them at your peril.

Member Avatar for cereal

An alternative solution: use filectime(), each file saves 3 different dates: created, modified and access, with touch() or file_put_contents() you can change "modified" date without changing contents. Here is an example:

<?php
$a = glob('*.jpg', GLOB_NOSORT);
$b = array();
print_r($a); # all images
for($i = 0; $i < count($a); $i++)
{
    $time = filectime($a[$i]);
    $b[$time] = $a[$i];
}

$mx = max(array_keys($b));
$mn = min(array_keys($b));

if((time() - $mx) < 3) # at moment 3 seconds, 1800 = 30 minutes
{
    echo 'visible: ' . $b[$mx] . "\n";
}
else
{
    echo 'new: ' . $b[$mn];
    touch($b[$mn]); # update "inode change time"
}
echo "\n";
?>

In order to work you need to change the "modified" date to each image, you can run this script right before you start the above one:

<?php
$a = glob('*.jpg',GLOB_NOSORT); # remove second parameter to sort files
for($i = 0; $i < count($a); $i++)
{
     touch($a[$i]);
     sleep(2);
}
?>

After this, if you don't modify the images there will be always the same order. Every time the page is loaded the script will check for the latest updated "modified" date and if the difference between this value and the current time is higher than 30 minutes (3 seconds in my example) it will update the file with the oldest time, and so on, in loop.
bye :)

Member Avatar for Member #120589

JUst a thought wrt to CSS - leave the body tag with default stuff - and have the following:

//check time
have an array of images (48-ish or duplicates):

$imgs = array('img138.png','img42gh.png,...);
$month = date('n');
$year = date('Y');
$day = date('j');

$timesecs = time() - mktime(0,0,0,$month,$day,$year);
$timevalue = floor($timesecs/1800); //to get value for 30min intervals
$img = $imgs[$timevalue];

then in head area AFTER the css file reference

<style>
  body{
    background-image: url(images/<?php echo $img;?>);
  }
</style>
Edited by Member #120589 because: n/a
commented: really great, this can help to display desired images at defined hours +7
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.