responsive pics
Version 1.8.3
ResponsivePics adalah plugin WordPress yang memungkinkan pembuat tema WordPress secara otomatis mengubah ukuran gambar * dalam tata letak responsif.
*ReponsivePics tidak menangani gambar di editor wysiwig WordPress, ini hanya berguna bagi pembuat tema yang menggunakan gambar atau foto dalam temanya. Secara otomatis menangani gambar retina atau hdpi melalui permintaan media.
Untuk dokumentasi lengkap dan contoh, kunjungi: responsive.pics
| Prasyarat | Bagaimana cara memeriksanya |
|---|---|
| PHP >= 5.6.x | php -v |
| Wordpress >= 3.5.x | wp core version |
| WP-Cron diaktifkan atau pekerjaan cron sebenarnya telah diatur | test WP-Cron |
Anda dapat menginstal plugin ini melalui baris perintah atau panel admin WordPress.
Jika Anda menggunakan Composer untuk mengelola WordPress, tambahkan ResponsivePics ke dependensi proyek Anda.
composer require clarifynl/responsive-picsKemudian aktifkan plugin melalui wp-cli.
wp plugin activate responsive-pics Saat ini elemen <picture> dan atribut srcset dan sizes pada elemen <img> didukung di semua browser modern kecuali Internet Explorer 11 .
Untuk mengaktifkan dukungan elemen gambar dan fitur terkait di browser yang belum mendukungnya, Anda dapat menggunakan polyfill. Kami merekomendasikan penggunaan Picturefill.
Untuk menginstal Picturefill di tema wordpress Anda sebagai modul simpul, jalankan perintah berikut dari direktori tema Anda:
npm install --save picturefill
yarn add picturefill
Dan impor paket dalam file javascript global tema Anda: import 'picturefill';
ResponsivePics menggunakan variabel default berikut:
| Variabel | Jenis | Bawaan | Definisi |
|---|---|---|---|
$columns | nomor | 12 | Jumlah kolom yang digunakan tata letak kisi Anda |
$gutter | nomor | 30 | Lebar talang dalam piksel (ruang antar kolom kisi) |
$breakpoints | susunan | ['xs' => 0, 'sm' => 576, 'md' => 768, 'lg' => 992, 'xl' => 1200, 'xxl' => 1400] | Breakpoint kueri media yang akan digunakan ResponsivePics untuk membuat dan menyajikan sumber gambar Anda |
$grid_widths | susunan | ['xs' => 576, 'sm' => 540, 'md' => 720, 'lg' => 960, 'xl' => 1140, 'xxl' => 1320] | Lebar maksimum tata letak Anda dalam piksel ResponsivePics akan digunakan untuk mengubah ukuran gambar Anda |
$max_width_factor | nomor | 2 | Faktor lebar maksimum yang digunakan untuk mengubah ukuran dan memotong tinggi sumber gambar |
$lazyload_class | rangkaian | lazyload | Kelas css yang akan ditambahkan pada tag img saat lazyload diaktifkan |
$lqip_width | nomor | 100 | Lebar gambar yang akan digunakan untuk LQIP (placeholder gambar kualitas rendah) |
$lqip_class | rangkaian | blur-up | Kelas css yang akan ditambahkan pada tag img ketika LQIP (placeholder gambar berkualitas rendah) diaktifkan |
$image_quality | nomor | 90 | Kualitas kompresi gambar dalam persentase yang digunakan di WP_Image_Editor saat mengubah ukuran gambar |
$wp_rest_cache | boolean | false | Apakah akan mengaktifkan cache di header respons WP Rest API |
$wp_rest_cache_duration | nomor | 3600 | Durasi cache (usia maksimal) dalam hitungan detik dari header WP Rest API Cache-Control |
Secara default, ResponsivePics akan menggunakan variabel Bootstrap 4 SCSS untuk mendefinisikan:
Jumlah kolom grid : $grid-columns: 12;
Lebar talang kisi dalam piksel: $grid-gutter-width: 30px;
Breakpoint grid dalam piksel:
$grid-breakpoints : (
xs : 0 ,
sm : 576 px ,
md : 768 px ,
lg : 992 px ,
xl : 1200 px ,
xxl : 1400 px
);Dan lebar maksimum wadah dalam piksel:
$container-max-widths : (
sm : 540 px ,
md : 720 px ,
lg : 960 px ,
xl : 1140 px ,
xxl : 1320 px
); Catatan: ResponsivePics akan menambahkan lebar maksimal kontainer xs untuk Anda (= 576), berdasarkan breakpoint grid sm default (= 576px).
Jika Anda telah menyesuaikan default bootstrap atau jika Anda menggunakan sistem grid yang berbeda (Foundation, Materialize, dll.), atau bahkan jika Anda ingin menambahkan breakpoint & lebar container tambahan, Anda dapat meneruskan variabel grid Anda sendiri ke perpustakaan ResponsivePics.
Tambahkan baris berikut ke function.php tema Anda dan pastikan untuk memeriksa apakah kelas ResponsivePics ada:
/*
* Set ResponsivePics variables
*/
if ( class_exists ( ' ResponsivePics ' )) {
ResponsivePics:: setColumns ( 12 );
ResponsivePics:: setGutter ( 30 );
ResponsivePics:: setBreakPoints ([
' xs ' => 0 ,
' sm ' => 576 ,
' md ' => 768 ,
' lg ' => 992 ,
' xl ' => 1200 ,
' xxl ' => 1400 ,
' xxxl ' => 1600 ,
' xxxxl ' => 1920
]);
ResponsivePics:: setGridWidths ([
' xs ' => 576 ,
' sm ' => 768 ,
' md ' => 992 ,
' lg ' => 1200 ,
' xl ' => 1400 ,
' xxl ' => 1600 ,
' xxxl ' => 1920
]);
ResponsivePics:: setMaxWidthFactor ( 4 );
ResponsivePics:: setLazyLoadClass ( ' lozad ' );
ResponsivePics:: setLqipWidth ( 200 );
ResponsivePics:: setLqipClass ( ' blurred ' );
ResponsivePics:: setImageQuality ( 85 );
ResponsivePics:: setRestApiCache ( true );
ResponsivePics:: setRestApiCacheDuration ( 86400 );
}Anda dapat mengambil variabel apa pun yang digunakan di ResponsivePics dengan menjalankan salah satu fungsi pembantu berikut:
ResponsivePics:: getColumns (); // Will return $columns
ResponsivePics:: getGutter (); // Will return $gutter
ResponsivePics:: getBreakpoints (); // Will return $breakpoints
ResponsivePics:: getGridWidths (); // Will return $grid_widths
ResponsivePics:: getMaxWidthFactor (); // Will return $max_width_factor
ResponsivePics:: getLqipWidth (); // Will return $max_width_factor
ResponsivePics:: getLazyLoadClass (); // Will return $lazyload_class
ResponsivePics:: getLqipWidth (); // Will return $lqip_width
ResponsivePics:: getLqipClass (); // Will return $lqip_class
ResponsivePics:: getImageQuality (); // Will return $image_quality
ResponsivePics:: getRestApiCache (); // Will return $wp_rest_cache
ResponsivePics:: getRestApiCacheDuration (); // Will return $wp_rest_cache_duration Untuk menyisipkan elemen <img> responsif ke dalam templat Anda, gunakan fungsi get_image atau titik akhir API responsive-pics/v1/image dengan parameter yang tersedia.
ResponsivePics:: get_image (id, sizes, crop, classes, lazyload, lqip); GET /wp-json/responsive-pics/v1/image/<id>?sizes=<sizes>&crop=<crop>&classes=<classes>&lazyload=<lazyload>&lqip=<lqip>
| Parameter | Jenis | Diperlukan | Bawaan | Definisi |
|---|---|---|---|---|
| pengenal | nomor | Ya | Id gambar WordPress (misalnya 1). | |
| ukuran | rangkaian | Ya | String ukuran gambar pilihan yang dipisahkan koma (misalnya 'xs-12, sm-6, md-4, lg-3' ). Lihat bagian Ukuran untuk informasi lebih lanjut. | |
| tanaman | nomor/string | opsional | false | Faktor pemangkasan lebar untuk tinggi yang diinginkan dalam rentang default 0-2 (misalnya 0.75 ) dengan posisi pemotongan (opsional) (misalnya 0.75|ct ). Lihat bagian Pemangkasan untuk informasi lebih lanjut. |
| kelas | rangkaian | opsional | null | String kelas CSS tambahan yang dipisahkan koma yang ingin Anda tambahkan ke elemen img (misalnya 'my_img_class' atau 'my_img_class, my_second_img_class' ). |
| beban malas | boolean/string | opsional | false | Ketika true mengaktifkan kelas lazyload dan atribut data-srcset. Saat native mengaktifkan atribut loading="lazy" asli. Lihat bagian Lazyloading untuk informasi lebih lanjut. |
| lqip | boolean | opsional | false | Ketika true mengaktifkan kelas LQIP dan atribut src. Lihat bagian LQIP untuk informasi lebih lanjut. |
Untuk mengambil data <img> responsif di tema Anda, Anda dapat menggunakan fungsi get_image_data atau titik akhir API responsive-pics/v1/image-data dengan parameter yang tersedia id , sizes , crop , classes , lazyload dan lqip .
ResponsivePics:: get_image_data (id, sizes, crop, classes, lazyload, lqip); GET /wp-json/responsive-pics/v1/image-data/<id>?sizes=<sizes>&crop=<crop>&classes=<classes>&lazyload=<lazyload>&lqip=<lqip>
Ini akan mengembalikan array yang berisi sumber gambar yang tersedia per breakpoint, teks alt, tipe mime, nilai boolean untuk saluran alpha dan lazyload, url untuk gambar lqip dan array untuk kelas css.
[
' sources ' => ( array ) $ sources ,
' alt ' => ( string ) $ alt ,
' mimetype ' => ( string ) $ mime_type ,
' alpha ' => ( bool ) $ alpha ,
' lazyload ' => ( bool ) $ lazyload ,
' lqip ' => ( string ) $ lqip ,
' classes ' => ( array ) $ classes
]; Untuk menyisipkan elemen <picture> responsif ke dalam templat Anda, gunakan fungsi get_picture atau titik akhir API responsive-pics/v1/picture dengan parameter yang tersedia.
ResponsivePics:: get_picture (id, sizes, classes, lazyload, intrinsic); GET /wp-json/responsive-pics/v1/picture/<id>?sizes=<sizes>&classes=<classes>&lazyload=<lazyload>&intrinsic=<intrinsic>
| Parameter | Jenis | Diperlukan | Bawaan | Definisi |
|---|---|---|---|---|
| pengenal | nomor | Ya | Id gambar WordPress (misalnya 1). | |
| ukuran | rangkaian | Ya | String ukuran gambar pilihan yang dipisahkan koma (misalnya 'xs-12, sm-6, md-4, lg-3' ). Lihat bagian Ukuran untuk informasi lebih lanjut. | |
| kelas | rangkaian | opsional | null | String kelas CSS tambahan yang dipisahkan koma yang ingin Anda tambahkan ke elemen gambar (misalnya 'my_picture_class' atau 'my_picture_class, my_second_picture_class' ). |
| beban malas | boolean/string | opsional | false | Ketika true mengaktifkan kelas lazyload dan atribut data-srcset. Saat native mengaktifkan atribut loading="lazy" asli. Lihat bagian Lazyloading untuk informasi lebih lanjut. |
| hakiki | boolean | opsional | false | Jika true mengaktifkan kelas intrinsic dan atribut aspek data. Lihat bagian Aspek Intrinsik untuk informasi lebih lanjut. |
Untuk mengambil data <picture> responsif dalam tema Anda, Anda dapat menggunakan fungsi get_picture_data atau titik akhir API responsive-pics/v1/picture-data dengan parameter yang tersedia id , sizes , classes , lazyload dan intrinsic .
ResponsivePics:: get_picture_data (id, sizes, classes, lazyload, intrinsic); GET /wp-json/responsive-pics/v1/picture-data/<id>?sizes=<sizes>&classes=<classes>&lazyload=<lazyload>&intrinsic=<intrinsic>
Ini akan mengembalikan array yang berisi sumber gambar yang tersedia per breakpoint, teks alt, tipe mime, nilai boolean untuk saluran alfa dan intrinsik, array untuk kelas css gambar dan array untuk kelas img css.
[
' sources ' => ( array ) $ sources ,
' alt ' => ( string ) $ alt ,
' mimetype ' => ( string ) $ mime_type ,
' alpha ' => ( bool ) $ alpha ,
' lazyload ' => ( bool ) $ lazyload ,
' intrinsic ' => ( bool ) $ intrinsic ,
' picture_classes ' => ( array ) $ picture_classes ,
' image_classes ' => ( array ) $ image_classes
]; Untuk menyisipkan gambar latar belakang responsif ke dalam templat Anda, gunakan fungsi get_background atau titik akhir API responsive-pics/v1/background dengan parameter yang tersedia.
ResponsivePics:: get_background (id, sizes, classes); GET /wp-json/responsive-pics/v1/background/<id>?sizes=<sizes>&classes=<classes>
| Parameter | Jenis | Diperlukan | Bawaan | Definisi |
|---|---|---|---|---|
| pengenal | nomor | Ya | Id gambar WordPress (misalnya 1). | |
| ukuran | rangkaian | Ya | String ukuran gambar pilihan yang dipisahkan koma (misalnya 'xs-12, sm-6, md-4, lg-3' ). Lihat bagian Ukuran untuk informasi lebih lanjut. | |
| kelas | rangkaian | opsional | null | String kelas CSS tambahan yang dipisahkan koma yang ingin Anda tambahkan ke elemen latar belakang (misalnya 'my_bg_class' atau 'my_bg_class, my_second_bg_class' ). |
Untuk mengambil data gambar latar belakang responsif dalam tema Anda, Anda dapat menggunakan fungsi get_background_data atau titik akhir API responsive-pics/v1/background-data dengan parameter yang tersedia id , sizes dan classes .
ResponsivePics:: get_background_data (id, sizes, classes); GET /wp-json/responsive-pics/v1/background-data/<id>?sizes=<sizes>&classes=<classes>
Ini akan mengembalikan array yang berisi sumber gambar latar belakang yang tersedia per breakpoint, teks alt, tipe mime, nilai boolean jika gambar memiliki saluran alfa, id untuk latar belakang dan array untuk kelas css latar belakang.
[
' sources ' => ( array ) $ sources ,
' alt ' => ( string ) $ alt ,
' mimetype ' => ( string ) $ mime_type ,
' alpha ' => ( bool ) $ alpha ,
' id ' => ( string ) $ id ,
' classes ' => ( array ) $ classes
];Format file gambar berikut ini didukung:
| Format berkas | Tipe MIME | Properti |
|---|---|---|
| jp(e)g | gambar/jpeg | |
| webp | gambar/webp | Membutuhkan Wordpress versi 5.8 atau lebih tinggi. |
| png | gambar/png | Ketika png berisi saluran alfa , kelas 'has-alpha' tambahan akan ditambahkan ke elemen gambar gambar untuk gaya tambahan. |
| gif | gambar/gif | Saat gif dianimasikan (itu akan memeriksa beberapa bingkai header), tidak ada pengubahan ukuran atau pemotongan gambar yang akan dilakukan untuk mencegah penghapusan animasi. |
Format gambar lainnya, tidak akan diubah ukurannya atau dipotong.
Sintaks berikut tersedia untuk setiap ukuran gambar di parameter sizes :
breakpoint:width| Parameter | Jenis | Diperlukan | Bawaan | Definisi |
|---|---|---|---|---|
| titik henti sementara | nomor atau string | Ya | Jika tidak ditentukan, dan width berupa angka, breakpoint akan sama dengan lebarnya. Jika tidak terdefinisi, dan width adalah definisi kolom, breakpoint akan menjadi breakpoint yang sesuai (misal, jika lebar adalah 'xs-8' , breakpoint akan menjadi 'xs' ). | |
| lebar | nomor atau string | Ya | Definisi kolom adalah kunci dalam $grid_widths ditambah tanda hubung dan nomor rentang kolom (misalnya 'xs-8' ).Jika nomor rentang kolom diakhiri dengan -full (misalnya 'xs-8-full' ), lebar kolom dihitung sebagai persentase dari $grid_width , tetapi sebagai lebar $breakpoint berikutnya yang cocok (seperti dalam .container-fluid ).Anda juga dapat menggunakan full sebagai nomor rentang (misalnya 'xs-full' ) untuk ukuran lebar penuh berdasarkan lebar $breakpoint yang cocok berikutnya. |
Karena elemen <picture> dan gambar latar belakang mendukung gambar yang diarahkan pada seni, sintaksis lengkap berikut tersedia untuk setiap ukuran gambar dalam parameter sizes :
breakpoint:width [/factor|height]|crop_x crop_yParameter berikut tersedia dalam sintaks ukuran:
| Parameter | Jenis | Diperlukan | Bawaan | Definisi |
|---|---|---|---|---|
| titik henti sementara | nomor atau string | Ya | Jika tidak ditentukan, dan width berupa angka, breakpoint akan sama dengan lebarnya. Jika tidak terdefinisi, dan width adalah definisi kolom, breakpoint akan menjadi breakpoint yang sesuai (misal, jika lebar adalah 'xs-8' , breakpoint akan menjadi 'xs' ). | |
| lebar | nomor atau string | Ya | Lebar gambar (maks) yang diinginkan (misalnya 800 ). Definisi kolom adalah kunci dalam $grid_widths ditambah tanda hubung dan nomor rentang kolom (misalnya 'xs-8' ).Jika nomor rentang kolom diakhiri dengan -full (misalnya 'xs-8-full' ), lebar kolom dihitung sebagai persentase dari $grid_width , tetapi sebagai lebar $breakpoint berikutnya yang cocok (seperti dalam .container-fluid ).Anda juga dapat menggunakan full sebagai nomor rentang (misalnya 'xs-full' ) untuk ukuran lebar penuh berdasarkan lebar $breakpoint yang cocok berikutnya. | |
| tinggi | nomor | opsional | Ketinggian gambar (maks) yang diinginkan (misalnya 500 ). | |
| faktor | nomor | opsional | Faktor pemotongan lebar untuk tinggi yang diinginkan dalam rentang default 0-2 (misalnya 0.75 ). | |
| potong_x | nomor atau string | opsional | C | Posisi crop dalam arah horizontal (misal c ). Lihat bagian Pemangkasan untuk informasi lebih lanjut. |
| potong_y | nomor atau string | opsional | C | Posisi crop dalam arah vertikal (misal b ). Lihat bagian Pemangkasan untuk informasi lebih lanjut. |
Opsi berikut tersedia sebagai posisi pemotongan yang valid:
Anda dapat menggunakan singkatan posisi crop berikut dalam arah horizontal (x):
l : kiric : tengahr : benarf : titik fokus (Lihat bagian Titik Fokus untuk informasi lebih lanjut)Dan dalam arah vertikal (y):
t : atasc : tengahb : bawah Jika arah vertikal tidak diatur, arah horizontal x akan dianggap sebagai jalan pintas:
c : pusat tengaht : tengah atasr : kanan tengahb : tengah bawahl : kiri tengahf : titik fokus (Lihat bagian Titik Fokus untuk informasi lebih lanjut)Anda juga dapat menggunakan persentase sebagai sintaks posisi pemotongan yang valid:
75 10 : 75% dari kiri, 10% dari atas25 80 : 25% dari kiri, 80% dari atas50 100 : 50% dari kiri, 100% dari atas (sama dengan center bottom ) Dalam hal ini koordinat x dan y harus dilewati.
Bila Anda ingin memotong gambar namun tetap melihat area tertentu pada gambar, Anda dapat menggunakan fitur singkatan f(ocal) . Untuk mengatur area fokus gambar ini, kami menambahkan antarmuka pemilih titik fokus ke beberapa tampilan kerangka media Wordpress.
Saat mengklik thumbnail dari tampilan grid Perpustakaan Media Wordpress, Anda akan melihat modal Attachment details . Ini akan menjadi tampilan paling akurat untuk memilih titik fokus Anda: 
Saat mengatur atau mengganti gambar unggulan di halaman atau postingan, Anda akan melihat modal Featured image . Dalam tampilan ini Anda dapat memilih titik fokus pada thumbnail di bagian atas sidebar kanan: 
Saat mengunggah atau mengedit gambar di editor WYSIWYG atau bidang meta di halaman atau postingan, Anda akan melihat modal Edit image . Dalam tampilan ini Anda dapat memilih titik fokus pada thumbnail di kiri atas: 
Ada 3 cara untuk mengatur titik fokus gambar dengan antarmuka:
Dengan menggunakan salah satu opsi berikut, kunci meta postingan bernama responsive_pics_focal_point akan ditambahkan atau diperbarui ke lampiran dengan nilai array yang berisi koordinat x & y sebagai persentase:
[
' x ' => ' 86 ' ,
' y ' => ' 39 '
]Untuk menggunakan nilai ini di tempat lain dalam tema Anda, Anda dapat mengambilnya dengan menelepon:
$ focal_point = get_post_meta ( $ attachment_id , ' responsive_pics_focal_point ' , true );ResponsivePics dilakukan, pustaka ini akan menambahkan tugas mengubah ukuran dan/atau memotong gambar sebagai tugas ke antrean proses latar belakang menggunakan Penjadwal Tindakan.Pustaka pemrosesan latar belakang Penjadwal Tindakan memiliki layar administrasi bawaan untuk memantau, melakukan debug, dan secara manual memicu pekerjaan pengubahan ukuran gambar terjadwal. Antarmuka administrasi dapat diakses melalui:
Tools > Scheduled ActionsSetiap pekerjaan pengubahan ukuran akan dikelompokkan berdasarkan id gambar wordpressnya
Saat Anda menggunakan WP-Cron bawaan, antrian proses latar belakang hanya akan memproses tugas apa pun pada setiap pemuatan halaman.
Jika Anda telah menonaktifkan WP-Cron di pengaturan Anda dan Anda menggunakan tugas cron Anda sendiri di server Anda, Penjadwal Tindakan akan menggunakan interval yang ditetapkan dalam tugas cron tersebut untuk memproses kumpulan tugas berikutnya.
define ( ' DISABLE_WP_CRON ' , true ); Jika Anda menggunakan Teralis seperti kami ❤️, interval cron default disetel ke setiap 15 menit.
Anda dapat menggantinya menjadi misalnya 1 menit dengan mengatur variabel cron_interval (atau cron_interval_multisite untuk multisite) per situs wordpress ke */1 :
Misalnya saja trellis/group_vars/development/wordpress_sites.yml :
wordpress_sites :
example.com :
site_hosts :
- canonical : example.test
redirects :
- www.example.test
local_path : ../site # path targeting local Bedrock site directory (relative to Ansible root)
admin_email : [email protected]
multisite :
enabled : false
ssl :
enabled : false
provider : self-signed
cache :
enabled : false
cron_interval : ' */1 'Jangan lupa untuk memprovisi ulang server Anda setelah mengubah nilai ini.
Jika terjadi kesalahan selama proses pengubahan ukuran atau jika ada sintaks yang tidak valid, ResponsivePics akan menampilkan atau mengembalikan kesalahan.
Kesalahan ResponsivePics - breakpoint xxs tidak ditentukan atau berupa angka
{
"code" : " responsive_pics_invalid " ,
"message" : " breakpoint xxs is neither defined nor a number " ,
"data" : {
"xs" : 0 ,
"sm" : 576 ,
"md" : 768 ,
"lg" : 992 ,
"xl" : 1200 ,
"xxl" : 1400
}
}Tindakan berikut memungkinkan Anda terhubung ke timeline proses pengubahan ukuran gambar. Anda dapat menempatkannya di file function.php tema Anda.
responsive_pics_request_scheduledTindakan ini diaktifkan ketika ResponsivePics telah menjadwalkan permintaan pengubahan ukuran gambar baru ke antrean ActionScheduler.
do_action ( ' responsive_pics_request_scheduled ' , ( int ) $ post_id , ( array ) $ resize_request ); $post_id
(integer) ID lampiran
$resize_request
(array) Parameter permintaan pengubahan ukuran:
[
' id ' => ( int ) The attachment ID ,
' quality ' => ( int ) The requested image quality,
' width ' => ( int ) The requested image width,
' height ' => ( int ) The requested image height,
' crop ' => ( array ) The requested image crop positions,
' ratio ' => ( float ) The requested image ratio,
' path ' => ( string ) The requested image file path,
' rest_route ' => ( string ) The requested rest api route
]responsive_pics_request_processedTindakan ini diaktifkan ketika ActionScheduler telah memproses permintaan pengubahan ukuran gambar dalam antrean.
do_action ( ' responsive_pics_request_processed ' , ( int ) $ post_id , ( int ) $ quality , ( int ) $ width , ( int ) $ height , ( array ) $ crop , ( float ) $ ratio , ( string ) $ resize_path , ( string ) $ rest_route ); $post_id
(int) ID lampiran
$kualitas
(int) Kualitas gambar yang diminta
$lebar
(int) Lebar gambar yang diminta
$tinggi
(int) Tinggi gambar yang diminta
$pangkas
(array) Posisi pemotongan gambar yang diminta dalam persentase:
[
' x ' => ( int ) The horizontal crop position as percentage,
' y ' => ( int ) The vertical crop position as percentage
] $rasio
(float) Rasio gambar yang diminta
$resize_path
(string) Jalur file gambar yang diminta
responsive_pics_file_saved_localTindakan ini diaktifkan ketika ResponsivePics berhasil menyimpan file gambar yang diubah ukurannya secara lokal.
do_action ( ' responsive_pics_file_saved_local ' , ( int ) $ post_id , ( array ) $ file ); $post_id
(int) ID lampiran
$file
(array) File tersimpan yang berisi:
[
' path ' => ( string ) The saved image filepath,
' file ' => ( string ) The saved image filename,
' width ' => ( int ) The saved image file width,
' height ' => ( int ) The saved image file height,
' mime-type ' => ( string ) The saved image file mime-type,
' filesize ' => ( int ) The saved image filesize
]responsive_pics_file_s3_uploadedTindakan ini dipicu ketika WP Offload Media telah mengunggah file gambar yang diubah ukurannya ke penyimpanan S3 Anda.
do_action ( ' responsive_pics_file_s3_uploaded ' , ( int ) $ post_id , ( array ) $ file ); $post_id
(int) ID lampiran
$file
(array) File yang diunggah S3 berisi:
[
' path ' => ( string ) The uploaded image filepath,
' file ' => ( string ) The uploaded image filename,
' width ' => ( int ) The uploaded image file width,
' height ' => ( int ) The uploaded image file height,
' mime-type ' => ( string ) The uploaded image file mime-type,
' filesize ' => ( int ) The uploaded image filesize
]responsive_pics_file_deleted_localTindakan ini diaktifkan ketika ResponsivePics berhasil menghapus file gambar yang diubah ukurannya secara lokal.
do_action ( ' responsive_pics_file_deleted_local ' , ( int ) $ post_id , ( string ) $ file ); $post_id
(int) ID lampiran
$file
(string) Jalur file gambar yang dihapus
responsive_pics_file_s3_deletedTindakan ini dipicu ketika WP Offload Media telah menghapus file gambar yang diubah ukurannya di penyimpanan S3 Anda.
do_action ( ' responsive_pics_file_s3_deleted ' , ( int ) $ post_id , ( array ) $ file_paths ); $post_id
(int) ID lampiran
$file_paths
(array) Jalur file yang diubah ukurannya dihapus di penyimpanan S3 Anda.
Saat Anda menginstal dan mengaktifkan plugin WP Offload Media (Lite), perpustakaan ini secara otomatis:
CATATAN
Ketika opsi Hapus File Dari Server diaktifkan di pengaturan Offload Media Lite , plugin ini TIDAK akan menghapus gambar apa pun yang diubah ukurannya/dipotong yang dihasilkan oleh plugin ini!
Saat mengaktifkan opsi lazyload di fungsi get_picture atau get_image atau titik akhir API dengan nilai boolean true , pustaka ini secara otomatis:
lazyload ke elemen <img> .srcset dengan atribut data-srcset pada elemen gambar <source> atau <img> .Ini akan memungkinkan Anda untuk menggunakan plugin pemuatan lambat seperti Lazysizes.
Anda juga dapat mengatur kelas lazyload Anda sendiri dengan meneruskannya ke perpustakaan ResponsivePics di fungsi tema Anda.php :
if ( class_exists ( ' ResponsivePics ' )) {
ResponsivePics:: setLazyLoadClass ( ' lazy ' );
}Untuk menginstal Lazysizes di tema wordpress Anda sebagai modul simpul, jalankan perintah berikut dari direktori tema Anda:
npm install --save lazysizes
yarn add lazysizes
Dan impor paket tersebut ke file javascript global tema Anda:
import 'lazysizes' ; Saat mengaktifkan lazyload dengan nilai string native , pustaka ini secara otomatis:
loading="lazy" ke elemen <img> . Saat mengaktifkan opsi lqip di fungsi get_image atau titik akhir API /responsive-pics/v1/image , pustaka ini secara otomatis:
blur-up ke elemen <img> .src pada elemen <img> dengan gambar placeholder berkualitas rendah dengan lebar default 100px.Ini akan memungkinkan Anda menata gambar placeholder Anda sebelum gambar berkualitas tinggi sebenarnya dimuat.
Anda juga dapat mengatur kelas lqip Anda sendiri dengan meneruskannya ke perpustakaan ResponsivePics di fungsi tema Anda.php :
if ( class_exists ( ' ResponsivePics ' )) {
ResponsivePics:: setLqipClass ( ' blurred ' );
} Saat mengaktifkan opsi intrinsic di fungsi get_picture atau titik akhir API /responsive-pics/v1/picture , pustaka ini secara otomatis:
<picture> dan kelas intrinsic__item ke elemen <img> gambar.data-aspectratio pada elemen gambar <source> dan <img> dengan rasio gambar sumber yang dihitung.Ini akan memungkinkan Anda untuk mengisi terlebih dahulu ruang yang diperlukan untuk sebuah gambar dengan menghitung tinggi dari lebar gambar atau lebar dari tinggi dengan plugin intrinsik seperti ekstensi rasio aspek ukuran malas.
Untuk menggunakan ekstensi aspek rasio Lazysizes di tema wordpress Anda, pertama-tama instal lazysizes sebagai modul simpul seperti yang dijelaskan di bagian Lazyloading dan impor ekstensi tersebut ke file javascript global tema Anda:
import 'lazysizes/plugins/aspectratio/ls.aspectratio.js' ; Silakan kirimkan masalah apa pun yang Anda alami dengan perpustakaan ResponsivePics di Github.
ResponsivePics dikembangkan dan dikelola oleh:
@monokai (pencipta)
@twansparant (pencipta)
Hak cipta kode dan dokumentasi 2017-2023 oleh Clarify.
Kode dirilis di bawah Lisensi MIT.
Dokumen dirilis di bawah Creative Commons.
