Jon Plummer » Plugins http://jonplummer.com Interface and interaction designer Mon, 14 Sep 2009 12:17:38 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Updated Today “Lite” v0.2: slight tweaks should be more compatible http://jonplummer.com/archives/109 http://jonplummer.com/archives/109#comments Tue, 01 May 2007 04:41:22 +0000 Jon Plummer http://jonplummer.com/archives/109 Chris K was kind enough to review the tweaks I had made to his original Updated Today plugin . He endorsed the removal of pngfix.js but complained that my use of bloginfo() caused the new plugin to fail on his WordPress install. He also revealed his intent to make certain features of the plugin available to an admin page, requiring that portions of the output be salted away in variables for future manipulation. I was also dissatisfied with the amount of repetition in my otherwise very short plugin.

Here is the new code: 

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

/* config variables (later to be made available to an admin menu) */
 
$UTL['element']    = 'div';
$UTL['elementId']  = 'updated';
$UTL['imageUrl']   = get_bloginfo('url') . '/wp-content/plugins/updatedtodaylite/updatedbanner.png';
$UTL['style']      = 'position: absolute; display: block; top: 0px; left: 0px; height: 120px; width: 120px; z-index: 99;';
 
/* set up the action */
 
function showUpdateBanner() {
    global $UTL;
	$today = date("Y-m-d");
    $query = "SELECT post_date, id FROM wp_posts WHERE wp_posts.post_date LIKE '" . $today . "%'"; //will need to sort by date/time to enable the element to be a link to the most recet content
    $results = mysql_query($query);
    if (mysql_num_rows($results) > 0) {
	    $msieRegex = '/msie\s(5\.[5-9]|[6]\.[0-9]*).*(win)/i';
		if( isset($_SERVER['HTTP_USER_AGENT']) && preg_match($msieRegex,$_SERVER['HTTP_USER_AGENT']) && !preg_match('/opera/i',$_SERVER['HTTP_USER_AGENT']) ) {
			$UTL['style'] .= " filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=\"$UTL[imageUrl]\")";
		}
		else {
			$UTL['style'] .= " background-image: url($UTL[imageUrl])";
		}
		echo "<$UTL[element] id=\"$UTL[elementId]\" style=\"$UTL[style]\"></$UTL[element]>";
	}
}
 
/* make it happen */
 
add_action('wp_footer', 'showUpdateBanner');

This has the following improvements over my previous attempt:

  • You can choose what sort of element to wrap the image in.
  • Uses get_bloginfo() rather than bloginfo() to prevent parsing errors
  • Exposes inline styles, element type, element ID, and image URL as variables
  • These config variables are wrapped up in an array to prevent stepping on toes
  • USER_AGENT condition adds only the appropriate style to the inline styles
  • Tolerant of an empty style variable, allowing folks to handle placement in a separate stylesheet if they like
  • We only output any HTML once in the script

Still not much to it. Download the new plugin: Updated Today “Lite” v0.2

In the future, it would be nice to:

  • Make this a clickable link to the most recent article, ideally on a page containing all recent content.
  • Make it appear if the site has been updated in the past 23 hours or so, since I like to post at night, causing the banner to be visible for a only few hours at most.
]]> http://jonplummer.com/archives/109/feed 0 Updated Today “Lite” – A lesser and lighter version of the “Updated Today” WordPress plugin http://jonplummer.com/archives/101 http://jonplummer.com/archives/101#comments Tue, 24 Apr 2007 13:39:39 +0000 Jon Plummer http://jonplummer.com/archives/101 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” .

]]> http://jonplummer.com/archives/101/feed 3