I’m 99% sure that you already heard about APIs or REST APIs, it’s what Twitter, flickr and a lot more companies use to share they’re resources with a consumer.
A consumer can be anything from a website (for example, showing your Twitter updates on your blog or personal website) to a desktop / mobile application (iPhone, Android, Windows Mobile, …).
This is possible because all information sent to and from the API is encoded in either two common, inter-platform language, XML and JSON.
The difference between a regular API and a REST API is on the way they work. A REST API requires two entities to work, a client and a server.

Download WP-RESTful (Version 0.1)

Download WP-RESTful Users Plugin (Version 0.1)

Download WP-RESTful Categories Plugin (Version 0.1)

Download WP-RESTful Tags Plugin (Version 0.1)

Follow me for real-time updates

Twitter

How does it work?

WP-RESTful uses OAuth, a widely, commonly and open source API implementation used all over the World (Wide Web).
The way it work is fairly simple.

First a Consumer registers with a Server. At this point the Server will provide the Consumer with 2 tokens, a public and a private token. The public token will be used to communicate and identify the Consumer with the Server while the private token will be stored locally for security and integrity reasons.
After this the Consumer will request the Server with a Request Token. This Request Token will be used to initiate the Authentication Protocol in where the Consumer will be required to authorize the Server.
The Server will create 2 new token (definitive tokens). They will be our authentication tokens.

I know this sounds and seems complicated but you won’t need to do anything as the Plugin will do almost everything for you (Registration and Authentication process are manual).

Plugin features

• Add new Plugins to API Plugin to extend functionalities to any way you want/need. (See next group)
• Fully manageable Client and Server side.
• Ability to choose what fields are allowed to be returned to the consumer.
• Ability to restrict modules to OAuth authentication process or liberated them and make them open.
• Load balance system where you can specify how many requests a given consumer is allowed in a 60 minute timeframe.
• Out of the box Post and Comments management.
• And much more…

Plugins

As stated on “Plugin Features” you have the ability to develop and/or add new modules to your REST API. This means, for example, if you use a plugin like WP E-Commerce, you can develop a plugin for the REST API in order to provide support for WP E-Commerce resources.
The way these plugins are developed is very similar to how plugins for WordPress are developed.
You can see this video that explains how plugins work and how you can develop them.

Requirements?

All requirements for the plugin to work properly are addressed by the plugin itself, upon activation. You can see your system status on WP-RESTful link after activation the plugin.

How to install?

This plugin is installed like any other WordPress plugin out there.

1. First you need to download it from WordPress Plugin Repository.
2. Upload the contents of the compacted file to your plugin folder on your WordPress installation.
3. Go to your WordPress Administration page and activate the Plugin (Plugins → Installed → WP-RESTful → Activate)
4. Create a new page, name it API, set the permalink to /api and set the content as [REST_return] and save the page.
5. Go to WP-RESTful → WP-RESTful to check your system status.

I need help!

Check these two videos. They will help you starting up.

This post will be updated, if needed, to reflect changes made to the plugin.

Today I presented a talk at BarCampPT about WordPress and its Plugins. The reactions wore fantastic and I would like to share the presentation documents.

Warning: The presentation was made in Portuguese.

The WP-PLS (short for Parallel Loading System) is a WordPress plugin that will enhance the loading efficiency of your Blog. It’s very simple to use and it will only require a small amount of time to configure at the start.

Download from WordPress Plugin Repository (Updated to version 0.1.7)

Follow me for real-time updates

Twitter

Why use it?

If you have an image intensive Blog, or even if you don’t, this plugin will boost the loading time of your Blog. The more images you have the more it will improve.

The amount of people that will visit your website for the first time or visit with an empty cache or disabled cache is huge, therefore, the best your website performs on that first visit the more chances that person will remain to view your website.

It is also known that nowadays, Google (and other search engines), are taking into account, for ranking purposes, your website page speed. Google Bot does not conserve a cache when it visits your website, so, the faster your website loads the more chances you have to rank higher.

This plug will not change anything on your Blog. Every change that it makes will be processed in real time, right before the HTML code of your Blog is sent to the browser.

