Misc: Including php and conditional formatting/content

This exercise in advanced file inclusion was undertaken in order to try and incorporate some browser-specific tweaks to the css files for this wiki. However, it demonstrates what should prove to be a general technique by which php can be run inside a wiki page, in addition to affecting the whole site. Note that this all works because the php is served by a non-local (non-wikidot) server.

This includes an .html file from a non-local domain (that prints Testing iFrame PHP…), which first includes a .php file that masquerades as a .css file (included in the <head> section). The .php/.css file analyzes the browser type, and based on that, conditional css can be written out.

Source code for all 3 examples is included following the examples.

Example 1 shows a simple case where just the .css/.php file includes the browser-evaluation function, and uses it to color the first string red, and then reveal one of many divs containing a message about which browser you are using. The color of the message is also determined by the conditional css (green = IE, purple = Safari, blue = FireFox, black = other.) The file that includes it and is displayed is an .html file.

Example 2 shows the browser-evaluation function being broken out into a separate included .php file, so that it can be included and called not only by the .css/.php file, but from within the iframed file (which is now a .php file, not .html), so that rather than having many divs and revealing one, we conditionally print out and format the message based on the returned variables. This could be used to include different html content based on browser type. Cool, huh?

Example 3 is the final piece of this puzzle: the above two examples simply affect the contents of the iframe. How would you get this to be applied to the whole wiki? Simple: use the @import statement as the first line of your custom theme's css file (in the Site Manager) to import the .css/.php file. This example uses no iframes, simply custom divs inside this page. Therefore, it shows that the imported file and conditional compilation is being applied to the whole wiki.

Testing the imported file on local code…

You are running Opera.

You are running Internet Explorer.

You are running FireFox.

You are running Mozilla.

You are running Netscape.

You are running Safari.

Please note that credit for the browser evaluation code goes to the article: "No More CSS Hacks" - my contribution was figuring out how to make this work within wikidot, and also the idea of calling it from within the main file to conditionally include different html. - Stephen Kay

Example 1 source files:

Called like:

