Easy CSS Star Rating Layout

post_stars

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!

stars1
Imagem 4

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:stars_emptystars_full

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.

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!

24
Jul 2009
AUTHOR joseairosa
CATEGORY

Uncategorized

COMMENTS No Comments

Image Scale&Crop with Cache support in PHP

Image Scale&Crop with Cache support in PHP

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:


 * 
 * 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!

21
Jul 2009
AUTHOR joseairosa
CATEGORY

Uncategorized

COMMENTS No Comments

Create a simple TagCloud in PHP

Create a simple TagCloud in PHP

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:

hello this is jose blog

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.

09
Jul 2009
AUTHOR joseairosa
CATEGORY

Uncategorized

COMMENTS No Comments

Data lost! (Panic)

Well… as some that might visited my blog noticed I had a small problem… yes yes… NO, it was not the Aliens… well ok, some might’ve helped, but… I lost most of my posts!

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

Until then.

09
Jul 2009
AUTHOR joseairosa
CATEGORY

Uncategorized

COMMENTS No Comments