How does it work?

Standard HTTP v1.1 requests only allow 2 connections, at the same time, from the same domain.

This plugin will virtualize connections, through defined subdomains. You can have as many subdomains as you like, but I do recomend using a maximum of 5.

Requirements?

The plugin is programmed to be aware of this requirements, and if not fulfilled it will not change anything on your Blog.
It will not break your Blog code!

• Your server needs to have a working GD Library module for PHP.
• You should have a PHP installation with a minimum version of 5.1.3
• Access to your server Administration Painel (cPanel, DirectAdmin, Plesk) in order to create new sub-domains for your domain.
  Lets say your domain is wp-pls.com. You will need to create domains like
  image1.wp-pls.com
  image2.wp-pls.com
  …

How to install?

This plugin is installed like any other WordPress plugin out there.

1. First you need to download it from WordPress Plugin Repository.
2. Upload the contents of the compacted file to your plugin folder on your WordPress installation.
3. Go to your WordPress Administration page and activate the Plugin (Plugins → Installed → WP-PLS → Activate)
4. Go to Settings → Parallel Loading System

Plugin features?

Some of the features that you can expect when using this plugin:

• Automatic Image Optimization.
• Parallelize HTTP connections.
• Page speed improvement.
• Auto-Path find (Automatically find server root path, sub-domain path, plugin resources path…).
• Cache loss minimization.
• Sub-domain real-time health tracking.
• Auto recovery from resource files bad sync.
• Ability to activate / deactivate sub-domains
• Plugin Updates aware. (automatically re-sync files and database after an update)

What’s in the cooking pan?

This was only the first release of the plugin. I’ve got a lot of new ideas that I would like to see implemented on next releases.
Some of them are:

• Also parallelize CSS and JavaScript loading.
• Add support to also load external images. At the moment it will only load locally stored images.
• Add real-time rewrite functions to CSS and JavaScript. That way, images that have been called from the CSS file will also be parallelized.
• Overall improve of the code.
• Add options to manage image quality rendering.
• Bug fixes (when found or reported).
• And much more…

If you have any features that you would like to see implemented, please don’t hesitate to comment this post, tweet me or mail me

I need help!

It’s normal if you run into problems and I’m here to tell you how to fix them.

If for any reason the plugin is telling you that it doesn’t have permissions to alter a given file you will need to access your server, using your favorite FTP Client (Filezilla, Cyberduck, FlashFXP…) and change the permissions of the file to 777. You can revert them back to 644 (normal permissions of a file) after the plugin finishes the modifications.

If you get a sub-domain health notification stating that your sub-domain is returning a 500 HTTP error code the most probable explanation is that your sub-domain folder has 777 permissions. Revert them back to 755 and you should be fine.

If you have any further questions please don’t hesitate to send me an email or add a comment on this post.

Creating sub-domains on cPanel?

Creating sub-domains on Plesk?

1. Log in to Plesk
2. Once logged in, click the ‘Home’ button in the left navigation frame.
3. Click on the domain name you wish to create a subdomain for.
4. Click on the ‘Subdomains’ button. This will take you to the subdomain manager.
5. Add a new subdomain by clicking the corresponding button (Add New Subdomain).
6. Enter the subdomain in the associated field. The SSL support checkbox is optional, and should be used if you intend on using SSL with your subdomain.
7. If you’d like to use the same FTP information as your main domain to access the subdomain, skip down to the ‘Services’ section. If not, select the checkbox ‘Create a separate FTP user account for this subdomain’. Enter an FTP username and password, along with a hard disk quota. If you do not enter a hard disk quota, the subdomain will be allowed to use all resources included with your main domain.
8. In the ‘Services’ section, it is advised to check all services. This will ensure that your subdomain can support all the features our hosting accounts offer.
9. Click the ‘OK’ button to create the subdomain.

Creating sub-domains on DirectAdmin?

Creating sub-domains on manually on your server?

To create a sub-domain, if don’t use a Control Panel, edit your http.conf file (normally located on /etc/http/conf/http.conf) and add the following at the end:

