Membuat Thumbnail Gambar Dengan Codeigniter 4
Tags: webdev, beginners, codeigniter
Published: 2022-03-18 05:06:05

Tutorial kali ini akan membahas bagaimana membuat gambar thumbnail menggunakan codeigniter 4.Thumbnail di web sendiri adalah gambar asli yang diperkecil agar proses loading lebih cepat.Apalagi jika gambar asli kita memiliki ukuran yang besar.


Ada dua fungsi yang bisa digunakan pertama **fit** dan kedua **crop**.

##### Menggunakan Fungsi Fit

Pada fungsi **fit** terdapat tiga parameter : 

```php
fit(int $width, int $height = null, string $position = 'center')
```

1. $width untuk lebar dari gambar
2. $height untuk tinggi gambar
3. $position untuk menentukan mulai dari bagian mana gambar dipotong.Ada beberapa pilihan : ‘top-left’, ‘top’, ‘top-right’, ‘left’, ‘center’, ‘right’, ‘bottom-left’, ‘bottom’, ‘bottom-right’.

```php
<?php namespace App\Controllers;
class Thumbnail extends BaseController
{
	public function index()
	{
		$thumbnail = \Config\Services::image()
        ->withFile(ROOTPATH.'public/uploads/gambar.jpg')
        ->fit(100, 100, 'center')
        ->save(ROOTPATH.'public/uploads/thumb/gambar.jpg');
	}
}
```

Pada kode diatas kita memangil fungsi **\Config\Services::image()** dari Codeigniter 4,**withFile** adalah lokasi dari file gambar asli kita,**fit** untuk mengcrop gambar,**save** untuk menyimpan hasil ke lokasi yang baru.

##### Menggunakan Fungsi Crop

Terdapat 6 parameter pada fungsi **crop**:

```php
crop(int $width = null, int $height = null, int $x = null, int $y = null, bool $maintainRatio = false, string $masterDim = 'auto')
```

1. $width untuk lebar dari gambar
2. $height untuk tinggi gambar
3. $x titik awal pixel dari kiri gambar untuk mulai di crop.
4. $y titik awal pixel dari atas gambar untuk mulai di crop.
5. $maintainRatio defaulnya false,jika true akan mempertahakan aspect ratio dari gambar asli.
6. $masterDim menentukan bagian mana yang tidak tersentuh jika $mainRatio bernilai true.Nilainya bisa : 'width','height','auto'.

Gunakan **crop** jika position awal cropping tidak ada di position fungsi **fit** diatas.

```php
<?php namespace App\Controllers;
class Thumbnail extends BaseController
{
	public function index()
	{
		$ukuranCrop = 50;

		$info = \Config\Services::image()
            ->withFile(ROOTPATH.'public/uploads/gambar.jpg')
            ->getFile()
            ->getProperties(true);

		$xOffset = ($info['width'] / 2) - ($ukuranCrop / 2);
		$yOffset = ($info['height'] / 2) - ($ukuranCrop / 2);

		$thumbnail = \Config\Services::image()
		            ->withFile(ROOTPATH.'public/uploads/gambar.jpg')
		            ->crop($ukuranCrop, $ukuranCrop, $xOffset, $yOffset)
		            ->save(ROOTPATH.'public/uploads/thumb/gambar.jpg');
	}
}
```

Misalnya kita ingin mencrop dari tengah-tengah gambar dengan menggunakan **crop** seperti yang dilakukan pada fungsi **fit** sebelumnya.Proses akan lebih ribet,kita perlu mendapatkan dulu info dari gambar asli agar mendapatkan posisi pas yang ditengah.

Bisa dilihat kita harus menggunakan rumus seperti yang digunakan di $xOffset untuk mendapatkan posisi center dari x.Jauh lebih ribet padahal dengan fungsi **fit** kita cukup panggil position **center**.

```php
$xOffset = ($info['width'] / 2) - ($ukuranCrop / 2);
```


Dari dua metode untuk membuat thumbnail diatas ,**fit** lebih kami sarankan karena  lebih mudah penggunaanya.Gunakan **crop** hanya jika benar-benar membutuhkan titik awal kiri dan atas yang spesifik.

Sekian tutorial kali ini,jika ada pertanyaan bisa ditanyakan.Jika tidak yasudah.