Page 1 of 1

how to re size images using smarty

Posted: Sat Nov 28, 2009 6:13 am
by bhanu
hi im new to smarty template engine.
is there any plugin for image re size when file uploaded?
i want to resize images to thumb size. without missing clarity.

please help me with example...

thank you
regards
bhanu

Re: how to re size images using smarty

Posted: Sun Nov 29, 2009 2:09 am
by jimmahon
Smarty comes with lots of inbuilt functions that can be used in our smarty templates and that provides rich set of APIs that can leveraged for easy creation of UI. Although sometimes we may need to create our own functionality and plug it in smarty so that it can be used across all smarty projects. So we can create our own custom smarty functions. Custom functions are nothing but a normal PHP function with a given function name and written in a given filename. We will see in next sections how exactly to write a custom function in smarty.

Re: how to re size images using smarty

Posted: Sun Nov 29, 2009 2:49 am
by cpetercarter
You can of course put width and height attributes in the image tags in your Smarty template - indeed it is good practice to do this as it enables the browser to "reserve" the correct space for the image. But it is not a good idea to use width and height attributes in the template as a means of resizing images, as this will slow the browser down. And, of course, resizing by the browser has to be done every time when a page is requested. Instead, the image should be resized (once) to the correct size when it is first stored on the server.

Doing this resizing is a "backend" job. Smarty handles the "frontend" - the presentation of your web pages. So the most efficient approach is to write a normal php function to resize the image when it is first uploaded. Here is a function that I wrote for my own purposes which you can use or adapt if you wish.

Code: Select all

 
function changesize($imagepath,$newWidth,$newpath)  {
 
   //changes the size of an image
 
   //the user can replace the old image with the new (resized) image
 
   //or can store the resized image with a new name
 
  $imagedata = getimagesize($imagepath);
 
  $ratio = $imagedata[1]/$imagedata[0];
 
  $newHeight = $newWidth*$ratio;
 
  $type = $imagedata[2];
 
  switch ($type) {
 
    case 1:
 
         $tempimage = imagecreatefromgif($imagepath);
 
         break;
 
    case 2;
 
         $tempimage = imagecreatefromjpeg($imagepath);
 
         break;
 
    case 3;
 
         $tempimage = imagecreatefrompng($imagepath);
 
         break;
 
    default:
 
         return false;
 
  }
 
  $newimage = imagecreatetruecolor($newWidth,$newHeight);
 
  imagecopyresampled($newimage,$tempimage,0,0,0,0,$newWidth,$newHeight,$imagedata[0],$imagedata[1]);
 
 
 
  if ($newpath ==  $imagepath)  {
 
    unlink ($imagepath);
 
  }
 
  switch($type)  {
 
     case 1:
 
     $return = imagegif($newimage,$newpath);
 
     break;
 
     case 2:
 
     $return = imagejpeg($newimage,$newpath);
 
     break;
 
     case 3:
 
     $return = imagepng($newimage,$newpath);
 
     break;
 
     default:
 
     return false;
 
  }
 
  //it is vital to destroy the temporary images before we leave!
 
  imagedestroy ($tempimage);
 
  imagedestroy ($newimage);
 
  return $return;
 
 }
 
 
Alternatively, if you particularly want to resize to thumbnail size, have a look at timthumb.

You will always lose detail and clarity when you resize to thumbnail size because computer screens use pixels!