1084

Single Image Uploader

Comments for “Single Image Uploader”
 

Posted by DaddyJohn on Saturday 16th April 2022 at 11:41 GMT

Hi all,
In the TG single file uploader we get a directory for the Thumbnail. I would like to have an additional directory for an additional size. So for example, I would eventually have Desktop, Tablet and Mobile versions of the image, I can then use srcset or inline media queries in my code to select the right size image for the device size. This approach would speed up page loads.

I could write my own code to do all of this, but it seems a shame to not make use of the Trongate picture settings.
I have so far taken the following approach, and have succeeded in a new Tablet directory been created. but no image gets loaded to the new directory and the Thumbnail image appears incorrect now as the image is taking on the wrong size and is blurry.

Here are the changes I made.

In Trongate.php
public function upload_picture($data) {}
I added
 //rock the tablet
        if ((isset($data['tablet_max_width'])) && (isset($data['tablet_max_height'])) && (isset($data['tablet_dir']))) {
            $ditch = $data['destination'];
            $replace = $data['tablet_dir'];
            $data['filename'] = str_replace($ditch, $replace, $data['filename']);
            $data['max_width'] = $data['tablet_max_width'];
            $data['max_height'] = $data['tablet_max_height'];
            $this->save_that_pic($data);
        }


and then in my Controller file looks like this from function _init_picture_settings() {}

