Welcome Guest, Not a member yet? Register   Sign In
Please critique - square thumbs
#1

[eluser]CoffeeBeanDesign[/eluser]
Hello team!

I have been grappling with uploads & images this morning. I have combined various ideas into a solution which works fine as you can see below. The process is as follows :

- verify file submission
- upload file to store folder
- format image files
- make a square crop
- resize it to 100px
- resize the main image to max dimensions



This may be useful to people wanting to perform a similar task. I would be grateful if the forum elders took a look over the code to see if they can suggest any possible improvements. I know the order of manipulation is counter intuitive, would it be better/more efficient to resize the image first, then crop and resize the thumb?? I guess I'd need to store the ratio and panoramic/portrait values to figure out the x and y axis.

Your thoughts will be appreciated.

Code:
// --------------------------------------------------------------------

    /**
     * Add file to store
     *
     * @access    public
     * @param     field_name
     * @param     type
     * @return    boolean/string
    */    
    function add_to_store($field_name = '', $type = 2)
    {        
        $CI =& get_instance();
        
        $config['file_name'] = time() . rand(10,99);
        $config['upload_path'] = './' . $this->config['store'];
        $config['max_size']    = $this->config['max_size'] * 1024;
        
        $config['allowed_types'] = ($type == 1) ? 'gif|jpg|png' :    
        'csv|exe|psd|pdf|ai|eps|php|js|swf|xhtml|zip|mp3|wav|bmp|gif|jpeg|jpg|png|tiff|tif|css|html|htm|shtml|txt|text|mov|avi|doc|docx|word';
    
        $CI->load->library('upload', $config);
        
        if ( ! $CI->upload->do_upload($field_name)) :

            return $CI->upload->display_errors('','');
        
        else :
        
            $data = $CI->upload->data();
            
            if($type == 1) :
            
                $data['thumb_name'] = str_replace($data['file_ext'], '' , $data['file_name']) . '_th' .  $data['file_ext'];
                
                $process_result = $this->process_image($data);
                
                if($process_result !== TRUE) return $process_result;
                
                return $data;
                
            else :

            return $data;
            
            endif;
            
        endif;
    }
    
    // --------------------------------------------------------------------

    /**
     * Process Image - create square thumb and resize
     *
     * @access    public
     * @param    data
     * @return    boolean/string
    */    
    function process_image($data = '')
    {        
        if($data == '') return FALSE;
        
        $thumb_size = $this->config['thumb_size'];
        $max_height = $this->config['image_height'];
        $max_width = $this->config['image_width'];
        
        $CI =& get_instance();
        
        $CI->load->library('image_lib');
        
        if($data['image_height'] > $data['image_width'] ) :
                    
            $config['x_axis'] = 0;
            $config['y_axis'] = ($data['image_height'] - $data['image_width']) / 2;
            $config['height'] = $data['image_width'];
            $config['width'] = $data['image_width'];
            
        else :
                        
            $config['y_axis'] = 0;
            $config['x_axis'] = ($data['image_width'] - $data['image_height']) / 2;
            $config['height'] = $data['image_height'];
            $config['width'] = $data['image_height'];
        
        endif;        
            
        $config['source_image'] = $data['full_path'];
        $config['new_image'] = $data['file_path'] . $data['thumb_name'];
        $config['maintain_ratio'] = FALSE;
                
        $CI->image_lib->initialize($config);
        
        if( ! $CI->image_lib->crop()) return $CI->image_lib->display_errors('','');
        
        $CI->image_lib->clear();
        
        unset($config);
        
        $config['source_image'] = $data['file_path'] . $data['thumb_name'];
        $config['maintain_ratio'] = FALSE;
        $config['quality'] = 90;
        $config['height'] = $thumb_size;
        $config['width'] = $thumb_size;    
        
        $CI->image_lib->initialize($config);
        
        if( ! $CI->image_lib->resize())  return $CI->image_lib->display_errors('','');
        
        unset($config);
        
        $config['source_image'] = $data['full_path'];
        $config['maintain_ratio'] = TRUE;
        $config['height'] = $max_height;    
        $config['width'] = $max_width;    
        
        $CI->image_lib->initialize($config);
        
        if( ! $CI->image_lib->resize())  return $CI->image_lib->display_errors('','');
        
        $CI->image_lib->clear();        
        
        return TRUE;
    }
#2

