nooshu - Matt Hobbs' Web Development Blog

Kneeling on the shoulders of giants

High Resolution Icons for Google Chrome

I’ve been using Google Chrome as my default browser for quite a few months, I still use Firefox for Web Development but for general browsing you really can’t beat the speed of Chrome. One of my favourite Chrome features is the ‘Create application shortcuts…’ function. Creating an application shortcut essentially adds an icon to your desktop, Chrome will then run the web application like it is a free-standing desktop application (you still need to be connected to the internet unless it uses some form of offline storage).

If you are a Gmail user I highly recommend creating an application shortcut to see this function in action. One thing you will notice when you create the shortcut with Gmail is it uses a high resolution icon. If you create a shortcut using a standard website, by default the favicon.ico is used. As the favicon is limited to 16 by 16 resolution it will look very ugly blown up on your desktop.

Various application shortcuts I've created

You can really see the difference between the Gmail icon (left) and the standard favicons.

The image above really illustrates the difference between a 16 x 16 icon and a high resolution version. Now of course you could just change the icon in the Windows properties…. but that’s boring. Why not offer your users a high resolution image along with the standard favicon? It really is very simple:

1
2
<link rel="icon" href="/icon_32x32.png" sizes="32x32" />
<link rel="icon" href="/icon_48x48.png" sizes="48x48" />

Simply place this code in your head tag of your web application and link to the corresponding icons. Now when your user creates an application shortcut they will have a nice high resolution icon on their desktop.

Hi resolution Chrome icon

You can really see the difference when you add a high resolution icon

I’ve added a high resolution icon for my blog administration, now if only F1 live timings would do the same. For those of you who want to add a high resolution icon to your WordPress blog add the following code to your functions.php:

1
2
3
4
5
6
function wp_hi_res_admin_icons() {
    echo '<link rel="icon" href="/wp-content/themes/' . basename(dirname(__FILE__)) . '/images/icon_name_32.png" sizes="32x32" />'."\n";
    echo '<link rel="icon" href="/wp-content/themes/' . basename(dirname(__FILE__)) . '/images/icon_name_48.png" sizes="48x48" />'."\n";
}
add_action('login_head', 'wp_hi_res_admin_icons');
add_action('admin_head', 'wp_hi_res_admin_icons');

This will add the icon code to your administrator login panel and dashboard; or paste the raw HTML into your header.php so all users can see the icons.

Converting a WordPress post to a custom post type

Update: There is now a plug-in that does this for you called Post Type Switcher so you don’t have to get your hands dirty with the SQL (thanks Bruno!). Another plug-in called Convert Post Types is also available that does the job for you, Thanks to Steve for that one.

With the release of WordPress 3.0, developers now have the ability to create custom post types by adding a few lines of code to a themes functions.php. The feature is a huge step forwards for WordPress as it moves closer to being a viable CMS solution (without all the hacks). There have been a number of projects I’ve worked on that have required a custom post type; rather than relying on the client selecting the correct category under ‘Add new post’, which tends to always leads to issues.

I’m in the process of converting nooshu.com to use custom post types and taxonomies, the main area in particular is my portfolio section. At the moment the portfolio posts are just standard posts which have a category of ‘portfolio’ attached to them. It works, but I don’t get that warm fuzzy feeling, and it feels like a bit of a hack. So time to start using a custom post type of ‘portfolio’ (yay!).

Unfortunately at the moment there doesn’t seem to be a quick way of converting a published standard post into a shiny new custom post type, at least not from the administration area. After a little investigation work using phpmyadmin and the nooshu WordPress database, I discovered it’s actually quite easy. Be warned though, it’s easy to break your blog by editing the database directly, so make sure you back everything up. I take no responsibility for what happens if you break something!

To convert a post into a custom post type; in phpmyadmin look for the wp_posts table. Inside it do a search, where the ‘post_type’ value equals ‘post’. This will give you a list of all your posts (otherwise you will also have all the revisions and attachments listed). From the list you should be able to pick out the posts you want converting to your new post type, edit one of these posts and change ‘post_type’ from ‘post’ to your new custom post. In my case this would be ‘portfolio’:

phpmyadmin admin panel for a WordPress post

Change 'post_type' from 'post' to your custom post type.

Click save and go back to the previous page. Done! You should now see the post appear under your new custom post type in the WordPress admin panel. If you have any issues just change ‘post_type’ back to ‘post’ and it will reappear under the standard posts. No information is lost when changing the post type.

