Tag Archives: css

Ardamis in 2012 – new look, more microdata, faster code

How to compress .php, .css and .js files without mod_gzip or mod_deflate

File compression is possible on Apache web hosts that do not have mod_gzip or mod_deflate enabled, and it’s easier than you might think.

A great explanation of why compression helps the web deliver a better user experience is at betterexplained.com.

Two authoritative articles on the subject are Google’s Performance Best Practices documentation | Enable compression and Yahoo’s Best Practices for Speeding Up Your Web Site | Gzip Components.

Compressing PHP files

If your Apache server does not have mod_gzip or mod_deflate enabled (Godaddy and JustHost shared hosting, for example), you can use PHP to compress pages on-the-fly. This is still preferable to sending uncompressed files to the browser, so don’t worry about the additional work the server has to do to compress the files at each request.

Option 1: PHP.INI using zlib.output_compression

The zlib extension can be used to transparently compress PHP pages on-the-fly if the browser sends an “Accept-Encoding: gzip” or “deflate” header. Compression with zlib.output_compression seems to be disabled on most hosts by default, but can be enabled with a custom php.ini file:

[PHP]

zlib.output_compression = On

Credit: http://php.net/manual/en/zlib.configuration.php

Check with your host for instructions on how to implement this, and whether you need a php.ini file in each directory.

Option 2: PHP using ob_gzhandler

If your host does not allow custom php.ini files, you can add the following line of code to the top of your PHP pages, above the DOCTYPE declaration or first line of output:

<?php if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler"); else ob_start(); ?>

Credit: GoDaddy.com

For WordPress sites, this code would be added to the top of the theme’s header.php file.

According to php.net, using zlib.output_compression is preferred over ob_gzhandler().

For WordPress or other CMS sites, an advantage of zlib.output_compression over the ob_gzhandler method is that all of the .php pages served will be compressed, not just those that contain the global include (eg.: header.php, etc.).

Running both ob_gzhandler and zlib.output_compression at the same time will throw a warning, similar to:

Warning: ob_start() [ref.outcontrol]: output handler ‘ob_gzhandler’ conflicts with ‘zlib output compression’ in /home/path/public_html/ardamis.com/wp-content/themes/mytheme/header.php on line 7

Compressing CSS and JavaScript files

Because the on-the-fly methods above only work for PHP pages, you’ll need something else to compress CSS and JavaScript files. Furthermore, these files typically don’t change, so there isn’t a need to compress them at each request. A better method is to serve pre-compressed versions of these files. I’ll describe a few different ways to do this, but in both cases, you’ll need to add some lines to your .htaccess file to send user agents the gzipped versions if they support the encoding. This requires that Apache’s mod_rewrite be enabled (and I think it’s almost universally enabled).

Option 1: Compress locally and upload

CSS and JavaScript files can be gzipped on the workstation, then uploaded along with the uncompressed files. Use a utility like 7-Zip (quite possibly the best compression software around, and it’s free) to compress the CSS and JavaScript files using the gzip format (with extension *.gz), then upload them to your server.

For Windows users, here is a handy command to compress all the .css and .js files in the current directory and all sub directories (adjust the path to the 7-Zip executable, 7z.exe, as necessary):

for /R %i in (*.css *.js) do "C:Program Files (x86)7-Zip7z.exe" a -tgzip "%i.gz" "%i" -mx9

Note that the above command is to be run from the command line. The batch file equivalent would be:

for /R %%i in (*.css *.js) do "C:Program Files (x86)7-Zip7z.exe" a -tgzip "%%i.gz" "%%i" -mx9

Option 2: Compress on the server

If you have shell access, you can run a command to create a gzip copy of each CSS and JavaScript file on your site (or, if you are developing on Linux, you can run it locally):

find . -regex ".*(css|js)$" -exec bash -c 'echo Compressing "{}" && gzip -c --best "{}" > "{}.gz"' ;

