I used to think that the hardest part of scaling a website from one webserver to two webservers was sharing the sessions between the machines to keep the users logged in whichever machine they were served by. I was pleasantly surprized that it is possible to accomplish sharing sessions between two servers by changing only 5 lines in the php.ini file (the session.save_handler and session.save_path).

Here is a solution for RHEL 5.5:

1. Install memcached:
   • libmemcached is unfortunately not part of the RHEL standard packages so we have to install a third party repository first following instructions at http://blog.famillecollet.com/pages/Config-en.
   • Afterward installing the 3rd party repo, install libmemcached: sudo yum –enablerepo=epel –enablerepo=remi update memcached && sudo yum –enablerepo=epel –enablerepo=remi install libmemcached libmemcached-devel
2. Install the PHP memcache client: sudo pecl install memcache-3.0.3
3. Change in the php.ini file of both servers (e.g. /etc/php.ini) so that the PHP memcache client is used instead of session files:
   session.save_handler = files
session.save_handler = memcache
4. Add in the PHP memcache.ini file of both servers (e.g. /etc/php.d/memcache.ini) so that the PHP memcache client is configured to share sessions with redundancy and failover support:
   memcache.hash_strategy = consistent
memcache.allow_failover = 1
memcache.session_redundancy=2
session.save_path="tcp://192.168.0.1:11211, tcp://192.168.0.2:11211"

This approach shares sessions between both machines using RAM as storage. The PHP memcache client cleverly writes the session data to both machines so that if one machine fails all users will still be logged in when they are served by the remaining machine.

My exploration of this subject is documented on serverfault: can-a-pool-of-memcache-daemons-be-used-to-share-sessions-more-efficiently. My conclusion is that this method of session sharing is not the best approach but it is the simplest to set up.

In WordPress 3.0, my WordPress logo image (on the left) broke. So I opened a bug and six weeks and 100 bug comments later, I have upgraded to 3.01 and it is working again. Thanks guys!

The reason why the logo image was broken was quite interesting(?)… In v3.0 WordPress automatically started auto-correcting Wordpress to WordPress (i.e. Word-lowercase-p-ress to Word-uppercase-P-ress) and because my image file name was called “WordpressLogo_blue-m.png”, the auto-correction was breaking the link. Auto-correction shouldn’t cause links to break and it seems that v3.01 fixes it.

The filter function that does this auto-correction is called “capital_P_dangit” – The WordPress guys are obviously pretty frustrated by this spelling mistake!

Old filter (v3.0):

function capital_P_dangit( $text ) {
       return str_replace( 'Wordpress', 'WordPress', $text );
}

New filter (v3.01):

function capital_P_dangit( $text ) {
        // Simple replacement for titles
        if ( 'the_title' === current_filter() )
                return str_replace( 'Wordpress', 'WordPress', $text );
        // Still here? Use the more judicious replacement
        static $dblq = false;
        if ( false === $dblq )
                $dblq = _x('“', 'opening curly quote');
        return str_replace(
                array( ' WordPress', '‘Wordpress', $dblq . 'Wordpress', '>Wordpress', '(WordPress' ),
                array( ' WordPress', '‘WordPress', $dblq . 'WordPress', '>WordPress', '(WordPress' ),
        $text );
}

When I was building the property gallery for greekislandpropertyfinders I wanted to use a fancy javascript image gallery like Galleria, however I came across a problem with Galleria in that it couldn’t display more than one gallery on any page. It’s open-source so I used the source code to help write my own version and turned it into a WordPress plugin with the features I needed.

The plugin isn’t all that generalised, so I’m not sure it’ll be useful to many people but I think it’s a tool worth sharing.

Plugin features:

• This plugin doesn’t change the WordPress media gallery admin interface – galleries are created and inserted into pages/posts as normal (i.e. using the media upload GUI + the
[gallery] shortcode). WordPress authors won’t need to change or learn anything new.
• The plugin makes efficient use of WordPress media (no front-end image resizing via CSS!) which means it doesn’t matter if one of your authors uploads a load of 3MB images to a gallery – it’ll still run fast.
• The plugin doesn’t pre-download images that aren’t needed – it displays a loading spinner image when the user is waiting for a image on load.
• Should be easy to style the gallery in your own way – uses CSS classes and IDs.
• The user can click on the main image to cycle through the gallery.
• Uses jQuery for cross-browser hover fade effects.
• Small JS footprint: 2854 bytes.
• Outputs valid XHTML (unlike the default WordPress gallery!).

Screenshot of the plugin:

Click to enlarge

Demo of plugin: www.greekislandpropertyfinders.co.uk/what-we-are-finding.

Download the plugin from the WordPress.org plugin directory.

Disclaimer: As with any image processing always keep a copy of the original images.

To install jpegtran in Ubuntu, do:
sudo apt-get install libjpeg-progs

• To optimise a single jpeg image:
  jpegtran -copy none -optimise -outfile image.jpg image.jpg
• To optimise all jpegs in the current directory:
  for img in `ls *.jpg`; do jpegtran -copy none -optimise -outfile $img $img; done
• To optimise all jpegs in the current directory and all child directories:
  find . -name “*.jpg” -print0 | xargs -0 -I filename jpegtran -copy none -optimise -outfile filename filename

