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']);
}