This may be a bit too technical for many people, but is also much more convenient. It is particularly useful when you need to compress a large number of files (as in the case of a WordPress installation with multiple plugins). Remember to run it every time you automatically update WordPress, your theme, or any plugins, so as to replace the gzip’d versions of any updated CSS and JavaScript files.

The .htaccess (for both options)

Add the following lines to your .htaccess file to identify the user agents that can accept the gzip encoded versions of these files.

<files *.js.gz>
  AddType "text/javascript" .gz
  AddEncoding gzip .gz
</files>
<files *.css.gz>
  AddType "text/css" .gz
  AddEncoding gzip .gz
</files>
RewriteEngine on
#Check to see if browser can accept gzip files.
ReWriteCond %{HTTP:accept-encoding} gzip
RewriteCond %{HTTP_USER_AGENT} !Safari
#make sure there's no trailing .gz on the url
ReWriteCond %{REQUEST_FILENAME} !^.+.gz$
#check to see if a .gz version of the file exists.
RewriteCond %{REQUEST_FILENAME}.gz -f
#All conditions met so add .gz to URL filename (invisibly)
RewriteRule ^(.+) $1.gz [QSA,L]

Credit: opensourcetutor.com

I’m not sure it’s still necessary to exclude Safari.

For added benefit, minify the CSS and JavaScript files before gzipping them. Google’s excellent Page Speed Firefox/Firebug Add-on makes this very easy. Yahoo’s YUI Compressor is also quite good.

Verify that your content is being compressed

Use the nifty Web Page Content Compression Verification tool at http://www.whatsmyip.org/http_compression/ to confirm that your server is sending the compressed files.

Speed up page load times for returning visitors

Compression is only part of the story. In order to further speed page load times for your returning visitors, you will want to send the correct headers to leverage browser caching.

I want this CSS IS AWESOME coffee mug

Correcting for line descent in Firefox

4 Replies

I was working on a theme for the image gallery Plogger when an old problem cropped up again. I was adding links to thumbnail images, and had given the anchor a padding of 3 pixels and a 1 pixel border so that the link formed a sort of picture frame around the image. It looked fine in IE7, with a consistent 3 pixels of space on all 4 sides of the image between the image and the anchor’s border. But in Firefox, the top and sides had 3 pixels of space between the image and the anchor’s border, but the bottom had 5 pixels of space. For some reason, an additional 2 pixel gap was appearing below the image, between the image and the bottom border of the anchor.

This extra CSS space below images wrapped in anchor tags had plagued me in the past, and I had always just found a work-around, such as applying the padding and/or border to the image. But this time, I decided to figure out what was going on. I Googled for awhile and finally hit on a forum thread that explained the fix. As it turns out, Firefox allows for something called ‘line descent’, which, in typography, is the amount of space below the baseline of a font.

Most scripts share the notion of a baseline: an imaginary horizontal line on which characters rest. In some scripts, parts of glyphs lie below the baseline. The descent spans the distance between the baseline and the lowest descending glyph in a typeface, and the part of a glyph that descends below the baseline has the name “descender”.

http://en.wikipedia.org/wiki/Typeface

So the descender would be the lowest portion of lowercase letters such as ‘g,’ ‘j,’ ‘p.’ ‘q,’ and ‘y’. Why Firefox wants to accommodate that by adjusting the bottom of an anchor tag remains a mystery to me.

The fix is to add img {vertical-align: bottom;} where appropriate to your CSS. In practice, it eliminates the CSS space under the image in Firefox by pulling up the bottom of the anchor, rather than by pushing down the image. There is no apparent change in IE7.

Plogger 3 theme: Air

16 Replies

Air is a full-featured Plogger 3 stand alone theme that takes visual cues from the Yahoo! TV beta of mid 2007. The theme files validate as XHTML 1.0 Strict (while Plogger itself is either Strict or Transitional, depending on some options). The theme looks nearly identical in Firefox 2.0 and Internet Explorer 7, and uses conditional CSS to be very similar in IE6. A version of this theme is included in the official Plogger 3 build, released on 7/10/07.