NameVirtualHost *:443

<VirtualHost *:80>
ServerName YOUR SUBDOMAIN
DocumentRoot ROOT TO SUBDOMAIN PATH
ErrorLog ROOT TO SUBDOMAIN LOG
</VirtualHost>

<VirtualHost *:443>
ServerName YOUR SUBDOMAIN
DocumentRoot ROOT TO SUBDOMAIN PATH (SSL)
ErrorLog ROOT TO SUBDOMAIN LOG (SSL)
</VirtualHost>

This post will be updated, if needed, to reflect changes made to the plugin.

If you need additions that are not contemplated in this fix package you can email me for a specific quote.

UPDATE – 18/05/2010

There has been an update on wp-e-commerce a few days ago and if you have applied my add-on you’ll probably have problems with the plugin. Post a comment or email me if you’re having problems.

===============================

If you are using wp-ecommerce plugin for wordpress and you ran into some missing functionalities this might help you.

The specific mod I’ll show you today will enable you to specify SKU to any variation on any product on your system.

I don’t know how proficient your are on programming WordPress, but let me know if you run into any difficulty.

So, first of all you need to add a new field on your database on table wp_wpsc_variations_properties called “sku”. I added this field as varchar with a length of 64 characters, but do adapt this one to fit your needs.

Backup your e-commerce plugin folder.

Now, open file /wp-content/plugins/wp-e-commerce/wpsc-includes/variations.class.php.

After line,

$output .= "
".TXT_WPSC_VARIATION."
 
\n\r";

add,

$output .= "
".TXT_WPSC_SKU."
 
\n\r";

Change line,

$unindexed_variation_properties_data = $wpdb->get_results("SELECT `id`, `stock`, `price`, `weight`,`weight_unit`, `file` FROM `".WPSC_TABLE_VARIATION_PROPERTIES."` WHERE `id` IN({$priceandstock_id_string})", ARRAY_A);

to,

$unindexed_variation_properties_data = $wpdb->get_results("SELECT `id`, `stock`, `sku`, `price`, `weight`,`weight_unit`, `file` FROM `".WPSC_TABLE_VARIATION_PROPERTIES."` WHERE `id` IN({$priceandstock_id_string})", ARRAY_A);

After line,

$product_price = $variation_properties_data[$variation_set['priceandstock_id']]['price'];

add,

$product_sku = $variation_properties_data[$variation_set['priceandstock_id']]['sku'];

After line,

$product_price = $product_data['price'];

add,

$product_sku = "";

After line,

$output .= "".str_replace(" ", " ", (stripslashes( $variation_names )))."\n\r";

add,

$output .= "
<input name="variation_priceandstock[{$variation_ids}][sku]" size="8" type="text" value="$product_sku" />\n\r";

After line,

$variation_price = (float)str_replace(",","",$variation_data['price']);

add,

$variation_sku = (string)$variation_data['sku'];

After line,

$variation_sql = null; // return the sql array to null for each trip round the loop

add,

if(($variation_stock_data['sku'] != $variation_sku)) {
$variation_sql[] = "`sku` = '{$variation_sku}'";
}

This should enable you fill the sku field we added before. Now to get the info of the sku on the order page.

Open file /wp-content/plugins/wp-e-commerce/wpsc-includes/purchaselogs.class.php.

On line,

