{"id":7334,"date":"2021-12-17T03:26:06","date_gmt":"2021-12-17T03:26:06","guid":{"rendered":"https:\/\/programmingfields.com\/?p=7334"},"modified":"2026-05-02T06:29:31","modified_gmt":"2026-05-02T06:29:31","slug":"resize-image-by-image-manipulation-in-codeigniter-4","status":"publish","type":"post","link":"https:\/\/programmingfields.com\/resize-image-by-image-manipulation-in-codeigniter-4\/","title":{"rendered":"Resize Image By Image Manipulation in CodeIgniter 4"},"content":{"rendered":"\n<p>You can manipulate the image after uploading it in Codeigniter 4. There is no package or third-party library for it. The CodeIgniter 4 provides the image manipulation class. Through this class, you can manipulate images as per your need. You can set a watermark on the uploaded image. You can resize, and crop the image also. In this post, you will get to know how to <strong>resize image in CodeIgniter 4<\/strong>. We will see these options one by one by applying them to the image. We have already seen the <a href=\"https:\/\/programmingfields.com\/how-to-upload-image-and-file-in-codeigniter-4-with-validation\/\">Image upload in CodeIgniter 4<\/a>. So, let&#8217;s start by creating a new project in CodeIgniter 4. The image manipulation will help to reduce the image size. The image manipulation provides various options for the uploaded images. These options are available with this class-<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Image resizing,<\/strong><\/li><li><strong>Thumbnail creation,<\/strong><\/li><li><strong>Image cropping,<\/strong><\/li><li><strong>Image rotating.<\/strong><\/li><\/ul>\n\n\n\n<p>By resizing the image, you can compress and reduce the image size as well. It will boost the speed of the application also.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-light-blue ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/programmingfields.com\/resize-image-by-image-manipulation-in-codeigniter-4\/#Prerequisites\" >Prerequisites<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/programmingfields.com\/resize-image-by-image-manipulation-in-codeigniter-4\/#Project_Setup_To_Resize_Image_in_CodeIgniter_4\" >Project Setup To Resize Image in CodeIgniter 4<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/programmingfields.com\/resize-image-by-image-manipulation-in-codeigniter-4\/#Configure_Project_Environment_in_CodeIgniter_4\" >Configure Project Environment in CodeIgniter 4<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/programmingfields.com\/resize-image-by-image-manipulation-in-codeigniter-4\/#Create_and_Configure_Database_in_CodeIgniter_4\" >Create and Configure Database in CodeIgniter 4<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/programmingfields.com\/resize-image-by-image-manipulation-in-codeigniter-4\/#Create_a_Database_Migration_to_Resize_Image_in_CodeIgniter_4\" >Create a Database Migration to Resize Image in CodeIgniter 4<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/programmingfields.com\/resize-image-by-image-manipulation-in-codeigniter-4\/#Migrate_Tables_in_CodeIgniter_4\" >Migrate Table(s) in CodeIgniter 4<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/programmingfields.com\/resize-image-by-image-manipulation-in-codeigniter-4\/#Create_a_Model_To_Resize_Image_in_CodeIgniter_4\" >Create a Model To Resize Image in CodeIgniter 4<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/programmingfields.com\/resize-image-by-image-manipulation-in-codeigniter-4\/#Create_a_View_For_the_Image_Upload\" >Create a View For the Image Upload<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/programmingfields.com\/resize-image-by-image-manipulation-in-codeigniter-4\/#Create_a_Controller_to_Resize_Image_in_Codeigniter_4\" >Create a Controller to Resize Image in Codeigniter 4<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/programmingfields.com\/resize-image-by-image-manipulation-in-codeigniter-4\/#Create_Routes\" >Create Routes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/programmingfields.com\/resize-image-by-image-manipulation-in-codeigniter-4\/#Result_For_Image_Resizing_in_CodeIgniter_4\" >Result For Image Resizing in CodeIgniter 4<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/programmingfields.com\/resize-image-by-image-manipulation-in-codeigniter-4\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Prerequisites\"><\/span><strong>Prerequisites<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>We are going to create a new project in CodeIgniter 4. There are two ways to have a Codeigniter 4 project setup. Either you may download the setup directly from the official website of CodeIgniter. Or you can install it using the composer. I will prefer the composer.<\/p>\n\n\n\n<p>Also, you will require the below configuration for the CodeIgniter 4 project setup.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>PHP &gt;= 7.3<\/strong><\/li><li><strong>MySQL (version &gt; 5)<\/strong><\/li><li><strong>Apache\/Nginx Server<\/strong><\/li><li><strong>VS Code Editor<\/strong><\/li><li><strong>Composer<\/strong><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Project_Setup_To_Resize_Image_in_CodeIgniter_4\"><\/span><strong>Project Setup To Resize Image in CodeIgniter 4<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>At the very step, open the terminal or command prompt whatever you have. Now, hit the below command.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">composer create-project codeigniter4\/appstarter ci4-image-resize<\/code><\/pre>\n\n\n\n<p>This will install CodeIgniter 4. It may take a couple of minutes to setup the project. It depends upon your internet speed as well.<\/p>\n\n\n\n<p>Once, you have the project, let&#8217;s do the environment configuration. This will enable the project to run it locally.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Configure_Project_Environment_in_CodeIgniter_4\"><\/span><strong>Configure Project Environment in CodeIgniter 4<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Before doing any configuration, you need to open the project in a code editor. I will prefer <strong>VS Code<\/strong>. Once, you have opened the project, let&#8217;s navigate to the <strong>env<\/strong> file. So, at the very first step, you will need to rename it to&nbsp;<strong>.env<\/strong>. Now, open this file and search for the&nbsp;<strong>Environment <\/strong>configuration.<\/p>\n\n\n\n<p>Under the environment section, you will see the <strong>CI_ENVIRONMENT<\/strong>. By default its value is production. But, we have to run the project in the local environment. Hence, this will require to be renamed as&nbsp;<strong>development<\/strong>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">#--------------------------------------------------------------------\n# ENVIRONMENT\n#--------------------------------------------------------------------\n\nCI_ENVIRONMENT = development<\/code><\/pre>\n\n\n\n<p>Next, we have to do the setup for the database. Hence, create a new database in MySQL.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_and_Configure_Database_in_CodeIgniter_4\"><\/span><strong>Create and Configure Database in CodeIgniter 4<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Firstly, you need to have a database. I have created a new database using the below command.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"sql\" class=\"language-sql\">CREATE DATABASE ci4_image<\/code><\/pre>\n\n\n\n<p>After creating the database, let&#8217;s come back to the project environment. Scroll down and come to the Database section. Now, you will have to configure the database as shown below.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">#--------------------------------------------------------------------\n# DATABASE\n#--------------------------------------------------------------------\n\ndatabase.default.hostname = localhost\ndatabase.default.database = ci4_image\ndatabase.default.username = root\ndatabase.default.password = root\ndatabase.default.DBDriver = MySQLi<\/code><\/pre>\n\n\n\n<p>Now, you are done with the database configuration.<\/p>\n\n\n\n<p>In the next step, you will need to create a migration file for the table.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/programmingfields.com\/login-and-registration-authentication-in-codeigniter-4\/\" target=\"_blank\" rel=\"noreferrer noopener\">Login and Registration Authentication in Codeigniter 4<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_a_Database_Migration_to_Resize_Image_in_CodeIgniter_4\"><\/span><strong>Create a Database Migration to Resize Image in CodeIgniter 4<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>We will store the image name in the database table. Hence, using the migration, you can generate a schema for the table.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">php spark make:migration imageResize<\/code><\/pre>\n\n\n\n<p>The above command will create a migration file with the name <strong>timestamp_Imageresize.php<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"122\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/12\/Screenshot-from-2021-12-13-08-39-31.png?resize=840%2C122&#038;ssl=1\" alt=\"CodeIgniter 4 Create Migration - Resize image in codeigniter 4\" class=\"wp-image-7356\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/12\/Screenshot-from-2021-12-13-08-39-31.png?w=840&amp;ssl=1 840w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/12\/Screenshot-from-2021-12-13-08-39-31.png?resize=300%2C44&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/12\/Screenshot-from-2021-12-13-08-39-31.png?resize=768%2C112&amp;ssl=1 768w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><figcaption><strong>CodeIgniter 4 Create Migration<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p>After creating the migration file, let&#8217;s put the schema inside it.<\/p>\n\n\n\n<pre title=\"timestamp_imageResize.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;?php\n\nnamespace App\\Database\\Migrations;\n\nuse CodeIgniter\\Database\\Migration;\n\nclass Imageresize extends Migration\n{\n\tpublic function up()\n\t{\n\t\t$this-&gt;forge-&gt;addField([\n            'id' =&gt; [\n                'type' =&gt; 'INT',\n                'auto_increment' =&gt; true\n            ],\n            'name' =&gt; [\n                'type' =&gt; 'VARCHAR',\n                'constraint' =&gt; '100'\n            ],\n            'created_at datetime default current_timestamp',\n            'updated_at datetime default current_timestamp on update current_timestamp'\n        ]);\n        $this-&gt;forge-&gt;addKey('id', true);\n        $this-&gt;forge-&gt;createTable('imageResize');\n\t}\n\n\tpublic function down()\n\t{\n\t\t$this-&gt;forge-&gt;dropTable('imageResize');\n\t}\n}\n<\/code><\/pre>\n\n\n\n<p>I have added the schema for the table. Now, this will need to be migrated inside the created database.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/programmingfields.com\/send-email-in-codeigniter-4-using-smtp\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Send Email in CodeIgniter 4 Using Gmail SMTP<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Migrate_Tables_in_CodeIgniter_4\"><\/span><strong>Migrate Table(s) in CodeIgniter 4<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>For migrating the table(s), you have to run the spark command in the terminal.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">php spark migrate<\/code><\/pre>\n\n\n\n<p>This command will generate the table with the specified schema.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"846\" height=\"162\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/12\/Screenshot-from-2021-12-13-08-59-35.png?resize=846%2C162&#038;ssl=1\" alt=\"Migrate Table(s) in CodeIgniter 4\" class=\"wp-image-7361\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/12\/Screenshot-from-2021-12-13-08-59-35.png?w=846&amp;ssl=1 846w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/12\/Screenshot-from-2021-12-13-08-59-35.png?resize=300%2C57&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/12\/Screenshot-from-2021-12-13-08-59-35.png?resize=768%2C147&amp;ssl=1 768w\" sizes=\"auto, (max-width: 846px) 100vw, 846px\" \/><figcaption><strong>Migrate Table(s) in CodeIgniter 4<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_a_Model_To_Resize_Image_in_CodeIgniter_4\"><\/span><strong>Create a Model To Resize Image in CodeIgniter 4<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>We needed a model to synchronize with the database. We already have the migration for a table. Hence, we can configure that table with a model. So, let&#8217;s create that then we will proceed further.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">php spark make:model Image<\/code><\/pre>\n\n\n\n<p>After creating the model, paste the below code and make it look like same.<\/p>\n\n\n\n<pre title=\"Image.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;?php\n\nnamespace App\\Models;\n\nuse CodeIgniter\\Model;\n\nclass Image extends Model\n{\n\tprotected $DBGroup              = 'default';\n\tprotected $table                = 'images';\n\tprotected $primaryKey           = 'id';\n\tprotected $useAutoIncrement     = true;\n\tprotected $protectFields        = true;\n\tprotected $allowedFields        = ['name'];\n\n\t\/\/ Dates\n\tprotected $useTimestamps        = false;\n\tprotected $dateFormat           = 'datetime';\n\tprotected $createdField         = 'created_at';\n\tprotected $updatedField         = 'updated_at';\n}\n<\/code><\/pre>\n\n\n\n<p>In the next step, we will need a view. The view will contain a form with image upload input. Let&#8217;s create that.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_a_View_For_the_Image_Upload\"><\/span><strong>Create a View For the Image Upload<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>You will find the <strong>Views<\/strong> folder inside the <strong>app<\/strong> folder. Now, create a view named <strong>image.php<\/strong>. After creating the view, let&#8217;s put the below code. In the below code, I have added a form element and inside that, there is an input type file. Also, there is a submit button.<\/p>\n\n\n\n<pre title=\"image.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;!doctype html&gt;\n&lt;html lang=\"en\"&gt;\n\n&lt;head&gt;\n    &lt;title&gt;Codeigniter 4 Ajax Form Handling&lt;\/title&gt;\n    &lt;meta charset=\"utf-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\"&gt;\n\n    &lt;!-- bootstrap 5 CSS --&gt;\n    &lt;link href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.0-beta3\/dist\/css\/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-eOJMYsd53ii+scO\/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6\" crossorigin=\"anonymous\"&gt;\n    &lt;link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap-icons@1.4.1\/font\/bootstrap-icons.css\"&gt;\n    &lt;style&gt;\n        .error {\n            color: #dc3545;\n        }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n&lt;?php $validation =  \\Config\\Services::validation(); ?&gt;\n    &lt;div class=\"container py-4\"&gt;\n        &lt;div class=\"row\"&gt;\n            &lt;div class=\"col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 m-auto\"&gt;\n                &lt;form method=\"POST\" action=\"&lt;?= base_url('image')?&gt; \" enctype=\"multipart\/form-data\"&gt;\n                    &lt;?= csrf_field() ?&gt;\n\n                    &lt;?php\n                        if(session()-&gt;getFlashdata('success')):?&gt;\n                            &lt;div class=\"alert alert-success alert-dismissible\"&gt;\n                                &lt;button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\"&gt;&amp;times;&lt;\/button&gt;\n                                &lt;?php echo session()-&gt;getFlashdata('success') ?&gt;\n                            &lt;\/div&gt;\n                        &lt;?php elseif(session()-&gt;getFlashdata('failed')):?&gt;\n                            &lt;div class=\"alert alert-danger alert-dismissible\"&gt;\n                                &lt;button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\"&gt;&amp;times;&lt;\/button&gt;\n                                &lt;?php echo session()-&gt;getFlashdata('failed') ?&gt;\n                            &lt;\/div&gt;\n                    &lt;?php endif; ?&gt;\n\n                    &lt;div class=\"card shadow\"&gt;\n                        &lt;div class=\"card-header\"&gt;\n                            &lt;h5 class=\"card-title\"&gt;Codeigniter 4 Image Upload and Resize&lt;\/h5&gt;\n                        &lt;\/div&gt;\n\n                        &lt;div class=\"card-body p-4\"&gt;\n\n                            &lt;div class=\"form-group mb-3 has-validation\"&gt;\n                                &lt;label class=\"form-label\" for=\"image\"&gt;Image&lt;\/label&gt;\n                                &lt;input type=\"file\" class=\"form-control &lt;?php if($validation-&gt;getError('image')): ?&gt;is-invalid&lt;?php endif ?&gt;\" id=\"image\" name=\"image\" \/&gt;\n\n                                &lt;?php if ($validation-&gt;getError('image')): ?&gt;\n                                    &lt;div class=\"invalid-feedback\"&gt;\n                                        &lt;?= $validation-&gt;getError('image') ?&gt;\n                                    &lt;\/div&gt;                                \n                                &lt;?php endif; ?&gt;\n                            &lt;\/div&gt;\n\n                            &lt;button type=\"submit\" id=\"submit-btn\" class=\"btn btn-success\"&gt;Save&lt;\/button&gt;\n                        &lt;\/div&gt;\n                    &lt;\/div&gt;\n\n                    &lt;?php\n                    if(session()-&gt;getFlashdata('previewImage')):?&gt;\n                        &lt;div class=\"form-group py-4\"&gt;\n                        &lt;h5 class=\"py-2\"&gt;Image Preview&lt;\/h5&gt;\n                            &lt;img src=\"&lt;?php echo base_url('uploads\/'.session()-&gt;getFlashdata('previewImage'));?&gt;\" class=\"img-fluid\"\/&gt;\n                        &lt;\/div&gt;\n                    &lt;?php endif; ?&gt;\n                &lt;\/form&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.0-beta3\/dist\/js\/bootstrap.bundle.min.js\" integrity=\"sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf\" crossorigin=\"anonymous\"&gt;&lt;\/script&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>For the form design, I have used Bootstrap 5. I have specified the form action. So, respectively, we have to define the routes. But, firstly, create a controller for implementing the functionality to resize image in CodeIgniter 4.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/programmingfields.com\/how-to-implement-jquery-datatable-in-codeigniter-4\/\" target=\"_blank\" rel=\"noreferrer noopener\">How to Implement jQuery Datatable in CodeIgniter 4<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_a_Controller_to_Resize_Image_in_Codeigniter_4\"><\/span><strong>Create a Controller to Resize Image in Codeigniter 4<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>For creating the controller, I will use the spark command. Hence, open the terminal inside the project and hit the below command.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">php spark make:controller ImageController<\/code><\/pre>\n\n\n\n<p>After creating the controller, you have to put the below snippet. Here, at the top, I have included the Model class (Image). In the constructor, I have called the CodeIgniter helper functions for form handling and URL redirection. Also, I have created the object of the Image model.<\/p>\n\n\n\n<pre title=\"ImageController.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">&lt;?php\n\nnamespace App\\Controllers;\n\nuse App\\Controllers\\BaseController;\nuse App\\Models\\Image;\n\nclass ImageController extends BaseController\n{\n\t\/**\n\t * Constructor\n\t *\/\n\tpublic function __construct()\n\t{\n\t\thelper(['form', 'url']);\n\t\t$this-&gt;imageModel = new Image();\n\t}\n\n\tpublic function index()\n\t{\n\t\treturn view('image');\n\t}\n\n\t\/**\n\t * Manipulate image and store\n\t *\/\n\tpublic function store()\n\t{\n\t\t\/\/ image validation\n\t\t$validated = $this-&gt;validate([\n\t\t\t'image' =&gt; [\n\t\t\t\t'uploaded[image]',\n\t\t\t\t'mime_in[image,image\/jpg,image\/jpeg,image\/gif,image\/png]',\n\t\t\t\t'max_size[image,4096]',\n\t\t\t],\n\t\t]);\n\n\t\tif (!$validated) {\n\t\t\treturn view('image', [\n\t\t\t\t'validation' =&gt; $this-&gt;validator\n\t\t\t]);\n\t\t}\n\n\t\t$imagePath = $this-&gt;request-&gt;getFile('image');\n\n\t\t$imageName =  $imagePath-&gt;getRandomName();\n\n\t\t\/\/ Image manipulation\n\t\t$image = \\Config\\Services::image()\n\t\t\t-&gt;withFile($imagePath)\n\t\t\t-&gt;resize(240, 180, true, 'height')\n\t\t\t-&gt;save(FCPATH . '\/uploads\/' . $imageName);\n\n\t\t$imagePath-&gt;move(WRITEPATH . 'uploads');\n\n\t\t$imageData = [\n\t\t\t'name' =&gt;  $imageName,\n\t\t];\n\n\t\t$result = $this-&gt;imageModel-&gt;save($imageData);\n\n\t\tif ($result) {\n\t\t\tsession()-&gt;setFlashdata('success', 'Success! image uploaded.');\n\t\t\treturn redirect()-&gt;to(site_url('\/image'))-&gt;withInput()-&gt;with('previewImage', $imageName);\n\t\t} else {\n\t\t\tsession()-&gt;setFlashdata('failed', 'Failed! image not uploaded.');\n\t\t\treturn redirect()-&gt;to(site_url('\/image'))-&gt;withInput()-&gt;with('previewImage', $imageName);\n\t\t}\n\t}\n}\n<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li>Also, we have the <strong>index()<\/strong> function for loading the view. (We already created the view).<\/li><li>In the <strong>store()<\/strong> function, we are handling the image validation. Also, we included the CodeIgniter service class that is <code>\\Config\\Services::image()<\/code>.<\/li><li>By using this service class, I have manipulated the actual image. Resized with a fixed dimension by giving an absolute width and height.<\/li><li>You may find more detail about the <a href=\"https:\/\/codeigniter4.github.io\/userguide\/libraries\/images.html\" target=\"_blank\" rel=\"noreferrer noopener\">\\Config\\Services::image()<\/a>.<\/li><\/ul>\n\n\n\n<p>That&#8217;s it for the functionality. In the next step, you have to create routes for rendering the view and getting results. So, let&#8217;s do that.<\/p>\n\n\n\n<p class=\"has-text-align-center\"><a href=\"https:\/\/programmingfields.com\/generate-fake-data-in-codeigniter-4-using-seeder-and-faker\/\" target=\"_blank\" rel=\"noreferrer noopener\">Generate Fake Data in CodeIgniter 4 Using Seeder and Faker<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Create_Routes\"><\/span><strong>Create Routes <\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>For creating the routes, navigate to the <strong>app\/Config<\/strong> and <strong>Routes.php<\/strong> file. Now, add the below routes.<\/p>\n\n\n\n<pre title=\"Routes.php\" class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">$routes-&gt;get('image', 'ImageController::index');\n$routes-&gt;post('image', 'ImageController::store');<\/code><\/pre>\n\n\n\n<p>After adding the routes, let&#8217;s run the application to check the result.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Result_For_Image_Resizing_in_CodeIgniter_4\"><\/span><strong>Result For Image Resizing in CodeIgniter 4<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Open the browser and hit the specified route in the URL. You will have the below form. <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"770\" height=\"475\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/12\/Screenshot-from-2021-12-16-09-24-41.png?resize=770%2C475&#038;ssl=1\" alt=\"CodeIgniter 4 Image Upload View\" class=\"wp-image-7389\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/12\/Screenshot-from-2021-12-16-09-24-41.png?w=770&amp;ssl=1 770w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/12\/Screenshot-from-2021-12-16-09-24-41.png?resize=300%2C185&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/12\/Screenshot-from-2021-12-16-09-24-41.png?resize=768%2C474&amp;ssl=1 768w\" sizes=\"auto, (max-width: 770px) 100vw, 770px\" \/><figcaption><strong>CodeIgniter 4 Image Upload View<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p>We have added the validation rules for the image. Hence, if you will try to submit the form without any proper image then it will throw the validation error message.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"812\" height=\"411\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/12\/Screenshot-from-2021-12-16-09-51-47.png?resize=812%2C411&#038;ssl=1\" alt=\"Image Validation in CodeIgniter 4\" class=\"wp-image-7390\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/12\/Screenshot-from-2021-12-16-09-51-47.png?w=812&amp;ssl=1 812w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/12\/Screenshot-from-2021-12-16-09-51-47.png?resize=300%2C152&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/12\/Screenshot-from-2021-12-16-09-51-47.png?resize=768%2C389&amp;ssl=1 768w\" sizes=\"auto, (max-width: 812px) 100vw, 812px\" \/><figcaption><strong>Image Validation in CodeIgniter 4<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p>Let&#8217;s check the final result by uploading an image. Also, please check the dimension of that image to make sure the image is resized or not. After uploading the image, you will get the success response as shown below.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"698\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/12\/Screenshot-from-2021-12-17-08-12-12.png?resize=1024%2C698&#038;ssl=1\" alt=\"Image Upload Result\" class=\"wp-image-7396\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/12\/Screenshot-from-2021-12-17-08-12-12.png?resize=1024%2C698&amp;ssl=1 1024w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/12\/Screenshot-from-2021-12-17-08-12-12.png?resize=300%2C204&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/12\/Screenshot-from-2021-12-17-08-12-12.png?resize=768%2C523&amp;ssl=1 768w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/12\/Screenshot-from-2021-12-17-08-12-12.png?w=1036&amp;ssl=1 1036w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption><strong>Image Upload Result<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p>Now, for the confirmation, let&#8217;s navigate to the uploaded image and check the dimension.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"591\" src=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/12\/Screenshot-from-2021-12-17-08-14-43.png?resize=1024%2C591&#038;ssl=1\" alt=\"Result - Reduce image size\" class=\"wp-image-7397\" srcset=\"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/12\/Screenshot-from-2021-12-17-08-14-43.png?resize=1024%2C591&amp;ssl=1 1024w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/12\/Screenshot-from-2021-12-17-08-14-43.png?resize=300%2C173&amp;ssl=1 300w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/12\/Screenshot-from-2021-12-17-08-14-43.png?resize=768%2C443&amp;ssl=1 768w, https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/12\/Screenshot-from-2021-12-17-08-14-43.png?w=1036&amp;ssl=1 1036w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><figcaption><strong>Image Resized Result in CodeIgniter 4<\/strong><\/figcaption><\/figure><\/div>\n\n\n\n<p>In the result, you may see the image has been resized to the given height and width. By resizing the image you can reduce the image size also.<\/p>\n\n\n\n<p>That&#8217;s it for this post.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span><strong>Conclusion<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>We used CodeIgniter 4 service class to manipulate the image. By using this class, we resized image size by giving a fixed height and width. This class provides many other options for image manipulation. After resizing the image you can reduce the image size and it will enhance the speed and performance of your application. I hope you will find helpful to this post.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>You can manipulate the image after uploading it in Codeigniter 4. There is no package or third-party library for it. The CodeIgniter 4 provides the image manipulation class. Through this class, you can manipulate images as per your need. You can set a watermark on the uploaded image. You can resize, and crop the image [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":7399,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[1977],"tags":[2229,2230,2231,2232,2228],"yst_prominent_words":[984,969],"class_list":{"0":"post-7334","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-codeigniter-4","8":"tag-codeigniter-image-resize","9":"tag-image-crope-in-codeigniter-4","10":"tag-image-manipulation-in-codeigniter","11":"tag-image-manipulation-service","12":"tag-resize-image-in-codeigniter-4","13":"entry"},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/programmingfields.com\/wp-content\/uploads\/2021\/12\/Resize-image-in-codeigniter.gif?fit=1440%2C810&ssl=1","jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/7334","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/comments?post=7334"}],"version-history":[{"count":1,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/7334\/revisions"}],"predecessor-version":[{"id":8626,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/posts\/7334\/revisions\/8626"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/media\/7399"}],"wp:attachment":[{"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/media?parent=7334"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/categories?post=7334"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/tags?post=7334"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/programmingfields.com\/wp-json\/wp\/v2\/yst_prominent_words?post=7334"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}