The fundamental changes are:

The theme template files are now primarily HTML with some PHP, rather than being entirely written in PHP. This will make it easier for people with basic knowledge of HTML to further customize the theme.
The compatibility with Internet Explorer 7 has been greatly improved. Among other things, a new float and clear bug introduced in IE 7 has been avoided. The theme is inherently much more stable and less prone to breaking in different browsers.

Note that this theme is only for use with Plogger 3. If you’re using an earlier version, it’s recommended that you upgrade.

Download the stable version (v0.1)

Download the latest stable version of the Plogger 3 Air theme here. Because I tend to tinker with things, the files here will probably be slightly more up-to-date than those bundled with the full Plogger download.

Download the “Air” Plogger 3 theme

Download the beta version (v0.2 beta)

If you don’t mind the occasional bug or glitch, download the beta version to get a look at some new features. The album view in v0.2 beta supports centered thumbnails and can be set to display each picture’s date when no description exists – take a look at album.php for commented instructions. I’ve posted some documentation regarding the method for centering the thumbnails at Centering the thumbnails in Plogger. The code should work for any fixed-width theme derived from the default, but the method could be adapted to center many other layouts that use floated list items instead of tables.

Download the “Air” Plogger 3 theme – beta

Halo 3 Service Record WordPress Plugin

19 Replies

Update 7/31/10: I no longer support this plugin and have removed it from the site. You can still download the code, if you like, but it needs to be updated before it will work correctly.

This plugin allows you to add information from your Halo 3 Service Record to your WordPress blog.

The plugin displays your emblem, rank and grade, but with a little editing it could also display total the total number of games played, the date and time of the last game played, and any other information on the Halo 3 Service Record page at Bungie.net.

Installation

The download includes:

ardamis-halo3.php (put this in your /plugins/ directory)
halo3stats.css (copy and paste the contents into your theme’s style.css)

The plugin attempts to create a text file (halo3_cache_YOURTAG.txt) for use as a cache in your blog’s root folder automatically. Some server configurations may not permit the plugin to create this file and you’ll see resultant errors; in this case, you may have to manually create a file with that name and upload it to your blog’s root (and perhaps set permissions).

Usage

The plugin accepts one argument: your gamertag.

Insert the code:

<?php if (function_exists('ardamis_halo3')) ardamis_halo3('YOURTAG'); ?>

into a template file wherever you want the Service Record to appear, replacing YOURTAG with your actual Xbox Live gamertag, ex.:

<?php if (function_exists('ardamis_halo3')) ardamis_halo3('ardamis'); ?>

Download

Get the files here: (Current version: 1.0 beta)

Download the Halo 3 WordPress Plugin

How can I add the Service Record to a post?

Thanks to a really neat plugin, The Execution of All Things, you can call functions from any activated plugin from within a post. Once you have both the Halo 3 Service Record plugin and the wp-exec plugin installed, you can include the sig in a post with the line:

<exec type="function" name="ardamis_halo3" params="YOURTAG" />

Xbox 360 Gamercard WordPress Plugin

87 Replies

Update 2.9.11: Kevin Fell has taken up the challenge of maintaining this plugin. Please find the latest release that works with the post January 20, 2011 update at http://www.kevin-fell.co.uk/development/x-box-360-gamercard-wordpress-plugin/.

Update 1.24.11: I realize the January 20, 2011 update to the gamercard has broken the plugin. Basically, the plugin expects the HTML of the gamercard to be exactly so, and the HTML of the new card doesn’t match the plugin’s expectations. I don’t know if I’ll update the plugin to work with the new gamercard.