function _init_picture_settings() { 
        $picture_settings['max_file_size'] = 2000;
        $picture_settings['max_width'] = 2000;
        $picture_settings['max_height'] = 2000;
        $picture_settings['resized_max_width'] = 2000;
        $picture_settings['resized_max_height'] = 2000;
        $picture_settings['destination'] = 'blogs_pics';
        $picture_settings['target_column_name'] = 'picture';
        $picture_settings['thumbnail_dir'] = 'blogs_pics_thumbnails';
        $picture_settings['thumbnail_max_width'] = 250;
        $picture_settings['thumbnail_max_height'] = 250;

        $picture_settings['tablet_dir'] = 'blogs_pics_tablets';
        $picture_settings['tablet_max_width'] = 1000;
        $picture_settings['tablet_max_height'] = 1000;

        $picture_settings['upload_to_module'] = true;
        return $picture_settings;
    }

    function _make_sure_got_destination_folders($update_id, $picture_settings) {

        $destination = $picture_settings['destination'];

        if ($picture_settings['upload_to_module'] == true) {
            $target_dir = APPPATH.'modules/'.segment(1).'/assets/'.$destination.'/'.$update_id;
        } else {
            $target_dir = APPPATH.'public/'.$destination.'/'.$update_id;
        }

        if (!file_exists($target_dir)) {
            //generate the image folder
            mkdir($target_dir, 0777, true);
        }

        //attempt to create thumbnail directory
        if (strlen($picture_settings['thumbnail_dir'])>0) {
            $ditch = $destination.'/'.$update_id;
            $replace = $picture_settings['thumbnail_dir'].'/'.$update_id;
            $thumbnail_dir = str_replace($ditch, $replace, $target_dir);
            if (!file_exists($thumbnail_dir)) {
                //generate the image folder
                mkdir($thumbnail_dir, 0777, true);
            }          
        }
        //TABLET ENTRY
        //attempt to create tablet directory
        if (strlen($picture_settings['tablet_dir'])>0) {
            $ditch = $destination.'/'.$update_id;
            $replace = $picture_settings['tablet_dir'].'/'.$update_id;
            $tablet_dir = str_replace($ditch, $replace, $target_dir);
            if (!file_exists($tablet_dir)) {
                //generate the image folder
                mkdir($tablet_dir, 0777, true);
            }
        }
        

    }

    function submit_upload_picture($update_id) {

        $this->module('trongate_security');
        $this->trongate_security->_make_sure_allowed();

        if ($_FILES['picture']['name'] == '') {
            redirect($_SERVER['HTTP_REFERER']);
        }

        $submit = post('submit');

        if ($submit == 'Upload') {
            $picture_settings = $this->_init_picture_settings();
            extract($picture_settings);

            $validation_str = 'allowed_types[gif,jpg,jpeg,png]|max_size['.$max_file_size.']|max_width['.$max_width.']|max_height['.$max_height.']';
            $this->validation_helper->set_rules('picture', 'item picture', $validation_str);

            $result = $this->validation_helper->run();

            if ($result == true) {

                $config['destination'] = $destination.'/'.$update_id;
                $config['max_width'] = $resized_max_width;
                $config['max_height'] = $resized_max_height;

                if ($thumbnail_dir !== '') {
                    $config['thumbnail_dir'] = $thumbnail_dir.'/'.$update_id;
                    $config['thumbnail_max_width'] = $thumbnail_max_width;
                    $config['thumbnail_max_height'] = $thumbnail_max_height;
                }
                //TABLET ENTRY
                if ($tablet_dir !== '') {
                    $config['tablet_dir'] = $tablet_dir.'/'.$update_id;
                    $config['tablet_max_width'] = $tablet_max_width;
                    $config['tablet_max_height'] = $tablet_max_height;
                }

                //upload the picture
                $config['upload_to_module'] = (!isset($picture_settings['upload_to_module']) ? false : $picture_settings['upload_to_module']);
                $this->upload_picture($config);

                //update the database
                $data[$target_column_name] = $_FILES['picture']['name'];
                $this->model->update($update_id, $data);

                $flash_msg = 'The picture was successfully uploaded';
                set_flashdata($flash_msg);
                redirect($_SERVER['HTTP_REFERER']);

            } else {
                redirect($_SERVER['HTTP_REFERER']);
            }
        }

    }

    function ditch_picture($update_id) {

        if (!is_numeric($update_id)) {
            redirect($_SERVER['HTTP_REFERER']);
        }

        $this->module('trongate_security');
        $this->trongate_security->_make_sure_allowed();

        $result = $this->model->get_where($update_id);

        if ($result == false) {
            redirect($_SERVER['HTTP_REFERER']);
        }

        $picture_settings = $this->_init_picture_settings();
        $target_column_name = $picture_settings['target_column_name'];
        $picture_name = $result->$target_column_name;

        if ($picture_settings['upload_to_module'] == true) {
            $picture_path = APPPATH.'modules/'.segment(1).'/assets/'.$picture_settings['destination'].'/'.$update_id.'/'.$picture_name;
        } else {
            $picture_path = APPPATH.'public/'.$picture_settings['destination'].'/'.$update_id.'/'.$picture_name;
        }

        $picture_path = str_replace('\\', '/', $picture_path);

        if (file_exists($picture_path)) {
            unlink($picture_path);
        }

        if (isset($picture_settings['thumbnail_dir'])) {
            $ditch = $picture_settings['destination'].'/'.$update_id;
            $replace = $picture_settings['thumbnail_dir'].'/'.$update_id;
            $thumbnail_path = str_replace($ditch, $replace, $picture_path);

            if (file_exists($thumbnail_path)) {
                unlink($thumbnail_path);
            }
        }
        //TABLET ENTRY
        if (isset($picture_settings['tablet_dir'])) {
            $ditch = $picture_settings['destination'].'/'.$update_id;
            $replace = $picture_settings['tablet_dir'].'/'.$update_id;
            $tablet_path = str_replace($ditch, $replace, $picture_path);

            if (file_exists($tablet_path)) {
                unlink($tablet_path);
            }
        }

        $data[$target_column_name] = '';
        $this->model->update($update_id, $data);
        
        $flash_msg = 'The picture was successfully deleted';
        set_flashdata($flash_msg);
        redirect($_SERVER['HTTP_REFERER']);
    }
Early Adopter

DaddyJohn

User Level: Early Adopter

Date Joined: 23/01/2022

Posted by djnordeen on Saturday 16th April 2022 at 13:20 GMT

