I was creating a new website and decided to use a Website Baker template I had previously made as a base.
This template used the a bit of PHP code you can find on www.alistapart.com/d/randomizer/rotate.txt which automatically randomly rotates between images in a specified directory.
However for the new website this was not what I needed. I wanted to change the background of the page automatically, but not randomly.
My solution was the following.
Step 1: I modified Website Baker’s frontend.functions.php file, which you can find in the framework folder and added the following function to display the page id:
// Function for page id
if (!function_exists('page_id')) {
function page_id($spacer = ' - ', $template = '[PAGE_ID]') {
$vars = array('[PAGE_ID]');
$values = array(PAGE_ID);
echo str_replace($vars, $values, $template);
}
}
Step 2: I added the css code to the header of my index.php template file (this way the background image loads properly and I am easily able to use the page_id function):
<style type="text/css">
#my_div { background-image:url(<?php echo TEMPLATE_DIR; ?>/theimagesdirectory/<?php page_id();?>.jpg);}
</style>
and pointed it to the images directory containing the images.
Now I can just put an image into the images directory and name it XX.jpg (where XX is the corresponding page id) to control what image is being displayed for a certain page.
Of course there might be easier ways of doing this, but I am not a seasoned PHP developer, so I tend to go with whatever I can get to work….. and this is working great for my specific needs.
Tip: There are also several ways of using php directly in your css file. One way I have been using, since I need to compress the CSS file anyway, is to put this code at the top of your css file:
<?php
header('Content-type: text/css');
ob_start("compress");
function compress($buffer) {
$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
$buffer = str_replace(array("\r\n", "\r", "\n", "\t", ' ', ' ', ' '), '', $buffer);
$buffer = str_replace('{ ', '{', $buffer);
$buffer = str_replace(' }', '}', $buffer);
$buffer = str_replace('; ', ';', $buffer);
$buffer = str_replace(', ', ',', $buffer);
$buffer = str_replace(' {', '{', $buffer);
$buffer = str_replace('} ', '}', $buffer);
$buffer = str_replace(': ', ':', $buffer);
$buffer = str_replace(' ,', ',', $buffer);
$buffer = str_replace(' ;', ';', $buffer);
return $buffer;
}
?>
And this in the bottom:
<?php ob_end_flush();?>
Change the extension of the file from .css to .php and load it in the header using: <link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR; ?>/css/style.php" />
There are many resources (http://websitetips.com/articles/optimization/css/crunch/ and http://forums.oscommerceproject.org/index.php?showtopic=691&pid=6347&st=0 to name a few) which show you how to compress your css files in this way with the added bonus that you can then use php code within your css stylesheets.
