Create image thumbnails with php_img_preview

You are viewing revision #13 of this wiki article.
This is the latest version of this article.
You may want to see the changes made in this revision.

« previous (#12)

  1. Features:
  2. How it work ?
  3. Usage
  4. Examples:

This is another way to view images in your application and I like this way because it's simple and I think it's better performance than other.

php_img_preview is great tool created by @muayyadalsad owner of Ojuba (Linux distribution), and here is the features:

Features:

  • support crop images.
  • support adjusts qaulity.
  • support aspect handling.
  • support watermark.
  • support JPG/PNG image types.
  • support php images filters like (grayscale)

How it work ?

when you request to image url this tool will create thumbnail and show it directly if not created before

original image: /images/myfolder/myimage.jpg

when you request $model->img_preview(150,150)

will create thumbnail at if not created: /images/preview/150x150/myfolder/myimage.jpg

Usage

1) Download php_img_preview

2) Download Img class

3) extract php_img_preview to images folder like this:

/images/preview/

-> docs/..

-> .htaccess

-> index.php

-> settings.php.in rename to (settings.php)

and add your custom sizes in sittings.php

public static $sizes = array(
	"75x110"=>true,
  )

4) create lib folder and exreact Img.zip here:

/protected/lib/Img.php

5) add lib to config/main

'import'=>array(
		'application.lib.*',
....
	),

6) in model:

public function img_preview($w=false, $h=false) {
		$img = 0;
		if ($this->image_uri != NULL){ $img = $this->image_uri; }
		return Img::embed('/myimagesfolder/'.$img, $w, $h, 'default-empty-image.png',
		array("title"=>$this->name));
	}

*Note: $this->image_uri it's attribute image in model

7) in view file: just call the function and your costume sizes

echo $model->img_preview(75,110);

Live example result (HTML):

<img src="http://ae.cineklik.com/images/tb/75x110//movie_photos/finding_nemo_poster.jpg.jpg" width="75px" height="110px" title="Finding Nemo" alt="Finding Nemo">

Examples: