Tuesday 4/24/2007
Implementation, Plugins

Courtesy of Weblog Tools Collection comes Chris K ’s Updated Today plugin , which displays a banner at the top left of your WordPress blog if a post exists in the loop with today’s date as its post date. It is a simple and effective idea, and coded without much fuss; it uses the wp_head and wp_footer hooks to add styles to the page, write a SCRIPT tag, and conditionally write an IMG wrapped in a DIV . And it seems to work great.

Upon further inspection I noticed that the plugin relies on pngfix.js to make IE 5.5 and IE 6 show alpha transparency on the PNG used for the banner. This is necessary because of the nice drop shadow that on the “updated today” banner; that shadow has to work well overlaid on any content that happens to be present, so alpha blending is essential. pngfix.js iterates over all of the IMG elements in the document; whenever it finds a PNG it replaces that PNG with a SPAN and uses the Microsoft-proprietary DXImageTransform.Microsoft.AlphaImageLoader to display the PNG within that SPAN.

There’s nothing wrong with this technique, selectively used. But I didn’t want pngfix.js tromping all over my site rewriting my DOM just because I used PNGs. I like PNGs, and I don’t want them messed with willy-nilly. (Never mind that pngfix.js also does not pass jslint .) I wanted a quick fix that would not require this script.

I also wasn’t sure I wanted an additional stylesheet added to the page containing one selector and rules to style the added DIV . I could rip these styles out and place them in my own stylesheet, but in the interest of a quick fix, I decided to leave them in the plugin.

Here is the original PHP code for the plugin.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

/* ### Configuration Variables ### */
 
$conf_manual_placement = false;
$conf_manual_style = false;
$conf_use_pngfix = true;
 
/* ### End Configuration Variables ### */
 
$banneradded = null;
 
add_action('wp_head', 'ck_wp_head');
if (!$conf_manual_placement) {
    add_action('wp_footer', 'ck_wp_footer');
}
 
function ck_wp_head ()
{
    global $conf_manual_style, $conf_use_pngfix;
    if (!$conf_manual_style) {
        echo '<style type="text/css" media="screen"> #updated { position: absolute; display: block; top: 0px; left: 0px; height: 120px; width: 120px; z-index: 99; } </style>';
    }
    if ($conf_use_pngfix) {
        echo '<!--[if lt IE 7]><script defer type="text/javascript" src="wp-content/plugins/updatedtoday/pngfix.js"><!--[endif]-->';
    }
}
 
function updated_banner()
{
    $today = date("Y-m-d");
    $query = "SELECT post_date, id FROM wp_posts WHERE wp_posts.post_date LIKE '".$today."%'";
    $results = mysql_query($query);
    $num_results = mysql_num_rows($results);
    if ($num_results > 0) {
        $results_assoc = mysql_fetch_assoc($results);
        $postid = $results_assoc['id'];
	echo '<p id="updated"><img src="<?php bloginfo('url'); ?>/wp-content/plugins/updatedtoday/updated.png" border="0" /></p>';
    }
}
 
function ck_wp_footer ()
{
    updated_banner();
}

Not much to it, really, but more than I’d like. Near as I can tell, $banneradded is not used. That bit about $results_assoc = mysql_fetch_assoc($results); $postid = $results_assoc['id']; seems to be the beginnings of making the banner a link to the most recent post. To make sure that would work we’ll need to change the SELECT to ensure the results are sorted by date, so we’ll trim that for now, and leave it on the to-do list for a later version.

If we put the styles inline on the DIV and make the image a background of that DIV , we solve the transparency problem in IE for indexed PNGs without need of pngfix.js and eliminate our need to hook the wp_head event. But we’d like a nice dropshadow even in IE. The quickest way is to choose one of two similar DIV s, one containing the proprietary AlphaImageLoader CSS filter, based on PHP’s HTTP_USER_AGENT . This leaves the much shorter:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

add_action('wp_footer', 'showUpdatedBanner');
 
function showUpdatedBanner() {
    $today = date("Y-m-d");
    $query = "SELECT post_date, id FROM wp_posts WHERE wp_posts.post_date LIKE '".$today."%'";
    $results = mysql_query($query);
    $num_results = mysql_num_rows($results);
    if ($num_results > 0) :
        $msie='/msies(5.[5-9]|[6].[0-9]*).*(win)/i';
        if( isset($_SERVER['HTTP_USER_AGENT']) && preg_match($msie,$_SERVER['HTTP_USER_AGENT']) && !preg_match('/opera/i',$_SERVER['HTTP_USER_AGENT']) ) :
            echo("<div id=\"updated\" style=\"position: absolute; display: block; top: 0px; left: 0px; height: 120px; width: 120px; z-index: 99; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='" . bloginfo('url') . "/wp-content/plugins/updatedtodaylite/updatedbanner.png');\"></div>");
        else :
            echo("<div id=\"updated\" style=\"position: absolute; display: block; top: 0px; left: 0px; height: 120px; width: 120px; z-index: 99; background-image: url( " . bloginfo('url') . "/wp-content/plugins/updatedtodaylite/updatedbanner.png );\"></div>");
        endif;
    endif;
}

This is much simpler, does the same work, and can easily be altered to be more semantically appropriate (a topic for later). Download the new plugin: Updated Today “Lite” .