Dalam mengelola sebuah website, kita sering menggunakan gambar untuk menunjang konten yang kita buat. Penggunaan gambar yang kita gunakan haruslah memiliki ukuran yang sesuai dengan kebutuhan, karena jika kita menggunakan gambar yang ukurannya terlalu besar, maka akan memperlambat waktu loading website kita. Sebaliknya, jika kita menggunakan gambar yang ukurannya terlalu kecil, maka akan mengurangi kualitas gambar yang kita tampilkan.
Untuk mengatasi masalah tersebut, kita dapat menggunakan responsive image. Responsive image adalah sebuah gambar yang ukurannya akan menyesuaikan dengan ukuran layar yang digunakan oleh pengguna. Responsive image ini berbeda dengan image biasa yang diberikan class CSS seperti img-fluid pada Bootstrap. Responsive image akan menghasilkan beberapa versi gambar dengan ukuran yang berbeda-beda. Gambar dengan ukuran yang paling kecil akan ditampilkan pada layar dengan ukuran yang kecil, sedangkan gambar dengan ukuran yang paling besar akan ditampilkan pada layar dengan ukuran yang besar. Metode ini memanfaatkan attribute srcset pada tag <img>.
Pada artikel ini, kita akan belajar bagaimana cara membuat responsive image menggunakan Laravel Media Library. Sebelumnya, kita akan membahas terlebih dahulu apa itu Laravel Media Library.
Apa itu Laravel Media Library?
Laravel Media Library adalah sebuah package yang dibuat oleh Spatie yang dapat kita gunakan untuk mengelola file media pada Laravel. Dengan menggunakan package ini, kita dapat mengupload file media seperti gambar, video, dan dokumen. Selain itu, kita juga dapat melakukan manipulasi terhadap file media yang telah kita upload.
Requirements
- PHP 8+
- Laravel 9+
- PHP Exif Extension
- PHP GD Extension
Instalasi
Untuk menginstall package ini, kita dapat menggunakan Composer. Jalankan perintah berikut pada terminal:
composer require "spatie/laravel-medialibrary:^10.0.0"
Setelah package terinstall, kita perlu melakukan publish migration dan config file. Jalankan perintah berikut pada terminal:
php artisan vendor:publish --provider="Spatie\MediaLibrary\MediaLibraryServiceProvider" --tag="migrations"
php artisan migrate
php artisan vendor:publish --provider="Spatie\MediaLibrary\MediaLibraryServiceProvider" --tag="config"
Media Library juga memerlukan tools berikut untuk melakukan optimasi gambar yang kita upload:
- JpegOptim
- Optipng
- Pngquant 2
- SVGO
- Gifsicle
Berikut adalah cara untuk menginstall tools tersebut:
# Ubuntu
sudo apt install jpegoptim optipng pngquant gifsicle
npm install -g svgo
# Mac
brew install jpegoptim
brew install optipng
brew install pngquant
brew install svgo
brew install gifsicle
Penggunaan Dasar
Membuat Model
Pertama, kita perlu mengkonfigurasi model yang akan kita gunakan untuk menyimpan file media dengan cara menambahkan interface HasMedia dan trait InteractsWithMedia pada model tersebut. Berikut adalah contoh model Post yang telah dikonfigurasi:
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
use Spatie\MediaLibrary\HasMedia;
use Spatie\MediaLibrary\InteractsWithMedia;
class Post extends Model implements HasMedia
{
use InteractsWithMedia;
}
Menambah Media
Untuk menambah media, kita dapat menggunakan method addMedia() pada model yang telah kita konfigurasi sebelumnya. Method ini menerima parameter berupa file yang akan kita upload. Berikut adalah contoh menambah media pada model Post:
$post->addMedia($pathToFile)->toMediaCollection();
Mengambil Media
Untuk mengambil media, kita dapat menggunakan method getMedia() pada model yang telah kita konfigurasi sebelumnya. Method ini akan mengembalikan sebuah collection yang berisi media yang telah kita upload. Berikut adalah contoh mengambil media pada model Post:
$media = $post->getMedia();
Method diatas akan mengembalikan collection yang berisi semua media yang telah kita upload. Jika kita ingin mengambil data pertama dari collection tersebut, kita dapat menggunakan method getFirstMedia(). Berikut adalah contoh mengambil data pertama dari collection media pada model Post:
$media = $post->getFirstMedia();
Responsive Image
Menambahkan Responsive Image
Untuk membuat responsive image, kita dapat menambahkan method withResponsiveImages() pada saat menambah media. Method ini akan membuat responsive image secara otomatis. Berikut adalah contoh menambah media dengan responsive image pada model Post:
$post->addMedia($pathToFile)->withResponsiveImages()->toMediaCollection();
Background Process Dengan Queue
Ketika kita menambahkan responsive image, Media Library akan menjalankan suatu proses untuk membuat responsive image tersebut. Proses ini dapat memakan waktu yang cukup lama tergantung dari ukuran gambar yang kita upload. Untuk mengatasi masalah ini, kita dapat menggunakan queue untuk menjalankan proses background tersebut. Secara default, Media Library akan memproses queue dengan menggunakan driver yang telah kita atur pada file .env. Berikut adalah contoh mengatur driver queue pada file .env. Silahkan mengatur driver queue sesuai dengan kebutuhan aplikasi Anda.
Referensi: https://laravel.com/docs/10.x/queues#driver-prerequisites
Menampilkan Responsive Image
Untuk menampilkan responsive image, kita cukup memanggil object Media yang kita inginkan. Berikut adalah contoh menampilkan responsive image dari model Post ke dalam view:
$post = Post::find(1);
$media = $post->getFirstMedia();
return view('post', compact('post', 'media'));
{{ $media }}
Kode diatas akan menghasilkan output berikut:
<img srcset="/media/1/responsive-images/testimage___media_library_original_188_105.png 188w, /media/1/responsive-images/testimage___media_library_original_158_88.png 158w, /media/1/responsive-images/testimage___media_library_original_132_74.png 132w, /media/1/responsive-images/testimage___media_library_original_110_61.png 110w, data:image/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTkyMCAxMDgwIj4KCTxpbWFnZSB3aWR0aD0iMTkyMCIgaGVpZ2h0PSIxMDgwIiB4bGluazpocmVmPSJkYXRhOmltYWdlL2pwZWc7YmFzZTY0LC85ai80QUFRU2taSlJnQUJBUUFBQVFBQkFBRC8vZ0E3UTFKRlFWUlBVam9nWjJRdGFuQmxaeUIyTVM0d0lDaDFjMmx1WnlCSlNrY2dTbEJGUnlCMk9UQXBMQ0J4ZFdGc2FYUjVJRDBnT1RBSy85c0FRd0FEQWdJREFnSURBd01EQkFNREJBVUlCUVVFQkFVS0J3Y0dDQXdLREF3TENnc0xEUTRTRUEwT0VRNExDeEFXRUJFVEZCVVZGUXdQRnhnV0ZCZ1NGQlVVLzlzQVF3RURCQVFGQkFVSkJRVUpGQTBMRFJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVUvOEFBRVFnQUVnQWdBd0VpQUFJUkFRTVJBZi9FQUI4QUFBRUZBUUVCQVFFQkFBQUFBQUFBQUFBQkFnTUVCUVlIQ0FrS0MvL0VBTFVRQUFJQkF3TUNCQU1GQlFRRUFBQUJmUUVDQXdBRUVRVVNJVEZCQmhOUllRY2ljUlF5Z1pHaENDTkNzY0VWVXRId0pETmljb0lKQ2hZWEdCa2FKU1luS0NrcU5EVTJOemc1T2tORVJVWkhTRWxLVTFSVlZsZFlXVnBqWkdWbVoyaHBhbk4wZFhaM2VIbDZnNFNGaG9lSWlZcVNrNVNWbHBlWW1acWlvNlNscHFlb3FhcXlzN1MxdHJlNHVickN3OFRGeHNmSXljclMwOVRWMXRmWTJkcmg0dVBrNWVibjZPbnE4Zkx6OVBYMjkvajUrdi9FQUI4QkFBTUJBUUVCQVFFQkFRRUFBQUFBQUFBQkFnTUVCUVlIQ0FrS0MvL0VBTFVSQUFJQkFnUUVBd1FIQlFRRUFBRUNkd0FCQWdNUkJBVWhNUVlTUVZFSFlYRVRJaktCQ0JSQ2thR3h3UWtqTTFMd0ZXSnkwUW9XSkRUaEpmRVhHQmthSmljb0tTbzFOamM0T1RwRFJFVkdSMGhKU2xOVVZWWlhXRmxhWTJSbFptZG9hV3B6ZEhWMmQzaDVlb0tEaElXR2g0aUppcEtUbEpXV2w1aVptcUtqcEtXbXA2aXBxckt6dExXMnQ3aTV1c0xEeE1YR3g4akp5dExUMU5YVzE5aloydUxqNU9YbTUranA2dkx6OVBYMjkvajUrdi9hQUF3REFRQUNFUU1SQUQ4QStRZkVPaE1sd05veUs2andibzhjZHUyOEFaSGVvdkxlOWZMOUtTNFM1Z1haREp0cnFxWXlsVGJsSGNpblNyVmw3S1pTOFhhSWthbVJlUlhFU1FCVHhYcC8yS1M0MHIvU01zUUs1TzQ4T003c1VIQjZDdDNWcFZLZnRObVJTOXRTcmV4ZXlPcnRmOVZTUy82NUtLSytHcS94WkgwK0czUnRPUDhBaVduNlZsd0FiUnhSUlhxUi9nSTRLdjhBdkQ5VC85az0iPgoJPC9pbWFnZT4KPC9zdmc+ 32w" onload="if(this.dataset.sized===undefined){this.sizes=Math.ceil(this.getBoundingClientRect().width/window.innerWidth*100)+'vw';this.dataset.sized=''}" sizes="1px" src="/media/1/testimage.png" data-sized="">
Demo Aplikasi
Untuk melihat demo aplikasi, anda dapat mengakses repository berikut Responsive Images Demo
Penutup
Demikian tutorial singkat mengenai cara untuk membuat responsive image menggunakan library Laravel Media Library. Semoga artikel ini bermanfaat.