Archive for February, 2011

Simple image thumbnail creator in PHP

1

This is a very simple function, but very useful for resizing JPEG images on the fly. You need to make sure GD is enabled on your PHP installation. It will resize any JPEG picture to a specified width, very handy for eCommerce sites. It will actually fit any picture into a square thumbnail of $size by $size.

usage: processImage($file,$dest,$size)

$file – the name of the file, use full directory name
$dest – the name of the file to output
$size – WIDTH of the file.

	function processImage($file,$dest,$size)
	{
		$src = imagecreatefromjpeg($file);
		/* create thumbnail */
		$thumb = imagecreatetruecolor($size,$size);
		$red = 255;	$green = 255;	$blue = 255;
		$color = imagecolorallocate( $thumb, $red, $green, $blue ); 

		/* fill with white */
		$x = 1;
		$y = 1;
		imagefill($thumb, $x, $y, $color);

		/* get image original width and height */
		$src_x = imagesx($src);
		$src_y = imagesy($src);

                /* scale to fit width of $size if image is wider than height, align vertical center */
		if($src_x>$src_y)
		{
			$ratio=$size/$src_x;
			$new_x=$size ;
			$new_y=$src_y * $ratio;
			$new_xpos=0;
			$new_ypos=($size - $new_y) / 2;
		}
		else /* scale to fit height of $size if image is higher than wide, align vertical center */
		{
			$ratio=$size/$src_y;
			$new_x=$src_x * $ratio ;
			$new_y=$size;
			$new_ypos=0;
			$new_xpos=($size - $new_x) / 2;
		}
                /* copy to new image and save */
		imagecopyresampled($thumb,$src,$new_xpos,$new_ypos,0,0,$new_x,$new_y,$src_x,$src_y);
		imagejpeg($thumb,$dest,80);
	}

Make debugging MySQL simple with a PHP database wrapper

3

I built this simple MySQL wrapper a while back to simplify debugging MySQL code. It’s easier to write and use a wrapper that to have a load of print debugging statements. I’ve built one for both the mysql and mysqli interfaces in PHP.

PHP Wrapper for MySQL interface

PHP Wrapper for MySQLi interface

(more…)

xmltable

Pull XML into a table with filtering in jQuery

1

Now we’re getting into more complex territory, this small project pulls in data from an XML file and feeds it into a table in your page, this XML can be either a server side script, or a feed, or just a static XML file. You wouldn’t want to do this on your main site as search engine’s wouldn’t be able to spider the table, but it’s really useful for dashboards, statistics, admin pages, etc. You can filter the XML without reloading either the XML or the page.

Example demo XML table with filtering

Download Files (5Kb)

(more…)

CSS Menus with jQuery Effects

1

This is a continuation of the previous post Pure CSS Dropdown Menus. jQuery is used only for creating neat effects when menus are rolled over.

Example CSS Menus with jQuery Effects

Download Files (4Kb)

There are some caveats, this code will most likely not work in IE6. It will however work in most modern browsers including IE7. The best idea is to download the code and see how it works.
(more…)

pure-css-menus

Pure CSS drop down menus

1

Drop down menus are great if you need a more tree like structure in your menus. This version is for a 2 level navigation style menu bar with drop down lists. They can be any size, just adjust the CSS accordingly.

Example Pure CSS Drop Down Menus

Download Files (4Kb)

There are some caveats, this code will not work in IE6. Internet Explorer 6 does not support :hover on elements other an anchor (A) tags. It will however work in most modern browsers including IE7. The best idea is to download the code and see how it works.
(more…)

Zebra striping tables in jQuery with minimal code.

2

This is some really simple code to add zebra stripes to your HTML tables, this is really good for tables with long rows to ease readability, and can be tedious to add by hand.

Example zebra stripes in jQuery

$(document).ready(function(){
	$(".zebratable").each(function(){
 	var $s=0;
		$(this).find("tr").each(function(){
			var $t = $(this).children("td");
			$s++;
			if($s%2==1)
				$t.addClass("stripe");
			else
				$t.removeClass("stripe");
		});
  	});
});

(more…)

demo-tile

Image tiles with captions and rollover text in jQuery

1

This is a really simple way of adding some animation to your image links, the overlays also work if Javascript is switched off, so you have a fallback in the css. The jQuery code is very minimal and uncomplicated. There will be some bits you’ll need to edit if you change the image size.

Demo of image tile links in jQuery

Download ZIP of all files (58Kb)

(more…)

Simple tabs and panes with jQuery

0

If there’s one thing jQuery is good at, it’s doing complicated things with simple code. The code below is for a tab system. I’ve purposely kept the styling simple, and kept the jquery as minimal as possible. The advantage of this method over AJAX tabs (where they load from XML files) is that all your content is on the page already, great for SEO.

Demo of simple tabs in jQuery

Download ZIP of all files (3Kb)

Here’s the jQuery


$(document).ready(function(){
	$(".tab").click(function(){

		$(".tab").removeClass("selected");
		$(this).addClass("selected");

		$(".pane").addClass("hidden");
		$($(this).attr("href")).removeClass("hidden");	

	});
});

That’s it, that’s all the jQuery you need. Of course the HTML needs to be a bit more complex than the jQuery, but it’s simple enough.
(more…)

10 easy to do Search Engine Optimisation (SEO) tips

0

Optimising your site for search engines such as google is seen to be a dark art. There’s some things you can do to make your site easily crawled and found by search engines

  1. Put good content on your site.
    Good content is the mainstay of SEO, your site needs original, well written copy and content which has in it the key words relating to your site. You need to make sure this content gets people reading it, and make it content other sites will want to link to. Do not stuff your page full of key words, unrelated or related to your site, it all has to be relevant and not spammy.
  2. Get a good domain with key words in related to your site.
    This isn’t easy if you already have a domain for your site, but if you want to rank higher for ‘widgets’ buy a domain with the name ‘widgets’ in it. Though this isn’t a major factor in getting good search rankings.
  3. Use folders/directory names on your site with relevant keywords.
    Don’t do http://www.example.com/index.php?page=1. You can use Apache’s URL rewriting to do much better. For example http://www.example.com/widgets-I-talk-about/1/ it has key words in, and isn’t spammy.
  4. Make your page titles relevant.
    The title will be shown in the search listing, you need to make this easy to read, and not stuffed with key words. Ideally your titles should be about 10-15 words maximum and again, relevant to your content. (more…)
Go to Top