Thumb-image sizable

Talk about Image/File fields (uploading, problems etc.)

Moderator: alexandrleonenko

purlut
Junior
Junior
Posts: 15
Joined: Jul 4th, '09, 04:30

Thumb-image sizable

Postby purlut » Oct 4th, '09, 06:05

Hi,
I own a great collection of pictures (184000) and I uses Datagrid to threat all data.
With the fieldtype image I miss the possibility defining the the whised image-size in the datagridcolumn (read thumb)
Therefore I added a new type in which I change the image-size in the column.
It would be great if it could be put in the basic-class self.

I used images as example
case "image":
.....
$field_property_image_width = $this->GetFieldProperty($field_name, "image_width", "view", "lower", "50px");
$field_property_image_height = $this->GetFieldProperty($field_name, "image_height", "view", "lower", "30px");
.....
50px should be passed as a variable
30px should also be passed as a variable
The real thumb-size should be passed as field-data (thumbwith, thumbheight)

Because thumbs may differ in great, a croppingfactor should be calculated...

thks

administrator
Site Admin
Site Admin
Posts: 6066
Joined: Jan 7th, '09, 23:18
Contact:

Re: Thumb-image sizable

Postby administrator » Oct 6th, '09, 16:12

Explain please in more detail....
Do you want DataGrid will calculate a size of thumbnail to use it in view mode?
Instead of predefined width="" and height="" ?

purlut
Junior
Junior
Posts: 15
Joined: Jul 4th, '09, 04:30

Re: Thumb-image sizable

Postby purlut » Oct 8th, '09, 05:43

Firsth.
Datagrid is really fine

Bon,
4 thumbs with following sizes
160-120
120-160
30-160
160-30

Now, fe I want a collumn with an image in with following sizes width MAX 150 and heigth MAX 120

This means, that every thumb that should be shown, has to be calculated, croped, resized while respecting the aspect-ratio

Note that a two additional tags should be wonderfull.
1) a tag who will presize if a thumb may be oversized. FE. We want thumbviews of 200px. If the tag addmits oversizing, the thumb should be blown up. If the tag does'nt addmit oversizing, the thums remains the originals size if widht and height are less or equal the requested size.
2) A second var in which we could define the border-width around the thumb and the cell-border. Of course, default is fe 0. The requested value is of course subtracted from the requested width, height.

This what concerning the presentation.
Concerning functionallity. It should be nice if we could, just as in link... just past some field_nrs and field_data. The goal of is, the have a onclick-event in java in which we could pass those fields as parameters. fe name of original picture. When clicking the thumb, a new window with the original picture opens (of course, this source has to be developped by the developper using datagrid)
The view-type image, now works another way.

thanks

fcsabihu
Junior
Junior
Posts: 14
Joined: Oct 14th, '09, 08:54

Re: Thumb-image sizable

Postby fcsabihu » Sep 11th, '10, 10:37

purlut wrote:Bon,
4 thumbs with following sizes
160-120
120-160
30-160
160-30


Do I understand well, that you want to create thumbnails when uploading an image?

This is my solution:
First, Make a backup of your datagrid class ;-)

Create a directory 'thumbnails' in your images folder. Create subdirectories this way:

Code: Select all

images
    thumbnails
        160x120
        120x160
        30x160
        160x30


Your thumbnails will be placed in these subdirectories...

Now the magic. Place this function in the end of your datagrid class:

Code: Select all

function CreateThumbnails($image_path, $image_name)
      {
         $image_path_name = $image_path.$image_name;
         if(empty($image_path_name))  // No Image?   
            {
                  $this->AddWarning("", "", "The uploaded file doesn't seem to be an image.");
                 }
                 else  // An Image?
                 {
            if($image_path_name)
                {
                  $size   = getimagesize($image_path_name);
                  $width  = $size[0];
                  $height = $size[1];

                  $case = "";
                  switch(substr($image_path_name,strrpos($image_path_name,".")+1))
                     {
                      case 'png':
                          $iTmp = imagecreatefrompng($image_path_name);
                          $case = "png";
                          break;
                      case 'gif':
                          $iTmp = imagecreatefromgif($image_path_name);
                          $case = "gif";
                          break;               
                      case 'jpeg':           
                      case 'jpg':
                      case 'JPEG':           
                      case 'JPG':
                          $iTmp = imagecreatefromjpeg($image_path_name);
                          $case = "jpg";
                          break;               
                    }
                     }
         
         
         $handle=opendir($image_path.'thumbnails/');
         while (false !== ($dir = readdir($handle)))
            {
               if (substr_count($dir,'x') !== 0)
                  {
                  $delimiter_pos=strripos($dir,'x',0);
                  $resize_width=substr($dir,0,$delimiter_pos);
                  $resize_height=substr($dir,$delimiter_pos+1);
            
                  $iOut = imagecreatetruecolor($resize_width, $resize_height);
               
                 $orig_aspect_ratio   =$width/$height;
               $new_aspect_ratio   =$resize_width/$resize_height;
                 
                 if   ($new_aspect_ratio > $orig_aspect_ratio) // New image is wider
               {
               $ratio=$resize_width/$width;
               $tmp_height=$resize_height/$ratio;
               $crop_y=($height-$tmp_height)/2;
               imagecopyresampled ($iOut , $iTmp,
                           0, 0,
                           0, $crop_y,
                           $resize_width, $resize_height,
                           $width, $tmp_height);
               }
      
               if   ($new_aspect_ratio < $orig_aspect_ratio) // New image is taller
                  {
                  $ratio=$resize_height/$height;
                  $tmp_width=$resize_width/$ratio;
                  $crop_x=($width-$tmp_width)/2;
                  imagecopyresampled ($iOut , $iTmp,
                              0, 0,
                              $crop_x, 0,
                              $resize_width, $resize_height,
                              $tmp_width, $height);
                  }
               
                   imagejpeg($iOut,$image_path.'thumbnails/'.$dir.'/'.$image_name,100);
                  
                  }
                }
      }
   }


M'Kay.

Now locate this line:

Code: Select all

if($field_property_resize_image == "true" || $field_property_resize_image === true) $this->ResizeImage($field_property_target_path, $file_name_view, $field_property_resize_width, $field_property_resize_height);


And insert this line right after:

Code: Select all

$this->CreateThumbnails($field_property_target_path, $file_name_view);


Your original image will be uploaded to your images dir and every thumbnail will be cropped and created.

WARNING! I haven't tested much.


Return to “Field type: "image/file"”