It’s not an ideal solution, hopefully it will be possible to do it from the administration panel in the future; but it does save having to re-enter all the posts under the custom post type for the moment.

WordPress 3.0 RC1 blank page error

Update: Apologies to the author of Hyper Cache, the error isn’t cause by the plug-in. The error is being caused by DB Cache Reloaded. After updating the site to 3.0 final I was getting the error on the update page, disabling DB Cache Reloaded fixed it.

Update 2: DB Cache Reloaded has now been updated and works flawlessly in 3.0, get it here.

I’ve been eagerly awaiting the release of WordPress 3.0 (due any day now!). I plan on making a few changes to my blog once it is released so decided to try out Release Candidate 1 on my development server. At first it all went fine, upgraded the database no problem… then a blank page. Weird! After a couple of page reloads the sparkly new dashboard popped up (it’s not that different, although it does look greyer). Clicking around the admin area I could see this blank page error was randomly occurring on different pages; bugger!

My immediate thought was a plug-in I had installed, as I’m sure this rather large error would have been picked up while testing the WordPress core functionality! Looking at my Apache error log the following error was listed:

1
[error] [client 127.0.0.1] PHP Fatal error:  Call to undefined method wpdb::get_blog_prefix() in dev.nooshu.com\\trunk\\httpdocs\\wp-admin\\includes\\user.php on line 260, referer: http://dev.nooshu.com/wp-admin/edit.php?post_type=portfolio

The error is too vague to actually help, but after a little investigating (and from a hunch I had) I disabled any plug-ins involved in page caching; namely DB Cache Reloaded and Hyper Cache. Unfortunately disabling them still didn’t fix the error, so I decided to remove them completely (db-config.ini, advanced-cache.php and db.php removed from the wp-content directory). Suddenly no more blank page errors occurring! Huzzah!

So if you come across the same problem, then check what caching plug-ins you have installed. When 3.0 final is released I’ll be doing a fresh install of both plug-ins. Hopefully that will solve the issue. They are both quite popular plug-ins so I’m sure others have had the same issue.

Visualising Subversion with Gource

Over the weekend I stumbled across a video link, released (I assume) by Flickr. The video is a visualisation of the last 7 years of commits into the Flickr Subversion repository. Wow, there’s a lot of work been done to Flickr over the past 7 years! What’s even more interesting is you can easily create the same type of visualisation with your own project using an open-source project called Gource.

Gource is a version control visualisation tool developed by Andrew Caudwell. At the moment it supports Git, Mercurial and Bazaar but it is also possible to use it with Subversion (SVN) with a few extra steps. I’ve created a video for a project I’ve been working on with another developer for 9+ months. The video isn’t as active as the Flickr one but its still interesting to watch and see how a project develops right before your eyes.

The videos produced by Gource really illustrate how much work goes into projects over time, with each developer ‘shooting a laser’ at each file created / changed / deleted. Files in the same folder are clustered together, lines in-between these clusters link them together depending on the folder structure.

Creating the videos is fairly simple, I’ll give you a step by step guide how to do it using an SVN repository below. You will need:

First you will want to grab a copy of Gource and extract the zip file to somewhere easily accessible. I’ve used ‘c:\gource’ as you will be using the command line so it’s simple to find. Extract Python into a similar directory, I used ‘c:\python31′. If you don’t have the SVN command line client installed, install it and note down where it’s installed too.

Next you need to export the SVN repository log file to an XML document. To do this open a command prompt and locate the SVN client directory. Now type:

1
svn log http://www.yourrepository.url/svn/ --verbose --xml > projectlog.log

This command has exported the SVN log file to an XML doc that you should see in your SVN client directory. Since Gource doesn’t support SVN natively, the log file needs to be converted into a format Gource will understand. To do this copy the XML log file and this python script into the python directory. To convert the log file type the following from the command line in the python directory:

1
python svn-gource.py --filter-dirs projectlog.log > my-project-gource.log

Great! Now time for the fun part! You now have a log file (my-project-gource.log) that Gource can understand, so copy it to the Gource directory and bring up the command line. To generate the video created above I used the following command line:

1
gource --log-format custom my-project-gource.log -s 0.1 --hide filenames --stop-at-end --disable-progress -1280x720 -f --disable-progress --hide date

