thought-after.com » PHP

Recurring events calendar

Lafinboy — Thu, 27 Jul 2006 12:26:33 +0000

A recent project had a requirement to display a simple calendar of events. The events, growers markets and the like, were attended by the business owner so that people could buy coffee directly from him.

The majority of the events were recurring events with weekly and monthly frequencies. Putting these types of recurring events into calendar applications such as Outlook is easy, and some powerful combinations can be stored very easily. Trying to find an online version, a system that could plug in to an existing site, running PHP and MySQL, and generate hCalendar microformat events listings proved fruitless. So, armed with a whole flask of Huehuetenango, I set off to develop a simple system to suit my needs. The results can be seen live on the Mayan Coffee website.

The next step of the development is to allow for exceptions to recurring events, something that nobody seems to have managed elegantly, and then to package the whole thing up and release it for public consumption. But first I need to let this massive coffee buzz wear off!

CSS Random Background Image Rotation

Lafinboy — Fri, 26 May 2006 06:00:50 +0000

Edit: If you do not have access to the PHP source code on your site, try this random background image script generator

Here's something I've been playing with lately to add a little bit of visual dynamic interest to sites that don't have frequently changing content. The concept is not new – use image rotation to display random images on each page load. No great problem there, simply use a server-side script to select a random image. But what if your images are not content, are purely presentational, and are (read 'should be') background images?

Using PHP to retrieve a random image from a folder, we can generate dynamic CSS declarations through the page headers. This means we can change background images randomly on page load, and we can control which images are available by adding or removing them from the images folder.

First up we need to create the PHP script that will get the images from a folder, select a single image at random, and write the CSS declaration to the page header. Everything you need is in the following scripts, and all that needs customising is the path to your style and image folders. Copy and save this file as dynamic_css.php.

 /*** Random Background Images
http://www.thought-after.com/2006/05/26/css-random-background-image-rotation/
This file will display a random background image to any element targetted through a CSS id.
1) Place this file in the same location as your sites main stylesheet file.
2) In the head section of each page place the following @import statement.
@import url(/path/to/dynamic_css.php)
NOTE: the import must occur after all other style sheet links, imports and declarations to avoid this dynamic style being over-written.
3) Create a folder to hold the images to be used for the random backgrounds.
4) Assign values to the following variables to complete the setup
$imgFolder : the path from the sites root to the image folder created at 3 above example:
$imgFolder = "/images/random-images/";
$element : the css ID of the element to apply the background image to example:
$element = "header";
5)    That's it!! ***/
// Set up

$imgFolder = "/images/random-images/"; // the path from the sites root to the image folder created at 3 above

$element = "header"; // the css ID of the element to apply the background image to
// That's it!! Nothing below this line needs to be changed

$img = null;
// build up the path to the image folder

if (substr($imgFolder,0,1) != '/') { $imgFolder = '/'.$imgFolder; }

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

$path = $_SERVER['DOCUMENT_ROOT'] . $imgFolder;
// populate an array to hold valid file type extensions

$extList = array('gif','jpg','jpeg','png');
// create an array to hold the list of image files

$fileList = array();
// open a handle to the directory

$handle = opendir($path);
// loop through the contents of the directory

while ( false !== ( $file = readdir($handle) ) ) {

    // get the info for each file

    $file_info = pathinfo($file);

    // check that the file in in the allowed extensions array

    if ( in_array( strtolower( $file_info['extension'] ), $extList)    ) {

        // add the file to the array

        $fileList[] = $file; }

    }

    // close the handle to the directory

    closedir($handle);
    // if we have at least 1 file in the list

    if (count($fileList) > 0) {

        // select a random index from the file list array

        $imageNumber = time() % count($fileList);

       // assign the filename for that array index to the $img var

       $img = $imgFolder . $fileList[$imageNumber];
       $css = "#$element { background-image: url('".$img."'); }\n";
       // tell the browser what we're sending

       header('Content-type: text/css');

       // and write out the css 

       echo $css;

    }

?>

Now in the head of our HTML page import the dynamic css:

<style type="text/css">@import url("/path/to/dynamic_css.php");</style>

If you have set up your path correctly, which I'll admit always catches me out, then each page load should see a random background image displayed in the element specified in the dynamic CSS.

Obviously this method can be extended and modified to suit you exact circumstances. I currently pass page identifiers through the import statement as part of a querystring which then query a database for specific content, meaning I can specify a range of images for use on each page, and on each element on that page. The possibilities are seemingly endless, and only limited by your imagination.

Edit (16/07/2007): I've tidied the script up a little to make it easier to implement. Just a couple of documented steps to follow, and thats' it!!

Serving the correct MIME type

Lafinboy — Wed, 15 Mar 2006 22:49:18 +0000

Working with XHTML is all very commendable, but if the default (read wrong) MIME type is sent to the UA then you are still only sending HTML documents out to browserland. If this is the case you may as well work with the HTML doctype. So how do you send the correct MIME type for XHTML?

There are various methods depending on your situation. One can configure the server to send the correct MIME type based on file type, use httpd or htaccess files, or force the correct MIME type through the header of the page using your favourite server side code (ASP, PHP, .NET, et al). There's just one problem though – Internet Explorer currently doesn't support documents served with the

application/xhtml+xml MIME type. This is where we need to perform a negotiation between the server and browser about the media types the browser can accept, and which one it prefers.The basics of content negotiation are:

Server says hello to the browser, and ask if it can send it a page
Browser says hi back, and tells the server what media types it can accept, and of those which is it's preferred media type
Server get's the document in the browsers preferred format and send it out
Browser displays our correctly formatted page

So by evaluating the media types and relative weighting of each type we can determine whether the browser shoud be sent files as text/html or application/xhtml+xml.

A sample PHP content negotiation script is shown below:

$charset = "utf-8";

$mime = "text/html";

function xml2html($buffer) {

return (preg_replace("!\s*/>!", ">", $buffer));

}

if(stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml")) {

if(preg_match("/application\/xhtml\+xml;q=([01]|0\.\d{1,3}|1\.0)/i", $_SERVER["HTTP_ACCEPT"], $matches)) {

$xhtml_q = $matches[1];

if(preg_match("/text\/html;q=q=([01]|0\.\d{1,3}|1\.0)/i", $_SERVER["HTTP_ACCEPT"], $matches)) {

$html_q = $matches[1];

if((float)$xhtml_q >= (float)$html_q) {

$mime = "application/xhtml+xml";

}

}

} else {

$mime = "application/xhtml+xml";

}

}

if($mime == "application/xhtml+xml") {

$prolog_type = "< ?xml version=\"1.0\" encoding=\"$charset\" ?>\n< !DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">\n\n";

$meta_content = "\n";

} else {

ob_start("xml2html");

$prolog_type = "< !DOCTYPE html PUBLIC \"-//W3C//DTD HTML 4.01 Strict//EN\" \"http://www.w3.org/TR/html4/strict.dtd\">\n\n";

$meta_content = "\n";

}

header("Content-Type: $mime;charset=$charset");

header("Vary: Accept");

print $prolog_type;

?>