LiipImagineBundle
2.13.3
| Unit PHP | Pemecah PHP-CS | Cakupan | Unduhan | Melepaskan |
|---|---|---|---|---|
Bundel ini menyediakan toolkit abstraksi manipulasi gambar untuk proyek berbasis Symfony.
Kumpulan Filter: Dengan menggunakan bahasa konfigurasi apa pun yang didukung Symfony (seperti YML dan XML), Anda dapat membuat definisi kumpulan filter yang menentukan rutinitas transformasi. Definisi ini mencakup serangkaian filter dan pasca-prosesor , serta parameter opsional lainnya.
Filter: Transformasi gambar diterapkan menggunakan filter . Satu set filter bawaan disediakan oleh bundel, menerapkan transformasi paling umum; contohnya termasuk thumbnail, skala, crop, flip, strip, dan watermark. Untuk transformasi lebih lanjut, Anda dapat dengan mudah membuat filter khusus Anda sendiri.
Pasca-Prosesor: Modifikasi file gambar biner yang dihasilkan (dibuat dari filter Anda) ditangani oleh pasca-prosesor . Contohnya termasuk JPEG Optim, Moz JPEG, Opti PNG, dan PNG Quant. Sama seperti filter, Anda dapat dengan mudah membuat pasca-pemroses kustom Anda sendiri.
Misalkan Anda mendefinisikan kumpulan filter my_thumb , yang dapat dikonfigurasi untuk melakukan sejumlah transformasi berbeda. Pemanggilan paling sederhana adalah menyalurkan jalur gambar Anda ke filter imagine_filter Twig yang disediakan.
< img src = " {{ asset( ' /relative/path/to/image.jpg ' ) | imagine_filter( ' my_thumb ' ) }} " />Proyek ini dirilis dengan Kode Etik Kontributor. Dengan berpartisipasi dalam proyek ini, Anda setuju untuk mematuhi ketentuannya.
Terima kasih kepada banyak kontributor yang telah mendedikasikan waktu dan kodenya untuk proyek ini.
Perpustakaan Bayangkan PHP mandiri digunakan oleh bundel ini untuk transformasi gambar.
Paket ini merupakan fork dari AvalancheImagineBundle dengan tujuan membuat kode lebih dapat diperluas. Referensi AvalancheImagineBundle#25 untuk informasi tambahan tentang alasan fork ini.
Penggunaan paket ini serupa dengan semua bundel Symfony. Langkah-langkah berikut harus dilakukan
Petunjuk pengaturan terperinci dapat ditemukan di bab instalasi dokumentasi.
Informasi terperinci tentang semua opsi konfigurasi yang tersedia dapat ditemukan di bab konfigurasi dokumentasi.
Umumnya, bundel ini bekerja dengan menerapkan kumpulan filter ke gambar dari dalam template. Kumpulan filter Anda ditentukan dalam file konfigurasi aplikasi (seringkali app/config/config.yml ) dan terdiri dari kumpulan filter , post-processors , dan parameter opsional lainnya.
Kita akan mempelajari lebih lanjut tentang pasca-pemroses dan parameter lain yang tersedia nanti, namun untuk saat ini mari kita fokus pada cara menentukan kumpulan filter sederhana yang terdiri dari beberapa filter .
Sebelum memulai, ada sejumlah kecil konfigurasi yang diperlukan untuk memastikan pemuat data dan penyelesai cache kami beroperasi dengan benar. Gunakan boilerplate berikut di file konfigurasi Anda.
# app/config/config.yml
liip_imagine :
# configure resolvers
resolvers :
# setup the default resolver
default :
# use the default web path
web_path : ~
# your filter sets are defined here
filter_sets :
# use the default cache configuration
cache : ~Dengan konfigurasi dasar yang ada, kita akan mulai dengan contoh yang memenuhi kasus penggunaan umum: membuat thumbnail. Mari kita asumsikan kita ingin thumbnail yang dihasilkan menerapkan transformasi berikut pada thumbnail tersebut:
Menambahkan ke boilerplate kita dari atas, kita perlu mendefinisikan kumpulan filter (yang akan kita beri nama my_thumb ) dengan dua filter yang dikonfigurasi: thumbnail dan background filter .
# app/config/config.yml
liip_imagine :
resolvers :
default :
web_path : ~
filter_sets :
cache : ~
# the name of the "filter set"
my_thumb :
# adjust the image quality to 75%
quality : 75
# list of transformations to apply (the "filters")
filters :
# create a thumbnail: set size to 120x90 and use the "outbound" mode
# to crop the image when the size ratio of the input differs
thumbnail : { size : [120, 90], mode : outbound }
# create a 2px black border: center the thumbnail on a black background
# 4px larger to create a 2px border around the final image
background : { size : [124, 94], position : center, color : '#000000' } Anda sekarang telah membuat kumpulan filter bernama my_thumb yang melakukan transformasi thumbnail. Filter thumbnail mengukur gambar sesuai lebar dan tinggi yang diinginkan (dalam contoh ini, 120x90 piksel), dan opsi mode: outbound menyebabkan gambar yang dihasilkan terpotong jika rasio masukan berbeda. Filter background menghasilkan batas hitam 2 piksel dengan membuat kanvas hitam berukuran 124x94 piksel, dan memposisikan thumbnail di tengahnya.
Catatan: Kumpulan filter dapat memiliki sejumlah filter yang ditentukan untuknya. Transformasi sederhana mungkin hanya memerlukan satu filter , sedangkan transformasi kompleks dapat memiliki jumlah filter yang tidak terbatas.
Ada sejumlah filter tambahan, namun untuk saat ini Anda dapat menggunakan kumpulan filter my_thumb yang baru Anda tentukan langsung di dalam templat.
Untuk template berbasis ranting, gunakan:
< img src = " {{ asset( ' /relative/path/to/image.jpg ' ) | imagine_filter( ' my_thumb ' ) }} " />Atau, untuk template berbasis PHP, gunakan:
<img src=" <?php $ this ['imagine']->filter('/relative/path/to/image.jpg', 'my_thumb') ?> " /> Di balik layar, bundel menerapkan filter ke gambar saat permintaan halaman pertama dilayani. Gambar yang diubah kemudian di-cache untuk permintaan berikutnya. Jalur gambar terakhir yang di-cache akan mirip dengan /media/cache/my_thumb/relative/path/to/image.jpg .
Catatan: *Menggunakan lingkungan dev Anda mungkin menemukan bahwa gambar tidak dirender dengan benar melalui bantuan templat. Hal ini sering kali disebabkan oleh pengaktifan intercept_redirect di konfigurasi aplikasi Anda. Untuk memastikan gambar ditampilkan, sangat disarankan untuk menonaktifkan opsi ini:
# app/config/config_dev.yml
web_profiler :
intercept_redirects : falseTerkadang, Anda mungkin telah menetapkan filter yang memenuhi 99% skenario penggunaan Anda. Daripada mendefinisikan filter baru untuk 1% kasus yang salah, Anda dapat memilih untuk mengubah perilaku filter saat runtime dengan meneruskan array opsi ke helper template.
Untuk template berbasis ranting, gunakan:
{% set runtimeConfig = { " thumbnail " : { " size " : [ 50 , 50 ] }} %}
< img src = " {{ asset( ' /relative/path/to/image.jpg ' ) | imagine_filter( ' my_thumb ' , runtimeConfig ) }} " />Atau, untuk template berbasis PHP, gunakan:
<?php
$ runtimeConfig = array (
" thumbnail " => array (
" size " => array ( 50 , 50 )
)
);
?>
<img src=" <?php $ this [ ' imagine ' ]-> filter ( ' /relative/path/to/image.jpg ' , ' my_thumb ' , $ runtimeConfig ) ?> " />Terkadang Anda perlu menyelesaikan jalur gambar yang dikembalikan oleh bundel ini untuk gambar yang difilter. Hal ini dapat dengan mudah dicapai menggunakan biner konsol Symfony atau secara terprogram dari dalam pengontrol atau bagian kode lainnya.
Anda dapat menyelesaikan URL gambar menggunakan perintah konsol liip:imagine:cache:resolve . Satu-satunya argumen yang diperlukan adalah satu atau lebih jalur gambar relatif (yang harus dipisahkan dengan spasi).
$ php bin/console liip:imagine:cache:resolve relative/path/to/image1.jpg relative/path/to/image2.jpg Selain itu, Anda dapat menggunakan opsi --filter untuk menentukan filter mana yang ingin Anda selesaikan (jika opsi --filter dihilangkan, semua filter yang tersedia akan diselesaikan).
$ php bin/console liip:imagine:cache:resolve relative/path/to/image1.jpg --filter=my_thumb Anda dapat menyelesaikan URL gambar dalam kode Anda menggunakan metode getBrowserPath dari layanan liip_imagine.cache.manager . Dengan asumsi Anda sudah menetapkan layanan ke variabel bernama $imagineCacheManager , Anda akan menjalankan:
$ imagineCacheManager -> getBrowserPath ( ' /relative/path/to/image.jpg ' , ' my_thumb ' ); Seringkali, Anda perlu melakukan operasi ini di pengontrol. Dengan asumsi pengontrol Anda mewarisi dari pengontrol Symfony dasar, Anda dapat memanfaatkan metode get yang diwarisi untuk meminta layanan liip_imagine.cache.manager , yang darinya Anda dapat memanggil getBrowserPath pada jalur gambar relatif untuk mendapatkan lokasi penyelesaiannya.
/** @var CacheManager */
$ imagineCacheManager = $ this -> get ( ' liip_imagine.cache.manager ' );
/** @var string */
$ resolvedPath = $ imagineCacheManager -> getBrowserPath ( ' /relative/path/to/image.jpg ' , ' my_thumb ' );Paket ini menyediakan serangkaian filter bawaan dan Anda juga dapat dengan mudah menentukan filter Anda sendiri. Referensi bab filter dari dokumentasi kami.
Jika Anda perlu menggunakan "kumpulan filter" yang ditentukan dari dalam pengontrol, Anda dapat mengambil FilterService bundel ini dari penampung layanan untuk melakukan pekerjaan berat untuk Anda.
<?php
class MyController extends Controller
{
public function indexAction ()
{
/** @var FilterService */
$ imagine = $ this
-> container
-> get ( ' liip_imagine.service.filter ' );
// 1) Simple filter, OR
$ resourcePath = $ imagine -> getUrlOfFilteredImage ( ' uploads/foo.jpg ' , ' my_thumb ' );
// 2) Runtime configuration
$ runtimeConfig = [
' thumbnail ' => [
' size ' => [ 200 , 200 ]
],
];
$ resourcePath = $ imagine -> getUrlOfFilteredImageWithRuntimeFilters (
' uploads/foo.jpg ' ,
' my_thumb ' ,
$ runtimeConfig
);
// ..
}
}
?> Secara default, direktori web/ Symfony didaftarkan sebagai root data untuk memuat aset. Untuk banyak instalasi, ini sudah cukup, namun terkadang Anda mungkin perlu memuat gambar dari lokasi lain. Untuk melakukan ini, Anda harus menyetel parameter data_root di konfigurasi Anda (seringkali terletak di app/config/config.yml ).
liip_imagine :
loaders :
default :
filesystem :
data_root : /path/to/source/images/dir Pada versi 1.7.2 Anda dapat mendaftarkan beberapa jalur root data, dan pencari file akan mencari setiap file yang diminta.
liip_imagine :
loaders :
default :
filesystem :
data_root :
- /path/foo
- /path/bar Pada versi 1.7.3 Anda meminta jalur sumber daya publik dari semua bundel terdaftar untuk didaftarkan secara otomatis sebagai akar data. Ini memungkinkan Anda memuat aset dari folder Resources/public yang berada dalam bundel yang dimuat. Untuk mengaktifkan fitur ini, setel opsi konfigurasi bundle_resources.enabled ke true .
liip_imagine :
loaders :
default :
filesystem :
bundle_resources :
enabled : true Jika Anda ingin mendaftarkan beberapa folder Resource/public , namun tidak semua, Anda dapat melakukannya dengan memasukkan bundel yang tidak ingin Anda daftarkan ke dalam daftar hitam atau bundel yang ingin Anda daftarkan ke daftar putih. Misalnya, untuk memasukkan daftar hitam (tidak mendaftarkan) bundel "FooBundle" dan "BarBundle", Anda akan menggunakan konfigurasi berikut.
liip_imagine :
loaders :
default :
filesystem :
bundle_resources :
enabled : true
access_control_type : blacklist
access_control_list :
- FooBundle
- BarBundleAlternatifnya, jika Anda ingin memasukkan ke daftar putih (hanya mendaftarkan) bundel "FooBundle" dan "BarBundle", Anda akan menggunakan konfigurasi berikut.
liip_imagine :
loaders :
default :
filesystem :
bundle_resources :
enabled : true
access_control_type : whitelist
access_control_list :
- FooBundle
- BarBundle Lokasi gambar harus dapat dibaca oleh server web Anda. Pada sistem yang mendukung setfacl (seperti Linux/BSD), gunakan
HTTPDUSER= ` ps axo user,comm | grep -E ' [a]pache|[h]ttpd|[_]www|[w]ww-data|[n]ginx ' | grep -v root | head -1 | cut -d -f1 `
sudo setfacl -R -m u: " $HTTPDUSER " :rwX -m u: ` whoami ` :rwX /path/to/source/images/dir
sudo setfacl -dR -m u: " $HTTPDUSER " :rwX -m u: ` whoami ` :rwX /path/to/source/images/dirLihat dokumentasi Izin Symfony untuk perintah yang kompatibel dengan macOS dan lingkungan lainnya.
Anda perlu memberikan akses baca untuk Apache dengan menambahkan yang berikut ini ke konfigurasi Apache VHost Anda
< VirtualHost *:80>
<!-- Rest of directives like DocumentRoot or ServerName -->
Alias /FavouriteAlias /path/to/source/images/dir
< Directory " /path/to/source/images/dir " >
AllowOverride None
Allow from All
</ Directory >
</ VirtualHost > Alternatifnya, Anda dapat menempatkan arahan dalam file terpisah dalam proyek Anda, dan memasukkannya ke dalam konfigurasi Apache VHost Anda. Misalnya, Anda dapat membuat file app/config/apache/photos.xml dan menambahkan yang berikut ini ke file VHost Anda
< VirtualHost *:80>
<!-- Rest of directives like DocumentRoot or ServerName -->
Include "/path/to/your/project/app/config/apache/photos.xml"
</ VirtualHost >Metode ini menyimpan file dengan sisa kode Anda, memungkinkan Anda mengubahnya dengan mudah atau membuat file konfigurasi berbeda yang bergantung pada lingkungan.
Setelah Anda mengonfigurasi Apache dengan benar, jalur relatif ke gambar dengan jalur absolut berikut /path/to/source/images/dir/logo.png harus /FavouriteAlias/logo.png .
Untuk informasi lebih detail tentang fitur bundel ini, lihat dokumentasi.