If you need to optimise various image formats, there is a PHP CLI tool called smusher which uses Smush.it and can work recursively on directories. Might be worth a look. It would be nice if Smush.it had a API – their FAQ mentions they are working on it.

We have just finished and published greekislandpropertyfinders.co.uk which is a modified clone of http://www.heidijoycegardens.com.

Technical details of site:

• The site is written in PHP using WordPress as a development framework.
• Uses the 1KB CSS grid framework.
• Uses Jquery including the anything slider and Galleria.
• The site has a newsletter sign-up form written as a WordPress theme function.

On this WordPress theme, the sidebar is quite small (only 220px) and the default WordPress tag cloud widget was producing tags that were clipped in a ugly manner. By default, the WordPress tag cloud widget has a maximum font size of 22px so I was looking for a way to reduce it.

Note: If you are not a theme editor, you might find it easier to just install a suitable tag cloud plugin, e.g. Configurable Tag Cloud (CTC).

The WordPress tag cloud widget already allows you to specify various options including the largest font size, e.g. <?php wp_tag_cloud('largest=18'); ?> so we only need to create a new widget that overrides the default widget and then unregister the default widget so there aren’t two widgets with the same name in the “Available Widgets” dashboard page. We can register our own widget using register_sidebar_widget and we can unregister the default tag cloud widget using unregister_widget('WP_Widget_Tag_Cloud');.

This is the code you need – put it in the functions.php file in your WordPress theme folder:

add_action("widgets_init", array('Tag_cloud_withLimitedFontSize', 'register'));

/** Widget - Override the default WordPress tag cloud BUT cap the largest font size to 18 (instead of 22)\
 because at 22 some tags don't fit in the sidebar. */
class Tag_cloud_withLimitedFontSize
{
  function widget($args){
    echo $args['before_widget'];
    echo $args['before_title'] . 'Tags' . $args['after_title'];
    echo wp_tag_cloud('largest=18');
    echo $args['after_widget'];
  }

  function register()
  {
    register_sidebar_widget('Tag Cloud', array('Tag_cloud_withLimitedFontSize', 'widget'));
    unregister_widget('WP_Widget_Tag_Cloud');
  }
}

If there’s a better way to do this, please let me know.

A website that I was working on suddenly started crashing Firefox 3.6 on my PC (Ubuntu 9.10, 64bit). I’m talking a full out hang with 100% CPU usage and a frozen mouse and keyboard and the only way to recover is to remote login from a 2nd PC and kill the Firefox process.

I found the cause of the crash and it was a single line of recently added CSS code at the top of the websites stylesheet: body { opacity: 0.9999; }

So, if you run a website, be careful of non-100% opacity when it affects many elements. I have hosted a page that reproduces the issue and found a bug that tracks the issue: #279890. This CSS is also a problem on Windows – it causes text to blur horribly in IE 7 in some situations.

What is that CSS for anyway? Firefox 2.0 on Macs used to have a problem where text could dim or get bold or flicker when a animated effect that changed the opacity of an element was used. It was caused because the use of a opacity filter triggered the Gecko rendering engine to switch from the operating system’s method of anti-aliasing to its own internal method. Whenever opacity dropped below 100% the mode switched and resulted in a defect such as a flicker or blink. The fix was simple – all that was needed was to add body { -moz-opacity: 0.9999; } to the stylesheet because it would force Firefox to use a consistent text rendering method.

• Cutline – http://cutline.tubetorial.com/
• Hybrid – http://themehybrid.com/demo/hybrid/
• Thematic – http://themeshaper.com/demo/thematic/
• Simple Type – http://typetheme.spyrestudios.com/
• Modern Clix – http://rodrigogalindez.com/themes/modern-clix/
• Oulipo – http://labs.andreamignolo.com/oulipo/
• Handgloves – http://handgloves.geenius.co.uk/
• Tarski – http://tarskitheme.com/
• Seven Five – http://www.press75.com/v4/the-seven-five-WordPress-theme/
• Ulap – http://plus63.net/ulaptheme/
• Satoshi – http://www.vooshthemes.com/WordPress-theme/satoshi-2/
• Neutra – http://tammyhartdesigns.com/free-WordPress-themes/fifty-fifth-street/

Technical details:

• The charts and graphs are implemented using the Google Charts API – a simple and extremely efficient method of producing charts.
• The charts (and chart data) are cached over a 24 hour period to take some load off the webserver. The caching is done by some simple PHP code – memcached seemed overkill.
• The UK map is implemented using a 3rd-party image map with polygon co-ordinates specifying each county. The hover-over highlighting is done using a JQuery plugin called mapHighlight.
• The “Job-o-meter” is implemented using a JQuery plugin called jOdometer customised to format the number with commas and animate the digits with some easing. I have made the customisations available via a github fork.

It looks like a very promising technology to make it easier to develop WordPress themes. I’m interested in re-useable modules so, if I develop something interesting for one client, I can re-use the same something for a different client with 1-click (therefore being able to quote them a reduced price). Plugins and widgets achieve this to some extent but Elastic aims to make the same possible at a more fundamental level.