I’ve put together a WordPress plugin that will display a customizable XHTML and CSS Xbox 360 gamer card. There are plenty of sites out there that will make good looking gamer cards using image files, but this method will give you complete control over the appearance. It also acts like a gamer card, with a link to your Xbox Live profile and “compare to” links to your five most recently played games, something the image file cards can’t do.

XHTML and CSS Xbox Gamercard WordPress Plugin

For those of you who want a raw PHP script with the same functionality, I’ve included one farther down in the post.

How the plugin works

The plugin uses cURL, a command line tool for transferring files with URL syntax, to read the contents of your Xbox Live gamer card from http://gamercard.xbox.com/YOURTAG.card into a string, and then uses the PHP function preg_match to perform regular expression matching on that string. The various elements of your gamer card are extracted and then assigned to variables for later output.

The plugin attempts to create a unique text file for each gamertag (gamercard_cache_YOURTAG.txt) for use as a cache in your blog’s root folder automatically. This is done to reduce the number of times the target HTML page must be accessed and parsed and therefore reduce server load and page load time. Some server configurations may not permit the plugin to create this file and you’ll see resultant errors; in this case, you may have to upload a file with that name and perhaps set permissions on the file. You can edit the plugin to adjust how old the cache can grow before the script refreshes the information from gamercard.xbox.com.

Usage

The plugin accepts two arguments: the first is your gamertag; the second, which is optional, toggles whether the recently played games are displayed.

Insert the code:

<?php if (function_exists('gamercard')) gamercard('YOURTAG'); ?>

into a template file wherever you want the gamer card to appear, replacing YOURTAG with your actual Xbox Live gamertag, ex.:

<?php if (function_exists('gamercard')) gamercard('ardamis'); ?>

You can include multiple, different gamer cards on each page.

Customization

To show the recently played games icons, add the “full” argument, ex.:

<?php if (function_exists('gamercard')) gamercard('ardamis', full); ?>

Do whatever you want with the CSS to integrate the gamer card into your site.

Installation

The download includes:

xbox-gamercard.php (put this in your /plugins/ directory)
gamercard.css (copy and paste the contents into your theme’s style.css)
/gc_images/ (optional – put this folder of reputation images in your WordPress theme’s /images/ folder if you want to use them)

The plugin by default now uses the gold stars with transparent background from the ‘mini-card’ in the top navigation of http://www.xbox.com/. The rep image is a transparent .png, however. If you’re worried that people using IE6 will see an ugly rep because of IE6′s lack of support for transparent .png, you may want to edit the plugin to use a different rep image. It’s easy.

a screen shot of the ‘mini-card’ from Xbox.com

The optional ‘gc_images’ folder contains 20 images, one for each reputation rank, to replace the default gamercard gauge. They are based on the gauge used in the smaller, menu bar gamercard on the old http://live.xbox.com/ site, but with transparent backgrounds instead of gray for greater flexibility. You don’t need to use these, of course. I’ve written 3 variables into the plugin if you want to use the official Xbox rep images. Just edit the plugin to replace $navgamerrep in the output with one of the other variables. (Seriously, it’s easy.)

Download (beta 1.3)

Get the files here:

Download the Xbox 360 Gamer Card WordPress Plugin

I’m getting an error message

If your server does not have cURL enabled, you’ll get an error message that reads something like Fatal error: Call to undefined function curl_init() in PATHwp-contentpluginsxbox-gamercard.php on line 54. The best solution is to ask your host to enable cURL. If that option is unavailable, I’ve provided an alternative that uses the function file_get_contents(), but a number of hosts have disabled the URL retrieving capabilities in file_get_contents() for security reasons. Download the FGC Gamer Card WordPress Plugin only if you’re getting an error message with the regular download.

Can I get this as a WordPress Widget?

Honestly, the plugin is much more flexible than a widget. Widgets are limited to your sidebar, while the plugin can be used in any template. Installing the plugin isn’t very complicated, either. So, in short, there are no plans to adapt this as a widget right now.