[eluser]CoffeeBeanDesign[/eluser]
For anyone who might be interested. I reversed the image process so it goes like this :

- resize to max dimensions
- resize a copy to thumb height/width (depending on orientation)
- square off the thumb

I think this is the most efficient order to do things. I also added the filesize function to 'add_to_store' to check the file exists and also to get the new size after it has been shrunk.



Code:
// --------------------------------------------------------------------

    /**
     * Add file to store
     *
     * @access    public
     * @param    field_name    
     * @param    type    
     * @return    boolean/string
    */    
    function add_to_store($field_name = '', $type = 2)
    {        
        $CI =& get_instance();
        
        $config['file_name'] = time() . rand(10,99);
        $config['upload_path'] = './' . $this->config['store'];
        $config['max_size']    = $this->config['max_size'] * 1024;
        
        $config['allowed_types'] = ($type == 1) ? 'gif|jpg|png' :    
        'csv|exe|psd|pdf|ai|eps|php|js|swf|xhtml|zip|mp3|wav|bmp|gif|jpeg|jpg|png|tiff|tif|css|html|htm|shtml|txt|text|mov|avi|doc|docx|word';
    
        $CI->load->library('upload', $config);
        
        if ( ! $CI->upload->do_upload($field_name)) :

            return $CI->upload->display_errors('','');
        
        else :
        
            $data = $CI->upload->data();

            if($type == 1) :
            
                $data['thumb_name'] = str_replace($data['file_ext'], '' , $data['file_name']) . '_th' .  $data['file_ext'];
                
                $process_result = $this->process_image($data);
                
                if($process_result !== TRUE) return $process_result;
                
                $new_size = @filesize($data['full_path']);
                
                if( ! $new_size) return 'Image upload failed.';
                
                $data['file_size'] = $new_size;            
                            
                return $data;
                
            else :

            return $data;
            
            endif;
            
        endif;
    }
    
    // --------------------------------------------------------------------

    /**
     * Process Image - create square thumb and resize
     *
     * @access    public
     * @param    data
     * @return    boolean/string
    */    
    function process_image($data = '')
    {        
        if($data == '') return FALSE;
        
        $ori = ($data['image_height'] > $data['image_width'] ) ? 'portrait' : 'landscape';        
        $ratio = ($ori == 'portrait') ? $data['image_height'] / $data['image_width'] : $data['image_width'] / $data['image_height'];
        
        $thumb_size = $this->config['thumb_size'];
        $max_height = $this->config['image_height'];
        $max_width = $this->config['image_width'];
        
        $CI =& get_instance();
        
        $CI->load->library('image_lib');
        
        $config['source_image'] = $data['full_path'];
        $config['maintain_ratio'] = TRUE;
        $config['height'] = $max_height;    
        $config['width'] = $max_width;    
        
        $CI->image_lib->initialize($config);
        
        if( ! $CI->image_lib->resize())  return $CI->image_lib->display_errors('','');
        
        $CI->image_lib->clear();
        
        unset($config);
        
        $config['source_image'] = $data['full_path'];
        $config['new_image'] = $data['file_path'] . $data['thumb_name'];
        $config['maintain_ratio'] = TRUE;
        $config['quality'] = 90;
        if($ori == 'landscape') $config['height'] = $thumb_size;
        if($ori == 'portrait') $config['width'] = $thumb_size;    
        
        $CI->image_lib->initialize($config);
        
        if( ! $CI->image_lib->resize())  return $CI->image_lib->display_errors('','');
        
        $CI->image_lib->clear();
        
        unset($config);
                
        if ($ori == 'portrait') :
            
            $height = ($thumb_size * $ratio);    
            $config['x_axis'] = 0;
            $config['y_axis'] = ($height - $thumb_size) / 2;
            
        else :
                        
            $width = ($thumb_size * $ratio);    
            $config['y_axis'] = 0;
            $config['x_axis'] = ($width - $thumb_size) / 2;
    
        endif;    
            
        $config['height'] = $thumb_size;
        $config['width'] = $thumb_size;
        $config['source_image'] = $data['file_path'] . $data['thumb_name'];
        $config['maintain_ratio'] = FALSE;
                
        $CI->image_lib->initialize($config);
        
        if( ! $CI->image_lib->crop()) return $CI->image_lib->display_errors('','');        
        
        return TRUE;
    }




Theme © iAndrew 2016 - Forum software by © MyBB