[[iframe http://www.yourdomain.com/CSS/iframe-example1.php frameborder="1" scrolling="no" height="70" width="650"]]
HTML Source (the iframed file "iframe-example1.php"):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>iframe php test</title>
<link href="/CSS/conditional-css1.php" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
    <div class="test">Testing iFrame PHP example 1...</div>
    <div class="browser opera">You are running Opera.</div>
    <div class="browser ie">You are running Internet Explorer.</div>
    <div class="browser firefox">You are running FireFox.</div>
    <div class="browser mozilla">You are running Mozilla.</div>
    <div class="browser netscape">You are running Netscape.</div>
    <div class="browser safari">You are running Safari.</div>
</body>
</html>
The included .css/.php file that evaluates the browser and does conditional css ("conditional-css1.php")
<?php
 
// this file is only required for the page
// "Misc: Including php and conditional formatting/content"
 
// taken and modified from this article: 
// http://www.stylegala.com/articles/no_more_css_hacks.htm
 
header("Content-type: text/css");
$d = detect();
$b = $d['browser'];
$v = $d['version'];
$o = $d['os'];
 
function detect()
{
    $browser = array ("IE","OPERA","NETSCAPE","FIREFOX","SAFARI", "MOZILLA");
    $os = array ("WIN","MAC","LINUX");
    $info['browser'] = "Unknown";
    $info['os'] = "Unknown";
    $info['version'] = "Unknown";
 
    $agent = strtoupper($_SERVER['HTTP_USER_AGENT']);
 
    foreach ($browser as $parent)
    {
        $s = strpos($agent, $parent);
        if ($s > -1)
        {
            $f = $s + strlen($parent);
            $version = substr($_SERVER['HTTP_USER_AGENT'], $f, 5);
            $version = preg_replace('/[^0-9,.]/','',$version);
 
            $info['browser'] = $parent;
            $info['version'] = $version;
            break;
        }
    }
    foreach ($os as $val)
    {
        if (eregi($val, $agent))
        {
            $info['os'] = $val;
            break;
        }
    }
    return $info;
}
echo ".test { color:#ff0000; }\n";
 
    // conditionally generated CSS - color the browser report
if ($b == "IE"){
    echo ".browser { color:#00ff00; }\n";
}else if ($b == "FIREFOX"){
    echo ".browser { color:#0000ff; }\n";
}else if ($b == "SAFARI"){
    echo ".browser { color:#ff00ff; }\n";
}else{
    echo ".browser { color:#000000; }\n";
}
    // conditionally reveal one of many divs containing a message
echo ($b =="OPERA") ? null : ".opera { display: none; }\n";
echo ($b =="IE") ? null : ".ie { display: none; }\n";
echo ($b =="FIREFOX") ? null : ".firefox { display: none; }\n";
echo ($b =="MOZILLA") ? null : ".mozilla { display: none; }\n";
echo ($b =="NETSCAPE") ? null : ".netscape { display: none; }\n";
echo ($b =="SAFARI") ? null : ".safari { display: none; }\n";
?>

Example 2 source files:

Called like:

[[iframe http://www.yourdomain.com/CSS/iframe-example2.php frameborder="1" scrolling="no" height="70" width="650"]]
HTML/PHP Source (the iframed file "iframe-example2.php"):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>iframe php test</title>
 
<link href="/CSS/conditional-css2.php" rel="stylesheet" type="text/css" media="screen">
 
</head>
    <body>
        <div class="test">Testing iFrame PHP...</div>
        <div class="browser">
            <?php
                // print out a message conditionally based on browser type.
                // color of text is controlled by conditionally generated css in included css file
            require("browser-eval.php");
            $d = detect();
            $b = $d['browser'];
            $v = $d['version'];
            $o = $d['os'];
            echo "You are running " . $b . ", version " . $v . ", on " . $o . " OS!<br>";            
            ?>
        </div>
    </body>
</html>
The browser evaluation code ("browser-eval.php")
<?php
 
// taken and modified from this article: 
// http://www.stylegala.com/articles/no_more_css_hacks.htm
 
function detect()
{
    $browser = array ("IE","OPERA","NETSCAPE","FIREFOX","SAFARI","MOZILLA");    // order important
    $os = array ("WIN","MAC","LINUX");
    $info['browser'] = "Unknown";
    $info['os'] = "Unknown";
    $info['version'] = "Unknown";
 
    $agent = strtoupper($_SERVER['HTTP_USER_AGENT']);
 
    foreach ($browser as $parent)
    {
        $s = strpos($agent, $parent);
        if ($s > -1)
        {
            $f = $s + strlen($parent);
            $version = substr($_SERVER['HTTP_USER_AGENT'], $f, 5);
            $version = preg_replace('/[^0-9,.]/','',$version);
 
            $info['browser'] = $parent;
            $info['version'] = $version;
            break;
        }
    }
    foreach ($os as $val)
    {
        if (eregi($val, $agent))
        {
            $info['os'] = $val;
            break;
        }
    }
    return $info;
}
 
?>
The included .css/.php file that does conditional css ("conditional-css2.php")
<?php
header("Content-type: text/css");
 
require("browser-eval.php");
 
$d = detect();    
$b = $d['browser'];
$v = $d['version'];
$o = $d['os'];
 
// just to see if this is being called, color the first line
echo ".test { color:#ff0000; }\n";
 
// conditionally generated CSS - color the browser report
if ($b == "IE"){
    echo ".browser { color:#00ff00; }\n";
}else if ($b == "FIREFOX"){
    echo ".browser { color:#0000ff; }\n";
}else if ($b == "SAFARI"){
    echo ".browser { color:#ff00ff; }\n";
}else{
    echo ".browser { color:#000000; }\n";
}
?>

Example 3 Source Code

In the wiki's custom css theme, first line:
@import url(http://www.yourdomain.com/CSS/conditional-css1.php);

Note: this example uses the conditional-css1.php file from Example 1 above, but it could just as well be configured to use the conditional-css2.php file, so that the results of the detect() function could be accessed in other iframed files.
Inside this page
[[div class="test"]]
Testing the imported file on local code...
[[/div]]
[[div class="browser opera"]]
You are running Opera.
[[/div]]
[[div class="browser ie"]]
You are running Internet Explorer.
[[/div]]
[[div class="browser firefox"]]
You are running FireFox.
[[/div]]
[[div class="browser mozilla"]]
You are running Mozilla.
[[/div]]
[[div class="browser netscape"]]
You are running Netscape.
[[/div]]
[[div class="browser safari"]]
You are running Safari.
[[/div]]
Specific Problem and Solution:

When using the @import command, it appears that it must be at the beginning of the main theme's css file. I could not get it to work anywhere else. This hurts the concept of having just a few browser-specific overrides in the conditional file, since they all now come before the main css file and will be counter-acted by the main css.

The solution: Find the location of your site's main .css file by viewing the source (it will be something like "yourwiki.wikidot.com/local—theme/theme-name-4/style.css?148"), and then make a new theme and apply it to your site, based on the "base" theme, and it simply has the following in it. First import your main .css file, then import the browser-specific code and overrides:

/* the wiki's main css file first */
@import url(http://yourwiki.wikidot.com/local--theme/theme-name-4/style.css?148);
/* then the browser specific tweaks and overrides */
@import url(http://www.yourdomain.com/CSS/conditional-css1.php);
page-creation
page revision: 42, last edited: 18 Nov 2017 23:43
Edit Rate (+1) Tags Discuss (0) History Files Print Site tools + Options
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-NonCommercial-NoDerivs 3.0 License