Archive for the ‘php’ Category

Do it simpler : Image thumbnail and resize in PHP

resize2 One of the common complex task among webdevelopers is image resizing. It is a big headach when using multiple size images in multiple pages of a single version of image. For long I was using a an script that would create one thumnail version of the image when the image is uploaded. It was not a suitable solution. Many time we will need different size of thumbnails to be used in different location and pages.

I came across PHPThumb. It was a very much better one for me where it can deliver following types of resizing mechanism.

  • adaptiveResize ($width, $height)
  • crop ($startX, $startY, $cropWidth, $cropHeight)
  • cropFromCenter ($cropWidth, $cropHeight = null)
  • resize ($maxWidth, $maxHeight)
  • resizePercent ($percent)
  • rotateImage ($direction = ‘CW’)
  • rotateImageNDegrees ($degrees)
  • save ($fileName)
  • show ()

You can learn more about this script here

Well,I have written a simple script that can work with phpThumb. What it would do is, when I request for a resized version of an original image, it will check for a same resized version. If the one resized version exist, it will return the path of that. Otherwise, a new
resized version will be created and saved before returning the path. This will help to use any size of thumbnail image at any time without wasting match resources.

The script

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<?php
require_once("phpthumb/ThumbLib.inc.php");
/**
* Resize the image according to the given parameter 
* 
* This funciton resize the image to the given criteria and save it 
* in a well-named subdirectory. Then the path to the image will be returnd.
* I the image exists allready with give criteria, the image path is 
* returned simply.
* 
* @param string     $image          path to the source image
* @param integer    $width          required width
* @param integer    $height         required height
* @param string     $resizeStyle    style of resizing (ADAPTIVE , CROP, 
*                                   CROPCENTER, RESIZEPERCENT, RESIZE)
* @param integer    $percent        resize percentage
* @param integer    $starX          start pixel X axis
* @param integer    $starY          start pixel Y axis
* @param integer    $quality        picture quality
* @return string                    path to the reqested resized image
* 
* @author muneer <muneer@live.it>
* @version 1.0
* @copyright (c) 2009 encodez solutions http://www.encodez.com
*/
function getResized($image, $width, $height, $resizeStyle = "ADAPTIVE", 
                        $percent = 100, $starX = 0, $starY = 0, $quality = 80)
{    
    /* setting file name */
    $fileName = basename($image);
 
    /* creating the path for the resized image */
    $path = substr($image, 0, -(strlen($fileName)));
    if($resizeStyle != "RESIZEPERCENT")
    {        
        $path .= $width . "x" . $height . "-" . $resizeStyle;    
    }
    else
    {
        $path .= $percent . "-" . $resizeStyle;
    }
 
    /* 
     * checking whether image exists with the same criteria
     * If exist return the generated path,
     * If not, create the thumnail 
    */ 
    if(file_exists($path . "/" . $fileName) 
            && filemtime($path . "/" . $fileName) > filemtime($image))
    {
        return $path . "/" . $fileName;
    }
    else if(file_exists($image))
    {
        /* making directory for the image if it is not exists */
        if(!file_exists($path))
            mkdir($path, 0777);
 
        $options = array('jpegQuality' => $quality);
        try
        {
            /* creating the  PhpThumbFactory object */
            $thumb = PhpThumbFactory::create($image, $options);            
        }
        catch(Exception $ex)
        {
            echo "\n<!-- There was an error resizing the image \nSource 
                Image : " . $image . " \nError : " . $ex->getMessage() . " -->";
        }
 
        switch($resizeStyle)
        {
            case "ADAPTIVE":        // adaptiveResize
                $thumb->adaptiveResize($width, $height)->save($path . "/" . $fileName);
                break;
            case "CROP":            // crop
                $thumb->crop($startX, $startY, $width, $height)->save($path . "/" . $fileName);
                break;
            case "CROPCENTER":      // cropFromCenter
                $thumb->cropFromCenter($width, $height = null)->save($path . "/" . $fileName);
                break;
            case "RESIZEPERCENT":   // resizePercent
                $thumb->resizePercent($percent)->save($path . "/" . $fileName);
                break;
            case "RESIZE":          // resize
                $thumb->resize($width, $height)->save($path . "/" . $fileName);
                break;
            default:                // resize
                $thumb->resize($width, $height)->save($path . "/" . $fileName);
        }
        return $path . "/" . $fileName;
    }
    else
    {
        /* return 0 if the src image is not exists */
        return 0;
    }
} // end function getResized()

