[Robert]

Im using 

// image upload
$crud->set_field_upload('imagine','assets/uploads/files');
$crud->callback_after_upload(array($this,'imagini_callback_after_upload'));

// callback - image resize
function imagini_callback_after_upload($uploader_response, $field_info, $files_to_upload)	{
	$this->load->library('image_moo');	 
	$file_uploaded = $field_info->upload_path.'/'.$uploader_response[0]->name;	
	$this->image_moo->load($file_uploaded)->resize(75,75)->save($file_uploaded,true);	 
	return true;
}

my question is this : I'm doing something wrong or there is no way without using Image crud to add a image, see a small size of it in the view 75 x 75 and when you click it see the full size.

[Robert]

Any feedback ?

[Amit Shah]

Hi Robert,

If not mistakened, this code will technically resize the uploaded image to 75X75 .. and if u then click on it... it will remain the same size. What i can suggest you can do is... generate a thumbnail out of uploaded image and save it some place.

Then when u want to view in the grid.. u can do a column callback and return the same a href call like it would be on the actual one.. but this time the image that you will show is the small one and the link u will give is to the bigger1 (actual 1) - this way u can achieve the given solution!!

[Robert]

Thanks for the feedback ... do you have a example on how can i do that with image_moo im a bit stuck ...

[briggers]

Hi Robert,

 

This is a controller I am using which does pretty much what I think you are looking for but uses te native CI image library. I also want to store the original image plus one for display on the web and another as a thumbnail So I resize it twice as you can see in the code.

<?php  if ( ! defined('BASEPATH')) exit('No direct script access allowed');
 
class Pictures extends CI_Controller {

	function __construct()
	{
		parent::__construct();

		/* Standard Libraries of codeigniter are required */
		$this->load->database();
		$this->load->helper('url');
		$this->load->helper('text');
		$this->load->helper('inflector');
		/* ------------------ */ 

		$this->load->library('grocery_CRUD');

	}

	public function index()
	{
		echo "<h1>Welcome to Pictures admin</h1>";
						die();
	}
	
	public function pictures_list()
	{
		$crud = new grocery_CRUD();
		
		$this->load->config('grocery_crud');
		$this->config->set_item('grocery_crud_file_upload_allow_file_types','gif|jpeg|jpg|png');
		
		$crud->set_subject('Pictures');
		$crud->set_table('pictures');
				
		// select only pictures belonging to a specific gallery
		$gallery = $this->uri->segment(3,0);
		if ($gallery != 0)
		{
			$crud->where('pictures.gallery_id',$gallery);
		}
		else
		{
			$crud->where('pictures.gallery_id >',0);
		}
		
		$crud->order_by('picture_title');
		
		$crud->columns('gallery_id','picture_title','picture_id','picture_file','picture_status','picture_owner','picture_create_date','picture_creator');
		
		$crud->add_fields('picture_slug','picture_title','picture_description','picture_owner','gallery_id','picture_status','picture_file','picture_create_date','picture_creator');
		$crud->edit_fields('picture_slug','picture_title','picture_description','picture_owner','gallery_id','picture_status','picture_create_date','picture_creator');
		
		$crud->set_relation('gallery_id','galleries','gallery_name');
		$crud->display_as('gallery_id','Gallery');
		$crud->set_field_upload('picture_file','assets/uploads/images/galleries/full');
		
		$crud->field_type('picture_status','true_false');
		$crud->field_type('picture_slug','invisible');
		$crud->field_type('picture_create_date','invisible');
		$crud->field_type('picture_creator','invisible');
		
		$crud->required_fields('picture_title','picture_description','picture_owner','gallery_id','picture_status','picture_file');
		
		//$crud->unique_fields('picture_slug');
		
		$crud->callback_before_insert(array($this,'insert_callback'));
		
		$crud->callback_before_update(array($this,'update_callback'));
		
		$crud->callback_after_upload(array($this,'resize_callback'));
		
		$crud->callback_before_delete(array($this,'delete_images'));
		
		$output = $crud->render();

		$this->_picture_output($output);
		
	}
	
	function _picture_output($output = null)
	{
		$this->load->view('admin/admin_template.php',$output);    
	}
	
	function insert_callback($post_array, $primary_key = null)
	{
		$slug = character_limiter($post_array['picture_title'], 32);
		$post_array['picture_slug'] = strtolower(underscore($slug));
		$post_array['picture_create_date'] = date('Y-m-d H:i:s');
		$post_array['picture_creator'] = 'fred'; // get from session
		return $post_array;
	}
	
	function update_callback($post_array, $primary_key = null)
	{
		$slug = character_limiter($post_array['picture_title'], 32);
		$post_array['picture_slug'] = strtolower(underscore($slug));
		return $post_array;
	}
	
	function resize_callback($uploader_response,$field_info, $files_to_upload)
	{
		$file_uploaded = $field_info->upload_path.'/'.$uploader_response[0]->name;
		
		$new_display = str_replace('full','display',$file_uploaded);
		$new_thumb = str_replace('full','thumb',$file_uploaded);

		// Resize image for display
		$config['image_library'] = 'gd2';
		$config['source_image']	= $file_uploaded;
		$config['create_thumb'] = false;
		$config['maintain_ratio'] = TRUE;
		$config['width']	 = 750;
		$config['height']	= 500;
		$config['new_image'] = $new_display;

		$this->load->library('image_lib', $config); 

		if ( ! $this->image_lib->resize())
		{
			$this->form_validation->set_message($this->image_lib->display_errors());
		}
		$this->image_lib->clear();
		

		// Resize image for thumbs
		$config['image_library'] = 'gd2';
		$config['source_image']	= $new_display;
		$config['create_thumb'] = false;
		$config['maintain_ratio'] = TRUE;
		$config['width']	 = 160;
		$config['height']	= 110;
		$config['new_image'] = $new_thumb;
		$this->image_lib->initialize($config);
		
		if ( ! $this->image_lib->resize())
		{
			$this->form_validation->set_message($this->image_lib->display_errors());
		}
		
	}