The command line is pretty self explanatory, I’ve set the size of the video I want, and hidden a few elements that weren’t needed. The “-s 0.1″ is an important command as it sets how quickly the visualisation runs through the log file. It’s worth experimenting with different values until you are happy with the results.

If you look in the README.TXT file thats in the Gource directory it gives you a whole list of options that are available to experiment with, there’s hours of fun in there if you really want delve into Gource.

Saving the video

This part actually took me longer to complete than generating the video in Gource; due to a few video encoding issues I was having (Grr!). Capturing the video is simple (once you know how) and uses a program called Fraps. Fraps is usually used in the online gaming scene, it is used to capture full-screen video and save it into an (uncompressed) video format. Once installed it will sit in your taskbar waiting for a full-screen video to kick in which it can then capture.

Play your Gource video from the command line in full-screen and press F9, this is the hotkey that triggers Fraps to start recording. Once complete, your video will be saved into the ‘\fraps\movies’ directory. The video that has been saved is in an uncompressed format so it’s likely it will be a large file (mine was around 700MB for 2 mins at 1280 x 720). This size isn’t very practical so it’s time to convert it to a smaller more portable format. For this we use the excellent VirtualDub by Avery Lee.

Once VirtualDub is installed it only takes a couple of steps to compress the video down:

  1. Run VirtualDub and open your Fraps video file
  2. From the Video menu select ‘Compression…’
  3. Choose the codec / compression settings you wish to use (I used the XviD codec single pass)
  4. From the file menu select ‘Save as AVI…’, once compressed you are done!

As simple as that! The file produced will be much smaller which you can then upload to Youtube / Vimeo as you see fit. Gource may not have a huge number or practical uses other than eye candy, but it’s a superb little tool that I will be using again in the future.

NextGEN Gallery + WordPress custom fields = happy developer

Over the past couple of weeks I’ve been working on a number of WordPress projects, all of which have needed some basic photo gallery functionality. As I’ve mentioned before in previous posts, NextGEN gallery is my WordPress gallery of choice, there really is nothing that comes close to it in terms of features and customisation (that I know of, if there are others post a comment!).

To add a gallery (or album) to a post / page is as simple as adding ‘[ nggallery id=x ]‘ to the post content… super! One issue though… what happens when you allow a client to edit and add new pages; well what usually happens is the tag gets deleted or changed, the gallery breaks, client panics and the virtual world ends (well not quite, but close). A technique I have been using to help solve this issue involves using WordPress custom fields and the excellent Get custom field values plug-in. You can grab the custom field values directly from WordPress using get_post_meta() but the plug-in makes it much easier.

Digging through the nggfunctions.php file in the NextGEN gallery plug-in folder reveals a whole host of useful functions that can be easily called directly from inside your WordPress theme. So say you wanted a gallery in a post page, but didn’t want the client to have to remember ‘[ nggallery id=x ]‘ every time, simply add this code next to your content in the single.php file:

1
2
3
4
5
6
<?php
    if(c2c_get_current_custom('galleryID') != ''):
        $gID = c2c_get_current_custom('galleryID');
        echo nggShowGallery($gID);
    endif;
?>

Add a custom field of galleryID with an integer value linking to the relevant gallery and you’re done. Now the client can pick out the galleryID custom field from a drop-down since WordPress remembers the custom fields used. Much easier for a client to remember than adding the tag every time.

I highly recommend looking through the nggfunctions.php file, here are just a few functions that are available:

  • nggShowAlbum(): Show a whole album depending on the ID.
  • nggSinglePicture(): Show a single picture from an ID.
  • nggShowRandomRecent(): Show random image(s) from a certain gallery.
  • nggShowSlideshow(): Show a flash slideshow pulling images from a specified gallery.

I have used nggShowRandomRecent() quite a few times in the past few months, here’s a quick example:

1
2
3
4
5
<?php
    //Show 6 random images using 'my-template' from gallery 4
    //(order, number of images, template, gallery ID)
    echo nggShowRandomRecent('random', 6, 'my-template', 4);
?>

Pick 6 images at random from a selected gallery on page load, very simple and effective.

Note: When using the random images function make sure you don’t have any WordPress caching plug-ins running on the selected page, else it won’t work as the page gets cached on first load. It took me a good 15 minutes to figure out why the function had suddenly stopped working due to this slight oversight.

Currently on page 14 of 24« First1213141516Last »