How to use this function?
scenario : Need a adaptive resize verion for /img/catalogue/sample1.jpg at 120px x 100px

solution :

1
<img src="<?php echo getResized("/img/catalogue/sample1.jpg", 120, 100, "ADAPTIVE") ?>" />

This will generate a “adaptive” resized image at the size of 120 px width and 100 px height.

This iamge will have the path

/img/catalogue/120×100-ADAPTIVE/sample1.jpg

This script might helpful you too. Please do not forget to put a comment if you like it Or any suggestion if you have.

Solution : Disabling image caching in browser (IE, Firefox, Chrome)

There is a big headache among web developers with image caching. If you are using the same name while updating the image in the server, browser will not update it as quickly as you updated. This might occur in most cases where you update the image but not the file name. Confused? Let’s Make it clear,,

For example you have an image named “datasheet.jpg”. You are displaying this image on the webpage.

<img src="datasheet.jpg" />

Let’s say, if you are updating this image and leave it with the same name “datasheet.jpg”. Then also you image tag will be same.

<img src="datasheet.jpg" />

In many cases, browser will not know there is a new version of the same image and it will tend to display the content from the web cache. Even no-cache headers are not helping in these type of occasion (I tried and tired). So the returning visitor will see the same old image.

The simplest solution is to change the image filename. But how you will create a different name for an image that is in same name. Ok. Do it simply.

<img src="datasheet.jpg?mtime=1257316941" />

Do this -> Append a Query Sting

When you attach query sting in end of image file name, browser will treat it as a different file name and looks for the web server for new. This will not make the browser to display the cached content.

How to generate an optimized version of Query String for Image file name?

Using simply random value as query string will lead the browser to load the new version of image regardless of updated version. This will make the loading time of the web page too long even if the correct version of image is there on cache. This will become overhead. To overcome this issue, we can generate the query string using file modified time. So the query string will not be changed until file is modified next time. Once the file is modified, the query string will be changed and browser will load the new version.

Generate filename with query string using file modified time (PHP)

Use the filemtime($path) function to generate file modified time.

echo '<img src="datasheet.jpg?mtime=' . filemtime(="datasheet.jpg)  . '" />';

this will generate something similar to this

<img src="datasheet.jpg?mtime=1257316941" />

This will work for all types of browser including IE, FF, GC and all others.
I hope this will be useful for you. Don’t forget to leave a comment if you find any mistake on me.

Escaping ‘%’ in MySQL LIKE statement when sprintf

I wanted to run a SQL query against MySQL database server which contains search string and need to be formated using sprintf. The problem arise when format. It is because of the sign “%” am using to advance my search term. The query was…

1
2
$sql = "SELECT * FROM user WHERE country = '%s' AND fName LIKE '%s%' ORDER BY fName";
$sql = sprintf($sql, $country, $searchTerm);

Here where the error fires. Thanks God, I found the solution for it.
This can be handled simply as follows,

1
2
$sql = "SELECT * FROM user WHERE country = '%s' AND fName LIKE '%s' ORDER BY fName";
$sql = sprintf($sql, $country, "%" . $searchTerm . "%");

but for a query like below, where it need multiple formating due to it complex and dynamic generation, I managed to prepare like below and worked fine for me.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$fieldArray = array("$t1.id", "$t3.avatar", "$t1.login", "$t1.firstName", "$t1.lastName", "$t2.title", "$t1.email", "$t1.active");
 
$sql = "SELECT DISTINCT ";
$sql.= "$t1.id, $t3.avatar, $t1.login, $t1.firstName, $t1.lastName, $t2.title AS groups, $t1.email, $t1.active ";
$sql.= "FROM $t1, $t2, $t3 ";
$sql.= "WHERE $t1.id = $t3.userId AND $t3.userGroup = $t2.id ";
if($searchField > 0 && $searchField < count($fieldArray))
{
    $sql.= "AND " . $fieldArray[$searchField] ." LIKE '%s' ";
    $sql = sprintf($sql, "%" . $searchVal . "%");
}
if($orderBy > 0 && $orderBy < count($fieldArray))
{
    $sql = str_replace("%", "%%", $sql);
    $sql.= "ORDER BY %s %s ";
    $sql = sprintf($sql, $fieldArray[$orderBy], $orderStyle, $start, $count);
}
$sql = str_replace("%", "%%", $sql);
$sql.= "LIMIT %d, %d";
$sql = sprintf($sql, $start, $count);

Before generating the next %, need to double the current % where it will become single % after formated.

Note this

$sql = str_replace("%", "%%", $sql);