	function delete_images($primary_key)
	{

		$this->db->where('picture_id',$primary_key);
    $picture = $this->db->get('pictures')->row();
		$file = $picture->picture_file;
		$path = 'assets/uploads/images/galleries/';
		$dirs = array('full','display','thumb');
		foreach($dirs as $path1)
		{
			if (file_exists($path.$path1.'/'.$file))
			{
				unlink($path.$path1.'/'.$file);
			}
		}
		return true;

	}
	
	
}

/* End of file pictures.php */
/* Location: ./application/controllers/admin/pictures.php */

Hope it helps

[Kobus]

Very nice post, briggers. I have implemented it successfully except for one thing, which I am still looking for a proper solution:

 

My image uploads fine, but once uploaded, it displays the large uploaded file. I tried callback_column, callback_edit_field and callback_add_field, and that works on to a degree. The problem is that it replaces the entire delete and lightbox functionality of the views.

 

Any idea how to resolve this problem?

 

Then there is a minor problem (but not with your script, I believe) and that is that the delete images works on deletion of the post. If I delete the image inside the post, the delete callback does not trigger. I tried looking for a callback similar to "callback_after_upload_delete" or something to that effect, but could not find anything such as that. Any ideas about this?

 

Regards,

 

Kobus

[Kobus]

In the spirit of sharing, I'd like to add to briggers' brilliant solution, but modifying the resize_callback function to allow creation of square thumbnails for gallery displays. What it does is first determines whether height or width is greater, and then crop according to that to ensure that you have a perfectly square thumbnail centered at the middle of the image. If your image is 5000 (wide) x 2500 (high), your image will first be sized to the specified width/height of 800x600 (maintaining aspect ratio, so this one will be 800x400). Now this file is used to create the thumbnail to 300x150 (ratio of width to height is 2). After this, the cropping is done from the center out, so you end up with 150x150, centered at the center of the image, with the sides cut off.

 

    function resize_callback($uploader_response, $field_info, $files_to_upload)
    {
        $file_uploaded = $field_info->upload_path . '/' . $uploader_response[0]->name;
        $new_display = str_replace('original_image', 'view_image', $file_uploaded);
        $new_thumb = str_replace('original_image', 'thumbnail', $file_uploaded);

        // Create viewing image
        $config['image_library'] = 'gd2';
        $config['source_image'] = $file_uploaded;
        $config['create_thumb'] = FALSE;
        $config['maintain_ratio'] = TRUE;
        $config['width'] = 800;
        $config['height'] = 600;
        $config['new_image'] = $new_display;
        $this->load->library('image_lib', $config);
        if (!$this->image_lib->resize())
        {
            $this->form_validation->set_message($this->image_lib->display_errors());
            return false;
        }

        // Create thumbnail image
        $this->image_lib->clear();
        list($w, $h, $t, $a) = getimagesize($new_display);
        if ($w >= $h)
        {
            $ratio = $w / $h;
            $config['x_axis'] = ($w / 2) -  ($h / 2);
            $config['y_axis'] = $h / 4;
            $config['width'] = 150 * $ratio;
            $config['height'] = 150;
        }
        elseif ($h > $w)
        {
            $ratio = $h / $w;
            $config['x_axis'] = $w / 4;
            $config['y_axis'] = ($h / 2) - ($h / 2);
            $config['width'] = 150;
            $config['height'] = 150 * $ratio;
        }
        $config['image_library'] = 'gd2';
        $config['source_image'] = $new_display;
        $config['create_thumb'] = FALSE;
        $config['maintain_ratio'] = FALSE;
        $config['new_image'] = $new_thumb;
        $this->image_lib->initialize($config);
        if (!$this->image_lib->resize())
        {
            $this->form_validation->set_message($this->image_lib->display_errors());
        }

        // Crop thumbnail image
        $this->image_lib->clear();
        list($w, $h, $t, $a) = getimagesize($new_thumb);
        if ($w >= $h)
        {
            $config['x_axis'] = $w / 4;
            $config['y_axis'] = 0;
        }
        elseif ($h > $w)
        {
            $config['x_axis'] = 0;
            $config['y_axis'] = $h / 4;
        }
        $config['width'] = 150;
        $config['height'] = 150;
        $config['image_library'] = 'gd2';
        $config['source_image'] = $new_thumb;
        $config['create_thumb'] = FALSE;
        $config['maintain_ratio'] = FALSE;
        $config['new_image'] = $new_thumb;
        $this->image_lib->initialize($config);
        if (!$this->image_lib->crop())
        {
            $this->form_validation->set_message($this->image_lib->display_errors());
        }
        return true;
    }

Regards,

 

Kobus

[aclink]

do you mean saving images after processing image, say resizing images and then when you want the original images, it will turn back to you. quite fancinationg. i am just looking for ways to achieve this purpose.

image thumnail seems like a good solution to crop, scale. thank you for sharing your codes in changing height and width.

[Robert]

Thanks for the code briggers but i jest modified the flexigrid css at " .flexigrid a img " adding height:80px; and this did the trick for my  needs, if this ca help someone.

[Kobus]

I also used it as Robert did, however, there should be a way to use a real thumbnail to make this work, as I am working with 4MB images at a time, therefore, loading 10 images of 4MB in the list is a horrendous waste of bandwidth. :-)

 

Kobus