Encodez Blog » Free Scripts http://encodez.com/blog Computer language design is just like a stroll in the park. Jurassic Park, that is. — Larry Wall Thu, 22 Jul 2010 05:34:40 +0000 en hourly 1 http://wordpress.org/?v=3.0 Do it simpler : Image thumbnail and resize in PHP http://encodez.com/blog/2009/11/do-it-simpler-image-thumbnail-and-resize-php/ http://encodez.com/blog/2009/11/do-it-simpler-image-thumbnail-and-resize-php/#comments Thu, 19 Nov 2009 07:31:37 +0000 Muneer Shaheed http://encodez.com/blog/?p=296 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.

]]> http://encodez.com/blog/2009/11/do-it-simpler-image-thumbnail-and-resize-php/feed/ 0 Broblem! Flash object overlapping menus and layers in Firefox and IE http://encodez.com/blog/2009/02/solve-flash-object-overlapping-menus-and-layers-in-firefox-and-ie/ http://encodez.com/blog/2009/02/solve-flash-object-overlapping-menus-and-layers-in-firefox-and-ie/#comments Tue, 10 Feb 2009 07:38:50 +0000 Muneer Shaheed http://www.encodez.com/blog/?p=119 Hi all, hopefully many of the designer will face this problem. Most possible case is dropdown menu and flash banner. Both always come near by.

To overcome this issue, there is a possible way by using the code <object> and <embed> simply. I have illustrated the code below.

1
2
3
4
5
6
7
8
9
10
11
12
13

<object classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0 movie="myEncodez.swf" quality="high" wmode="transparent" width="600" height="150" version="8,0,0,0" bgcolor="#ffffff" >
 
   <param name=movie value="myEncodez.swf">
   <param name=quality value="high">
   <param name=wmode value="transparent">
   <param name=width value="600">
   <param name=height value="150">
   <param name=version value="8,0,0,0">
   <param name=bgcolor value="#ffffff">
 
   <embed src="myEncodez.swf" pluginspage=http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash type=application/x-shockwave-flash movie="myEncodez.swf" quality="high" wmode="transparent" width="600" height="150" version="8,0,0,0" bgcolor="#ffffff" >
   </embed>
</object>

Also this is a solution for the Microsoft’s recent security update which was annoying developers and users who faced a message saying “Click to activate and use this control” in all <embed> and <object> s. More info about this security update can be found in here

In contrast, Milonic has released a Javascript function which does the same as above <object> & <embed> tags. The code can be downloaded from here. It is very simple to use the code rather to write full <embed> tag in the HTML file. Thanks to Milonic Solutions.

How to use the Milonic’s Insert Active Flash Javascript file (insert_active_flash.js).

1. Download the file and make a reference at the header part of HTML file.

<script type="text/javascript" src="insert_active_flash.js"></script>

2. Create a Layer using <div> and assign an id for that

1
2

<div id="myFlashDiv">
</div>

3. Use the following code withing the “myFlashDiv” layer which will be later replaced by insert_active_flash script.

1
2
3
4
5
6
7
8
9
10
11
12

<div id="myFlashDiv">
<script>
    myFlashObject=new Object
     myFlashObject.movie="flashfile.swf"
     myFlashObject.quality="high"
     myFlashObject.wmode="transparent"
     myFlashObject.width=850
     myFlashObject.height=550
     myFlashObject.version="5,0,0,0"
 
     commitFlashObject(myFlashObject, "myFlashDiv")
</script></div>

This is it. It is simple right?

When later the flash function execute, it will dynamically replace the above javascript code in to <object> code and will embed the movie using classic method. No worry for us!

]]> http://encodez.com/blog/2009/02/solve-flash-object-overlapping-menus-and-layers-in-firefox-and-ie/feed/ 2 Javascript Smooth Scroller http://encodez.com/blog/2009/01/javascript-smooth-scroller/ http://encodez.com/blog/2009/01/javascript-smooth-scroller/#comments Mon, 26 Jan 2009 10:12:51 +0000 Muneer Shaheed http://www.encodez.com/blog/?p=92 I am happy to share the Javascript Scroller which I created for one of my project. Javascript Scroller has been built up with combination of CSS and Javascript.

Scroller Preview

Scroller Preview 1

Preview

Scroller Preview 2

Examples :

  1. Sample 1
  2. Sample 2

Download Link

Link 1 – Link 2

Browser compatibility

Browser compatibility

Editing the width and height of Scroller

It is just simple to edit the size or any other style of Smooth Scroller.

CSS to change

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

#encFilmMain
{
   width:160px; /* full width */
}
#encFilm
{
   height:300px; /* height */
   background-color:#999;
   padding:5px 5px 5px 5px;
}
#encFilmInner
{
   background-color:#efefef;
   padding:5px 5px 5px 5px;
   height:290px;  /* height */
   overflow:hidden;
}

Javascript to change

1
2

var scrollAmount=240;  // scroll amount
var barHeight=290;  //height

If you like or you have any doubts, please do not forget to leave your comment.

]]> http://encodez.com/blog/2009/01/javascript-smooth-scroller/feed/ 25