function wpsc_purchaselog_details_SKU(){

Change all function to,

purchitem->prodid, 'sku');
	$variation_name = stripslashes($purchlogitem->purchitem->name);
	$associated_variations = $wpdb->get_col("SELECT `variation_id` FROM `".WPSC_TABLE_VARIATION_ASSOC."` WHERE `type` IN ('product') AND `associated_id` = '{$purchlogitem->purchitem->prodid}' ORDER BY `id` ASC");
 
	$variation_count = count($associated_variations);
 
	asort($associated_variations);
	if($variation_count > 0) {
		//stripslashes($purchlogitem->purchitem->name);
		foreach((array)$associated_variations as $variation) {
			$variation = (int)$variation;
 
			$excluded_value_sql = '';
			if($purchlogitem->purchitem->prodid > 0 ) {
				$included_values = $wpdb->get_col("SELECT `value_id` FROM `".WPSC_TABLE_VARIATION_VALUES_ASSOC."` WHERE `product_id` IN('{$purchlogitem->purchitem->prodid}') AND `variation_id` IN ('{$variation}') AND `visible` IN ('1')");
				$included_values_sql = "AND `a{$variation}`.`id` IN('".implode("','", $included_values)."')";
			}
			//else if(count($variation_values) > 0) {
			//$included_values_sql = "AND `a{$variation}`.`id` IN('".implode("','", $variation_values)."')";
			//}
 
			$join_selected_cols[] = "`a{$variation}`.`id` AS `id_{$variation}`, `a{$variation}`.`name` AS `name_{$variation}`";
			$join_subselect_cols[] = "`a{$variation}`.`id`";
			$join_tables[] = "`".WPSC_TABLE_VARIATION_VALUES."` AS `a{$variation}`";
			$join_conditions[] = "`a{$variation}`.`variation_id` = '{$variation}' $included_values_sql";
	}
 
	$variation_count = count($associated_variations);
	$all_variation_ids = implode(",", $associated_variations);
	$join_subselect_cols = implode(", ", $join_subselect_cols);
 
	$join_selected_cols[] = "(
SELECT `priceandstock_id`
FROM `".WPSC_TABLE_VARIATION_COMBINATIONS."`
WHERE `product_id` = '{$purchlogitem->purchitem->prodid}'
AND `value_id`
IN ( {$join_subselect_cols} )
AND `all_variation_ids`
IN ( '{$all_variation_ids}'	)
GROUP BY `priceandstock_id`
HAVING COUNT( `priceandstock_id` ) = '{$variation_count}'
LIMIT 1
) AS `priceandstock_id`";
 
	// implode the SQL statment segments into bigger segments
	$join_selected_cols = implode(", ", $join_selected_cols);
	$join_tables = implode("\nJOIN ", $join_tables);
	$join_conditions = implode("\nAND ", $join_conditions);
 
	// Assemble and execute the SQL query
	$associated_variation_values = $wpdb->get_results(
"SELECT {$join_selected_cols}
FROM {$join_tables}
WHERE {$join_conditions}
ORDER BY {$join_subselect_cols}"
	, ARRAY_A);
	//print_r($associated_variation_values);
	foreach((array)$associated_variation_values as $key => $variation_set) {
		$variation_id_array = array();
		$variation_names = array();
		foreach($associated_variations as $variation_id) {
			$variation_id_array[] = $variation_set["id_{$variation_id}"];
			$variation_names[] = $variation_set["name_{$variation_id}"];
		}
 
		$variation_names = implode(", ", $variation_names);
		$variation_ids = implode(",", $variation_id_array);
		if(strpos($variation_name, $variation_names)) {
 
			$variation_sku = $wpdb->get_row("SELECT `sku` FROM `".WPSC_TABLE_VARIATION_PROPERTIES."` WHERE `id` = '{$variation_set['priceandstock_id']}' LIMIT 1", ARRAY_A);
 
			if(!empty($variation_sku['sku']))
			$meta_value = $variation_sku['sku'];
		}
	}
}
 
if($meta_value ==''){
	return 'N/A';
}else{
	return $meta_value;
}
 
}
?>

This should get you up and running. Let me know if you need anything.

Screencast – mod_rewrite and PHP from José Airosa on Vimeo.

Hello folks!

This time, and for the first time, I bring you a screencast! It’s all about mod_rewrite and PHP. What it is, how can we use it and how can we integrate it to be used with PHP.

Below are the functions that i talked about in the screencast. Use them, or not, as you please.

/**
 * Get current page URL
 * 
 * @return string with paeg name
 */