How can I use this on a non-WordPress site?

Download the Xbox 360 Gamer Card Stand-alone Script

Just PHP include the xbox-gamercard-standalone.php script wherever you want the card to be displayed, adjusting the path to the reputation images. Add the contents of gamercard.css to your main CSS file, and modify to suit your site.

Be aware that message boards and forums (eg: vBulletin forums) won’t allow you to use PHP as part of your post or signature. In short, don’t expect this method to work anywhere but on your own site.

You can either edit the script to use your gamertag, or call the script with the line:

<?php include 'PATH-TO-SCRIPT/xbox-gamercard-standalone.php?tag=YOURTAG'; ?>

To show the recent games, use:

<?php include 'PATH-TO-SCRIPT/xbox-gamercard-standalone.php?tag=YOURTAG&full=full'; ?>

Obviously, you’ll replace ‘YOURTAG’ with your gamertag. If you have any spaces in your gamertag, replace each space with %20.

Further customization (optional)

A number of neat image and Flash sigs contain way more information than just what’s provided at http://gamercard.xbox.com/YOURTAG.card, but as far as I can tell, it’s all gathered in the same way. If there’s something you’d like added to the script, find a page that contains the information and post a comment about it, or give programming a shot yourself…

View the source code of the target page and locate the data you wish to extract. What we want to do is identify everything but the desired data. Isolate the desired data within the source code of the target page by copying everything from the first character before the data back to and including something unique, such as a div’s id. Paste that into a preg_match line as the first half of the pattern that the script will look for. Follow that with the characters (.+?), a bit of code that represents the data we want to extract. Do not copy the actual desired data from the target page into the modified script. Last, select and copy a few characters immediately after the data, such as the closing div, and paste that after the (.+?). Everything in between the two copied strings—the stuff now represented by the (.+?) characters—will be assigned to a variable.

Credits

Thanks to Constantin Hofstetter for getting me started on this project and to Jeremy at 360gamerCards.com for eliminating the need for the Snoopy script, reducing the process to a single file and otherwise greatly simplifying the whole thing. And thanks to everyone who emailed or posted with error messages and other problems; it’s a better, more robust plugin because of your efforts.

My gamertag is ardamis, should you want to add me to your friends list and give me some positive feedback.

A WordPress Plugin for Title Case Capitalization

24 Replies

I’ve written a WordPress plugin that will convert the page title and post title to ‘title case’ capitalization. Title case is also often referred to as “headline style”, and incorrectly as “initial caps” or “init caps”. Title case means that the first letter of each word is capitalized, except for certain small words, such as articles, coordinating conjunctions, and short prepositions. The first and last words in the title are always capitalized.

This plugin may be useful if you’re trying to give the titles on your site a consistent appearance, but it’s no substitute for writing a good title. There are way too many exceptions and rules to make a simple script behave correctly all of the time.

The plugin is smart enough to not capitalize the following:

Coordinating conjunctions (and, but, or, nor, for)
Prepositions of four or fewer letters (with, to, for, at, and so on) (limited)
Articles (a, an, the) unless the article is the first word in the title

But the plugin isn’t perfect. It won’t capitalize an article that is the last word in the title. It fails on subordinating conjunctions. It conservatively de-capitalizes only some of the prepositions, hopefully reducing the chance of incorrect behavior. For example, it leaves the word over caps, because over can be an adverb, an adjective, a noun, or a verb (caps) or a preposition (not caps), and determining how a word is being used in a title is really beyond the scope of a humble plugin.

The plugin requires you to edit it for certain product names, like “iPod”, and cool-people names, like “Olivia d’Abo” or “Jimmy McNulty”. It’s not savvy enough to know that acronyms, like “HTML”, should be all caps unless they’re used in particular ways, such as in the case of “Using the .html Suffix”, unless you tell it. That said, editing the plugin for these particular words is very easy.

