Helper Image On The Fly di Laravel

Pernah tidak kamu membuat fitur upload gambar yang di-resize dengan ukuran tertentu atau bahkan dengan ukuran aslinya untuk disimpan ke website kita, dan pada saat di-render untuk ditampilkan di-view , kita me-resize kembali ukuran image tersebut dengan bantuan atribut HTML atau properti CSS. Hal ini tentu saja bukanlah sebuah kesalahan dan akan bekerja sebagaimana mestinya. Akan tetapi jika anda perhatikan, load page yang kebanyakan gambar tersebut akan membuatnya semakin berat, sebab browser user akan tetap me-load ukuran asli dari gambar tersebut, hanya saja atribut HTML / CSS yang mengubah dimensinya sesuai yang akan ditampilkan.

Padahal idealnya, "gambar yang render seharusnya tetap menggunakan ukuran aslinya", kutip Dharma Saputra (Senior Web Developer). Maka untuk melakukan hal ini, kita akan menggunakan peran dari konsep Image on the Fly. Apa sih Image on the Fly? Konsep ini bekerja untuk me-resize gambar sesuai ukuran yang akan ditampilkan. Resize yang dimaksud kali ini adalah mengubah ukuran gambar yang sebenarnya lalu menyimpannya kembali kedalam directory gambar tersebut dengan prefix ukuran yang mengikutinya sehingga kita tidak mengubah ukuran dari gambar aslinya, atau dengan kata lain buat salinan gambar dengan berbagai ukuran.

Baca Juga: Markdown Editor Terbaik Untuk Linux

Kegunaannya buat sih? Kan sama saja bakalan ditampilkan sebagaimana mestinya. Nah untuk menjawab pertanyaan ini, anda bisa merujuk pada [GTmetrix](https://gtmetrix.com/), sebuah web yang berfungsi untuk mengalisa dan mendapatkan kesimpulan seputar optimasi website kita. Jika dilihat secara detail, GTmetrix menyarankan kita untuk mengubah ukuran gambar sesuai dengan yang akan ditampilkan.

Membuat Helper

Pada kesempatan kali ini kita akan membuat sebuah Helper Image on the Fly, buat sebuah file ImageFly.php kedalam folder app/Helpers, lalu masukkan code berikut:

<?php
if (!function_exists('imageFly')) {
    /**
     * Get image and resize on the fly
     * @example: <img src="{{ asset(imageFly($user->photo, [385, 385])) }}" alt="" width="100%">
     * @param  string $path      relative path to file
     * @param  array  $dimension ['width', 'height'] of the image
     * @return string            relative path to the resized image
     */
    function imageFly($path, array $dimension)
    {
        if (file_exists($path)) {
            $image = Image::make($path);
            $resizedImagePath = $image->dirname
                . '/' . $image->filename
                . '_' . implode('_', $dimension)
                . '.' . $image->extension;
            if (!file_exists($resizedImagePath)) {
                $image->fit($dimension[0], $dimension[1]);
                $image->save($resizedImagePath);
            }
            return $resizedImagePath;
        }
        return '';
    }
}

Function diatas akan me-resize gambar sesuai dimensi yang diminta oleh view, kemudian menyimpannya kembali dengan menambahkan _width_height (dimensi) setelah nama gambar. Misal: nama_gambar.jpg akan diubah menjadi nama_gambar_310__140.jpg misalnya dan disimpan pada directory yang sama.

Baca Juga: Mengintegrasikan CKeditor di Laravel

Setalah itu buka `composer.json` lalu tambahkan *code* berikut dibagian `autoload`:

"autoload": {
     ....
     "files": ["app/Helpers/ImageFly.php"]
 },

Sedangkan untuk menggunakannya cukup sederhana, seperti sebuah helper pada umumnya, pada helper kita ini akan meminta 2 parameter, yang pertama path image dan yang kedua sebuah array yang berisi dimensi yang diinginkan.

<img src="{{ asset(imageFly($user->photo, [385, 385])) }}" alt="" width="100%">

Source: Github