function curPageURL() {
	$pageURL = 'http';
	if (isset($_SERVER["HTTPS"]) && $_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
		$pageURL .= "://";
		if ($_SERVER["SERVER_PORT"] != "80") {
			$pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
		} else {
			$pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
	}
	return $pageURL;
}
 
/**
 * Get current page script name
 * 
 * @return string with page script name
 */
function curPageScriptName() {
 return substr($_SERVER["SCRIPT_NAME"],strrpos($_SERVER["SCRIPT_NAME"],"/")+1);
}
 
/**
 * Get current page name
 * 
 * @return string with page script name
 */
function curPageName() {
 return end(explode("/",curPageURL()));
}

Hope you’ll enjoy as much as I did making it

Let me know your feedback.

Today I bring you an easy and quick CSS tip for making Star Rating layouts, only with the use of CSS. The great thing about this one that I’m about to show you, is the fact that it’s continuous, meaning, it will work with percentage.
Confused?

- Let me show you an example!

As you can see they’re not just full or not full, they’re half full, 1/4 full, etc…

To achieve this you only need to have 2 images, them being:

From now on it’s only CSS and a really simple HTML to call the code and inform the % that you would like to use.

.classification { 
	position: relative;
	width: 91px;
	height: 17px;
}
.classification .cover {
	position: absolute;
	background: transparent url(img/stars.png) top left no-repeat;
	top: 0px;
	left: 0px;
	width: 91px;
	height: 17px;
	z-index: 101;
}
.classification .progress {
	position: absolute;
	background: transparent url(img/stars_full.png) top left no-repeat;
	top: 0px;
	left: 0px;
	height: 17px;
	z-index: 102;
}

Basically we overlap one image on top of the other and we control the amount of Star we want to show with a given width in percentage.

<div class="classification"><div class="cover"></div<div class="progress" style="width: 27%;"></div></div>

Where you see style=”width: 27%;” just change to what ever % you would like to fill.

We’re done! Easy? No? Yes? Rocket Science Hard? Let me know what you think.

Best regards!

Hello fellow readers!

Sorry for not posting anything for so long, but my work has been taking me most of my time… anyway.

Today we’ll go over on creating a PHP Script that will resize and crop (if wanted) an image with the added support of cache.

PHP is not limited to creating just HTML output. It can also be used to create and manipulate image files in a variety of different image formats, including GIF, PNG, JPEG, WBMP, and XPM. Even more convenient, PHP can output image streams directly to a browser. You will need to compile PHP with the GD library of image functions for this to work. GD and PHP may also require other libraries, depending on which image formats you want to work with.

You can use the image functions in PHP to get the size of JPEG, GIF, PNG, SWF, TIFF and JPEG2000 images.

For this to work you’ll need a PHP 4.3.0 version or greater. Check http://www.libgd.org/ for more information.

This script will work in stages.

• Stage 1: Read the image and check if it is present on our cache folder. If so we’ll just use the cached version. Take in account that even if you supply an image on an external source it will not check the image itself but rather the link, thus, no external connection is made.
• Stage 2: Start reading the source image and do the required operations of cropping and scaling.
• Stage 3: Apply the changes and create image resource (new one).
• Stage 4: Save image in cache and return the new image.

Ok, enough with all this “mumbo jumbo” an lets get to action:

<?php
/**
 * Created and developed by José P. Airosa
 * 
 * This file will enable you to automaticaly resize images without loosing quality.
 * It uses a simple math formulas to calculate the desired final size and then rerenders the image.
 * 
 * The usage is very simples. On you HTML code just create an image and replace the src with cropimage.php?src=img/myimage.jpg&size=320x240
 * 
 * src - the source of the image itself
 * size - the size that the image should have. If the size is not directly compatible with the original size it will display a simple background and the image with
 * the correct size on top.
 * 
 * Example: <img src="cropimage.php?src=img/myimage.jpg&size=320x240" alt="" />
 * 
 * If it's a square image you can just use myimage.jpg&size=320 and it will make a 320x320 image.
 * 
 */
ini_set ( "memory_limit", "64M" );
class cropImage {
	// Initialize variables;
	var $imgSrc, $myImage, $cropHeight, $cropWidth, $x, $y, $thumb, $dif;
	/**
	 * Stage 2: Read the image and check if it is present on our cache folder. If so we'll just use the cached version. Take in account that even if you supply 
	 * an image on an external source it will not check the image itself but rather the link, thus, no external connection is made.
	 * 
	 * Also check what type of file we're working with. Different files, different methods.
	 * 
	 * @param $image The image that it's to crop&scale
	 * @return nothing
	 */
	function setImage($image) {
 
		// Your Image
		$this->imgSrc = $image;
		// Getting the image dimensions
		list ( $width, $height ) = getimagesize ( $this->imgSrc );
		// Check what file we're working with
		if ($this->getExtension ( $this->imgSrc ) == 'png') {
			//create image png
			$this->myImage = imagecreatefrompng ( $this->imgSrc ) or die ( "Error: Cannot find image!" );
			imagealphablending ( $this->myImage, true ); // setting alpha blending on
			imagesavealpha ( $this->myImage, true ); // save alphablending setting (important)
		} elseif ($this->getExtension ( $this->imgSrc ) == 'jpg' || $this->getExtension ( $this->imgSrc ) == 'jpeg' || $this->getExtension ( $this->imgSrc ) == 'jpe') {
			//create image jpeg
			$this->myImage = imagecreatefromjpeg ( $this->imgSrc ) or die ( "Error: Cannot find image!" );
		}
 
		// Find biggest length
		if ($width > $height)
			$biggestSide = $width;
		else
			$biggestSide = $height;
 
		// This will zoom in to 50% zoom (crop!)
		$cropPercent = .5; 
		// Get the size that you submitted for resize on the URL
		$both_sizes = explode ( "x", $_GET ['size'] );
		// Check if it was submited something like 50x50 and not only 50 (wich is also supported)
		if (count ( $both_sizes ) == 2) {
			if ($width > $height) {
				// Apply the cropping formula
				$this->cropHeight = $biggestSide * round ( ($both_sizes [1] * $cropPercent) / $both_sizes [0], 2 );
				$this->cropWidth = $biggestSide * $cropPercent;
			} else {
				// Apply the cropping formula
				$this->cropHeight = $biggestSide * $cropPercent;
				$this->cropWidth = $biggestSide * round ( ($both_sizes [0] * $cropPercent) / $both_sizes [1], 2 );
			}
		} else {
			$this->cropHeight = $biggestSide * $cropPercent;
			$this->cropWidth = $biggestSide * $cropPercent;
		}
 
 
		// Getting the top left coordinate
		$this->x = ($width - $this->cropWidth) / 2;
		$this->y = ($height - $this->cropHeight) / 2;
 
	}
	/**
	 * From a file get the extension
	 * 
	 * @param $filename The filename
	 * @return string file extension
	 */
	function getExtension($filename) {
		return $ext = strtolower ( array_pop ( explode ( '.', $filename ) ) );
	}
	/**
	 * For PNG files (and possibly GIF) add transparency filter
	 * 
	 * @param $new_image
	 * @param $image_source
	 * @return nothing
	 */
	function setTransparency($new_image, $image_source) {
		$transparencyIndex = imagecolortransparent ( $image_source );
		$transparencyColor = array ('red' => 255, 'green' => 255, 'blue' => 255 );
 
		if ($transparencyIndex >= 0) {
			$transparencyColor = imagecolorsforindex ( $image_source, $transparencyIndex );
		}
 
		$transparencyIndex = imagecolorallocate ( $new_image, $transparencyColor ['red'], $transparencyColor ['green'], $transparencyColor ['blue'] );
		imagefill ( $new_image, 0, 0, $transparencyIndex );
		imagecolortransparent ( $new_image, $transparencyIndex );
	}
	/**
	 * Stage 3: Apply the changes and create image resource (new one).
	 * 
	 * @return nothing
	 */
	function createThumb() {
		$thumbSizex = $thumbSizey = $_GET ['size'];
		$both_sizes = explode ( "x", $_GET ['size'] );
		if (count ( $both_sizes ) == 2) {
			$thumbSizex = $both_sizes [0];
			$thumbSizey = $both_sizes [1];
		}
 
		$this->thumb = imagecreatetruecolor ( $thumbSizex, $thumbSizey );
        $bg = imagecolorallocate ( $this->thumb, 255, 255, 255 );
        imagefill ( $this->thumb, 0, 0, $bg );
		imagecopyresampled ( $this->thumb, $this->myImage, 0, 0, $this->x, $this->y, $thumbSizex, $thumbSizey, $this->cropWidth, $this->cropHeight );
		if ($this->getExtension ( $this->imgSrc ) == 'png' && isset ( $_GET ['transparent'] ) && $_GET ['transparent'] == 1) {
			$this->setTransparency ( $this->thumb, $this->myImage );
		}
	}
	/**
	 * Stage 4: Save image in cache and return the new image.
	 * 
	 * @return nothing
	 */
	function renderImage() {
		$image_created = "";
		global $size_string;
		if ($this->getExtension ( $this->imgSrc ) == 'png') {
			header ( 'Content-type: image/png' );
			imagepng ( $this->thumb );
			/**
			 * Save image to the cache folder
			 */
			imagepng($this->thumb, 'img_cache/'.$size_string.end(explode("/",$this->imgSrc))); 
		} elseif ($this->getExtension ( $this->imgSrc ) == 'jpg' || $this->getExtension ( $this->imgSrc ) == 'jpeg' || $this->getExtension ( $this->imgSrc ) == 'jpe') {
			header ( 'Content-type: image/jpeg' );
			imagejpeg ( $this->thumb );
			/**
			 * Save image to the cache folder
			 */
			imagejpeg($this->thumb,'img_cache/'.$size_string.end(explode("/",$this->imgSrc))); 
		}
		imagedestroy ( $this->thumb );
	}
}
// Some variables needed for this to work. We set $size_string as global in order to access it on renderImage()
global $size_string;
// Initialize our Crop Image class
$image = new cropImage ( );
$size_string = "";
$both_sizes = explode ( "x", $_GET ['size'] );
if (count ( $both_sizes ) == 2) {
	$size_string = $both_sizes [0]."x".$both_sizes [1];
} else {
	$size_string = $_GET ['size']."x".$_GET ['size'];
}
/**
 * Atempt to load our cached image. If we can't that means there is no cache for that image. If we find 
 * we'll just load that one adn won't even think about cropping and scaling.
 * 
 * Stage 1: Read the image and check if it is present on our cache folder. If so we’ll just use the cached version. 
 * Take in account that even if you supply an image on an external source it will not check the image itself but rather the link, thus, no external connection is made.
 */
$img_cached = 'img_cache/'.$size_string.end(explode("/",$_GET ['src']));
if(file_exists($img_cached)) {
	if ($image->getExtension ( $img_cached ) == 'png') {
		$myImage = imagecreatefrompng ( $img_cached ) or die ( "Error: Cannot find image!" );
		header ( 'Content-type: image/png' );
		imagepng ( $myImage );
	} elseif ($image->getExtension ( $img_cached ) == 'jpg' || $image->getExtension ( $img_cached ) == 'jpeg' || $image->getExtension ( $img_cached ) == 'jpe') {
		$myImage = imagecreatefromjpeg ( $img_cached ) or die ( "Error: Cannot find image!" );
		header ( 'Content-type: image/jpeg' );
		imagejpeg ( $myImage );
	}
	imagedestroy ( $myImage );
} else {
	$image->setImage ( $_GET ['src'] );
	$image->createThumb ();
	$image->renderImage ();
}
?>

All the code is commented and I think anyone will understand it pretty well.

A few things to take it into account. There should be a folder called “img_cache” with write permissions otherwise cache won’t work.

While loading external files is normal for the image to take a few seconds to appear. That’s only on the first time you access it. Next times it will just load the cached version directly.

That’s about it. Really simple script.. oh yeh, i’ve only added support for jpg and png, but i think that from the code I’ve given you can easily add support for the others. But if someone requires and is not able to do it, please do ask me and I’ll do it

Hope you enjoy!

Ok, as for my first post after my away time I’ll be showing you how to make a… Yes you figured it out, a TagCloud.

A TagCloud is as you know a Cloud… with Tags… hum, for some reason I think you already knew that. Anyway, jokes aside, a TagCloud is one of the most powerful visual information display nowadays. It’s not a complex module, by the opposite, it’s very simple.

A normal TagCloud displays all tags, in alphabetic order and the font size varies in according to the amount of times that tag has been found in use. Imagine that you have “hello”, “this”, “is”, “jose”,”blog” as your tags. You would get something like:

You would know that “jose” is the tag with most views (when we say views we can say records in a database).

The installation of the module is very easy and all the required information can be found on the files that i provide.

Extra info:

// This will create a TagCloud with default max font size and minimum font size. The default values can be set on file tagcloud.php in function create_tag_cloud($array,$limit_top_size = 38,$limit_low_size = 18)
$tag_size = create_tag_cloud($tags_array);

Or with specific values

$tag_size = create_tag_cloud($tags_array,40,10);

Max font size will be 40 and minimum font size 10. (these are the max and min values allowed for TagCloud font fluctuation.

And there you go. Just style the code as you like.

PS: Yes, i know what you’re thinking, you can change the code as you please

Let me know if you have any issues.

Yes, it’s true, but now it’s not time to get upset. New posts are on the making

Until then.

I had the idea of creating this style effect after seeing a similar one in other website, only it was pullup and not pulldown.

We’ll be using JQuery Framework to produce the desired effect. JQuery by itself only enables the dropdown of one element, to make the desired output we need to do some modifications, and that’s what we’re gonna go over on this post.

First of all we need to import the required JavaScript:

1
2
3

<script src="http://ui.jquery.com/testing/jquery-1.3.1.js" type="text/javascript"></script>
<script src="http://ui.jquery.com/testing/ui/ui.core.js"></script>
<script src="http://ui.jquery.com/testing/ui/ui.draggable.js"></script>

Place these lines after <title> tag on the HTML code.

A few styles need to be added for this to work properly:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.drag_top {
	width:100%;
	height:400px;
	background-color:#333;
	margin-top:-380px;
	z-index:1000;
}
.conteudo_drag {
	height:380px;
	margin-left:auto;
	margin-right:auto;
	width:1200px;
	background-color:#333;
}
.hand_drag {
	width:100%;
	height:20px;
	background-color:#333;
	cursor:s-resize;
}

Now we need to initialize JQuery Framework and tell it which element will be affected by the dropdown effect.

After the code you just entered add:

$(document).ready(function(){
	$("#drag_top").draggable(
	{
		handle: '#hand_drag',
		axis: 'y',
		containment: [0,0,'100%',380],
		drag: function(even,ui){
			document.getElementById("page").style.marginTop = (ui.position.top)+'px';
			}
		});
	});

The element we’ve chosen to be affected is “#drag_top”.

• “handle: ‘#hand_drag’” tells JQuery that only this element will activate the dropdown effect
• we are going to lock it to the Y axis using “axis: ‘y’”
• “containment: [0,0,'100%',380]” is where we specify the limits of movement of our dropdown, in this case we confine it to top 0, left 0, width 100% and height 380 from the top of the page
• Finally we go over to the drag function, this is where we specify what will happen during the drag effect. The default drag function has 2 parameters; event and ui. Event has all event related information during the drag and ui has all changes that happen to the dragged element, so, in this case, we’re going to use that to update the rest of he page as the dragged element comes down.

For this to happen we first need to put all <body> content inside a <div> element with the id “page”

1
2
3
4
5

<body>
	<div id="page">
		<!-- page content -->
	</div>
</body>

We still haven’t add the content of our dropdown element. Before <div id=”page”> and after <body> type

1
2
3
4
5

<div id="drag_top" class="drag_top">
	<div id="conteudo_drag" class="conteudo_drag" align="center"></div>
	<div id="hand_drag" class="hand_drag">
		<img style="margin-left:99px;" src="/images/drag_me.jpg" alt="Drag Me!" /></div>
</div>

And that’s it. Everything should be working. If not, go over the steps once again and check that everything has been added properly.
If you still can’t get it to work send me an email or comment this post in order, for me, to help.

See you on the next post