Hello John,
Just taking a guess. Check what $thumbnail_dir. is showing.
Also check what $tablet_dir is showing.
Che the code below to the points to troubleshoot.

            if ($result == true) {

                $config['destination'] = $destination.'/'.$update_id;
                $config['max_width'] = $resized_max_width;
                $config['max_height'] = $resized_max_height;
Point 1. Check json($config, true);
             Also check.  json($thumbnail_dir, true);
             And then      json($tablet_dir, true);
                if ($thumbnail_dir !== '') {
                    $config['thumbnail_dir'] = $thumbnail_dir.'/'.$update_id;
                    $config['thumbnail_max_width'] = $thumbnail_max_width;
                    $config['thumbnail_max_height'] = $thumbnail_max_height;
                }
Point 2
                //TABLET ENTRY
                if ($tablet_dir !== '') {
                    $config['tablet_dir'] = $tablet_dir.'/'.$update_id;
                    $config['tablet_max_width'] = $tablet_max_width;
                    $config['tablet_max_height'] = $tablet_max_height;
                }


Hope this helps,
Dan
Early Adopter

djnordeen

User Level: Early Adopter

Date Joined: 20/08/2021

Posted by DaddyJohn on Sunday 17th April 2022 at 07:16 GMT

Hi Dan, thanks for the pointers.

The JSON checks seems to suggest that the right data is being produced. In fact within submit_upload_picture($update_id){}

if I add a further json check
//upload the picture
                $config['upload_to_module'] = (!isset($picture_settings['upload_to_module']) ? false : $picture_settings['upload_to_module']);               
                $this->upload_picture($config);
                json($config, true);

I get the following response. (deprecation warnings aside in Image.php)
Deprecated: Implicit conversion from float 140.625 to int loses precision in C:\xampp\htdocs\image_resize\engine\Image.php on line 199

Deprecated: Implicit conversion from float 140.625 to int loses precision in C:\xampp\htdocs\image_resize\engine\Image.php on line 220
{
    "destination": "blogs_pics\/2",
    "max_width": 2000,
    "max_height": 2000,
    "thumbnail_dir": "blogs_pics_thumbnails\/2",
    "thumbnail_max_width": 250,
    "thumbnail_max_height": 250,
    "tablet_dir": "blogs_pics_tablets\/2",
    "tablet_max_width": 1000,
    "tablet_max_height": 1000,
    "upload_to_module": true
}

which suggest that the right information is being sent via $this->upload_picture($config);

Now moving to Trongate.php where we find the upload_picture function, that passes its data to save_that_pic and a json statement here at line 225

 $this->save_that_pic($data);
        json($data, true);


returns
{
    "destination": "blogs_pics\/2",
    "max_width": 2000,
    "max_height": 2000,
    "thumbnail_dir": "blogs_pics_thumbnails\/2",
    "thumbnail_max_width": 250,
    "thumbnail_max_height": 250,
    "tablet_dir": "blogs_pics_tablets\/2",
    "tablet_max_width": 1000,
    "tablet_max_height": 1000,
    "upload_to_module": true,
    "image": {},
    "tmp_file_width": 1920,
    "tmp_file_height": 1080,
    "filename": "..\/modules\/blogs\/assets\/blogs_pics\/2\/WEBSITE-DEVELOPER.jpg"
}

So, it would seem from all of this, that something is going wrong after this point. I will keep digging further. But any insights gratefully recieved.

Thanks
Early Adopter

DaddyJohn

User Level: Early Adopter

Date Joined: 23/01/2022

Posted by Myhiideas on Sunday 17th April 2022 at 13:12 GMT

Hello John,
The only other thing I can think of is to try to save the image one at a time.
Upload and save the Thumbnail first and the Upload and save the Tablet next.

By doing it this way it would separate the two tasks you are trying to accomplish,
and maybe help sort it out.

Dan

Myhiideas

User Level: Guest

Date Joined: 1/11/2021

Posted by DaddyJohn on Monday 18th April 2022 at 08:46 GMT

Hi Dan, thanks for the suggestion.

I think the solution I am going to go for is similar.

I am going to write a function that runs after the completion of the single image uploader. The function would just create another directory and then copy and resize the image from the original folder.

I will let you know how I get on.
Early Adopter

DaddyJohn

User Level: Early Adopter

Date Joined: 23/01/2022

Posted by DaddyJohn on Monday 18th April 2022 at 10:22 GMT

So, I have solved the first part of this now, which is to have a new directory added with a new resized images for tablet devices.

1) In the Controller file in function submit_upload_picture($update_id) {}
I added some code to create a new directory.
2) I created a new function tablet_image($source, $destination, $size, $quality=null) {}
This gets called towards the end of function submit_upload_picture($update_id) {}
You can add an integer in $size like 50 , and this will reduce the image size by 50%

I now need to work on the delete part, but feeling good.

This comment was edited by DaddyJohn on Monday 18th April 2022 at 10:23 GMT

Early Adopter

DaddyJohn

User Level: Early Adopter

Date Joined: 23/01/2022

Posted by djnordeen on Monday 18th April 2022 at 10:47 GMT

Nice Glad you are making progress
Early Adopter

djnordeen

User Level: Early Adopter

Date Joined: 20/08/2021

×