CODEWITHSUNDEEP
phpcodeignitercodeigniter-3
lablanco
lablanco

Reputation: 103

Product thumbnail in CodeIgniter

How can I make CodeIgniter thumbnails? I'm using the image resize function in CodeIgniter but I don't want the image to be resized. I want the image to be a small thumbnail on the all products page and I want the image to be big when I go to the product detail page but I don't exactly know how to do that..

So when I go to my product detail page the image is as small as the thumbnail but I want it to be bigger.

Some info: My table column where the pictures are stored in: product_foto

My picture folder where the pictures are stored in: upload

This is my upload function in my controller file:

 public function upload(){

$this->load->library('upload');
$this->load->library('image_lib');

        $config['upload_path'] = './upload/';
        $config['allowed_types'] = 'gif|jpg|png|bmp|jpeg';
        $config['max_size']    = '0';
        $config['max_width']  = '0';
        $config['max_height']  = '0';
        $config['encrypt_name']= true;
        $this->upload->initialize($config);


if(!$this->upload->do_upload('userfile')){
    $error = array('error'=>$this->upload->display_errors());
    $this->load->view('product_form', $error);
}else{

    $data = $this->upload->data();
    $config['image_library'] = 'gd2';
    $config['source_image'] = './upload/'.$data["raw_name"].$data['file_ext'];
    $config['new_image'] = './upload/'.$data["raw_name"].$data['file_ext'];
    $config['create_thumb'] = FALSE;
    $config['maintain_ratio'] = FALSE;
    $config['width']         = 170;
    $config['height']       = 130;

    $this->image_lib->initialize($config);

    $this->image_lib->resize();


    $this->db->insert('products', array(
        'product_foto' => $data["raw_name"].$data['file_ext'],
        'product_naam'  => $this->input->post('product_naam'),
        'product_beschrijving' => $this->input->post('product_beschrijving'),
        'product_categorie'  => $this->input->post('product_categorie'),
        'ophaal_plaats'  => $this->input->post('ophaal_plaats'), 
        'date_created' => date('Y-m-d'),
        'date_updated' => date('Y-m-d')
        ));
    $data['img'] = base_url().'/upload/'.$data["raw_name"].$data['file_ext'];
    header('location:https://kadokado-ferran10.c9users.io/Product/');
}

So as you can see I'm changing the size of the picture to 170 by 130 width but I only want that size on the thumbnail and not on the normal picture.

Upvotes: 1

Views: 864

Answers (1)

Oluwaseye
Oluwaseye

Reputation: 695

     public function upload(){

    $this->load->library('upload');
    $this->load->library('image_lib');

            $config['upload_path'] = './upload/';
            $config['allowed_types'] = 'gif|jpg|png|bmp|jpeg';
            $config['max_size']    = '0';
            $config['max_width']  = '0';
            $config['max_height']  = '0';
            $config['encrypt_name']= true;
            $this->upload->initialize($config);


    if(!$this->upload->do_upload('userfile')){
        $error = array('error'=>$this->upload->display_errors());
        $this->load->view('product_form', $error);
    }else{
       //Main image
        $data = $this - > upload - > data();
        $config['image_library'] = 'gd2';
        $config['source_image'] = './upload/'.$data["raw_name"].$data['file_ext'];
        $config['new_image'] = './upload/'.$data["raw_name"].$data['file_ext'];
        $config['create_thumb'] = FALSE;
        $config['maintain_ratio'] = FALSE;
        $config['width'] = 640;
        $config['height'] = 380;

        //Thumb image
        $dataThumb = $this - > upload - > data();
        $configThumb['image_library'] = 'gd2';
        $configThumb['source_image'] = './upload/'.$dataThumb["raw_name"].$dataThumb['file_ext'];
        $configThumb['new_image'] = './upload/'.$dataThumb["raw_name"].$dataThumb['file_ext'];
        $configThumb['create_thumb'] = TRUE;
        $configThumb['maintain_ratio'] = TRUE;
        $configThumb['width'] = 170;
        $configThumb['height'] = 130;

        $this - > image_lib - > initialize($config);
        $this - > image_lib - > initialize($configThumb);

        $this - > image_lib - > resize();

        //INSERT ** added the new field/column 'product_foto_thumb'
        $this - > db - > insert('products', array(
            'product_foto' => $data["raw_name"].$data['file_ext'],
            'product_foto_thumb' => $dataThumb["raw_name"].$dataThumb['file_ext'],

            'product_naam' => $this - > input - > post('product_naam'),
            'product_beschrijving' => $this - > input - > post('product_beschrijving'),
            'product_categorie' => $this - > input - > post('product_categorie'),
            'ophaal_plaats' => $this - > input - > post('ophaal_plaats'),
            'date_created' => date('Y-m-d'),
            'date_updated' => date('Y-m-d')
        ));
        $data['img'] = base_url().
        '/upload/'.$data["raw_name"].$data['file_ext'];
        $dataThumb['img'] = base_url().
        '/upload/'.$dataThumb["raw_name"].$dataThumb['file_ext'];

        header('location:https://kadokado-ferran10.c9users.io/Product/');
}

STEPS

  1. You need to create add a thumbnail column to your database table
  2. Create a variable to hold thumbnail image
  3. Add the name to your insert query

Upvotes: 1

Related Questions