Even with all these limitations, it beats using CSS to {text-transform: capitalize} the titles or just applying PHP’s ucwords() to the entire thing. But I’m guessing that dissatisfaction with one or both of those two methods is what brought you to this page in the first place.

On the upside, it capitalizes any word following a semicolon or a colon, e.g.: “Apollo: A Retrospective Analysis”. It also capitalizes any word immediately preceded by a double or single quote, but only if you haven’t bypassed WordPress’s fancy quotes feature.

How it works

The plugin first finds all words that begin with a double or single fancy WordPress quote and adds a space behind the quote. It capitalizes all of the words in the title with ucwords(), then selectively de-capitalizes some of the words using preg_replace(). It then uses str_ireplace(), a case-insensitive string replace function, to correct the odd capitalization of certain other words. Finally, it removes the spaces behind the quotes.

The code

This is what the code looks like. It should be pretty easy to follow what’s happening.

<?php

function ardamis_titlecase($title) {
		$title = preg_replace("/&#8220;/", '&#8220; ', $title); // find double quotes and add a space behind each instance
 		$title = preg_replace("/&#8216;/", '&#8216; ', $title); // find single quotes and add a space behind each instance
		$title = preg_replace("/(?<=(?<!:|;)W)(A|An|And|At|But|By|Else|For|From|If|In|Into|Nor|Of|On|Or|The|To|With)(?=W)/e", 
'strtolower("$1")', ucwords($title));  // de-capitalize certain words unless they follow a colon or semicolon
		$specialwords = array("iPod", "iMovie", "iTunes", "iPhone", " HTML", ".html", " PHP", ".php"); // form a list of specially treated words
		$title = str_ireplace($specialwords, $specialwords, $title); // replace the specially treated words
		$title = preg_replace("/&#8220; /", '&#8220;', $title); // remove the space behind double quotes
		$title = preg_replace("/&#8216; /", '&#8216;', $title); // remove the space behind single quotes

		return $title;
}

add_filter('wp_title', 'ardamis_titlecase');
add_filter('the_title', 'ardamis_titlecase');

?>

Download

Download the plugin, upload it to your site, and activate it.

Download the Title Case Capitalization WordPress plugin

Further customization

The plugin won’t alter words written in all caps or CamelCase. You could use ucwords(strtolower($title)) to convert the entire $title to lowercase before applying ‘ucwords’. This may fix instances where someone has typed in a bunch of titles with the caps lock key on. But you’ll then have to compensate for words that should be all caps, like ‘HTML’, ‘NBC’, or ‘WoW’, in $specialwords.

An alternative using a ‘foreach’ loop

It’s possible to do something similar using a foreach loop. This isn’t as graceful, in my opinion, but I suppose it’s possible that someone may find it works better.

<?php

function ardamis_titlecase($title) {
	$donotcap = array('a','an','and','at','but','by','else','for','from','if','in','into','nor','of','on','or','the','to','with'); 
	// Split the string into separate words 
	$words = explode(' ', $title); 
	foreach ($words as $key => $word) { 
		// Capitalize all but the $donotcap words and the first word in the title
		if ($key == 0 || !in_array($word, $donotcap)) $words[$key] = ucwords($word); 
		if (preg_match("/^&#8220;/", $word))
			$words[$key] = '&#8220;' . ucwords(substr($word, 7));
		elseif (preg_match("/^&#8216;/", $word))
			$words[$key] = '&#8216;' . ucwords(substr($word, 7));
	} 
	// Join the words back into a string 
	$newtitle = implode(' ', $words); 
	return $newtitle; 
}

add_filter('wp_title', 'ardamis_titlecase');
add_filter('the_title', 'ardamis_titlecase');

?>

Credits

Thanks to Chris for insight into the preg_replace code at http://us2.php.net/ucwords. Thanks to Thomas Rutter for insight into the foreach code at SitePoint Blogs » Title Case in PHP.