responsive pics
Version 1.8.3
ResponsivePics เป็นปลั๊กอิน WordPress ที่ช่วยให้ผู้เขียนธีม WordPress สามารถปรับขนาดรูปภาพ * ในรูปแบบที่ตอบสนองได้โดยอัตโนมัติ
*ReponsivePics ไม่รองรับรูปภาพในตัวแก้ไข wysiwig ของ WordPress แต่จะมีประโยชน์เฉพาะสำหรับผู้สร้างธีมที่ใช้รูปภาพหรือรูปถ่ายในธีมของตนเท่านั้น โดยจะจัดการภาพเรตินาหรือ HDPI โดยอัตโนมัติผ่านการสืบค้นสื่อ
สำหรับเอกสารฉบับเต็มและตัวอย่าง โปรดไปที่: responsive.pics
| ข้อกำหนดเบื้องต้น | วิธีการตรวจสอบ |
|---|---|
| PHP >= 5.6.x | php -v |
| เวิร์ดเพรส >= 3.5.x | wp core version |
| เปิดใช้งาน WP-Cron หรือตั้งค่างาน cron จริง | test WP-Cron |
คุณสามารถติดตั้งปลั๊กอินนี้ผ่านทางบรรทัดคำสั่งหรือแผงผู้ดูแลระบบ WordPress
หากคุณใช้ Composer ในการจัดการ WordPress ให้เพิ่ม ResponsivePics ลงในการขึ้นต่อกันของโปรเจ็กต์ของคุณ
composer require clarifynl/responsive-picsจากนั้นเปิดใช้งานปลั๊กอินผ่าน wp-cli
wp plugin activate responsive-pics ปัจจุบันองค์ประกอบ <picture> และแอตทริบิวต์ srcset และ sizes บนองค์ประกอบ <img> ได้รับการสนับสนุนในเบราว์เซอร์สมัยใหม่ทั้งหมด ยกเว้น Internet Explorer 11
หากต้องการเปิดใช้งานการรองรับองค์ประกอบรูปภาพและคุณสมบัติที่เกี่ยวข้องในเบราว์เซอร์ที่ยังไม่รองรับ คุณสามารถใช้โพลีฟิลได้ เราแนะนำให้ใช้ Picturefill
หากต้องการติดตั้ง Picturefill ในธีม WordPress ของคุณเป็นโมดูลโหนด ให้รันคำสั่งต่อไปนี้จากไดเร็กทอรีธีมของคุณ:
npm install --save picturefill
yarn add picturefill
และนำเข้าแพ็คเกจในไฟล์จาวาสคริปต์ส่วนกลางของธีมของคุณ: import 'picturefill';
ResponsivePics ใช้ตัวแปรเริ่มต้นต่อไปนี้:
| ตัวแปร | พิมพ์ | ค่าเริ่มต้น | คำนิยาม |
|---|---|---|---|
$columns | ตัวเลข | 12 | จำนวนคอลัมน์ที่เค้าโครงตารางของคุณใช้ |
$gutter | ตัวเลข | 30 | ความกว้างของรางน้ำเป็นพิกเซล (ช่องว่างระหว่างคอลัมน์ตาราง) |
$breakpoints | อาร์เรย์ | ['xs' => 0, 'sm' => 576, 'md' => 768, 'lg' => 992, 'xl' => 1200, 'xxl' => 1400] | เบรกพอยต์การสืบค้นสื่อ ResponsivePics จะใช้ในการสร้างและให้บริการแหล่งรูปภาพของคุณ |
$grid_widths | อาร์เรย์ | ['xs' => 576, 'sm' => 540, 'md' => 720, 'lg' => 960, 'xl' => 1140, 'xxl' => 1320] | ความกว้างสูงสุดของเค้าโครงของคุณเป็นพิกเซล ResponsivePics จะใช้ในการปรับขนาดรูปภาพของคุณ |
$max_width_factor | ตัวเลข | 2 | ค่าสูงสุดของความกว้างที่จะใช้สำหรับการปรับขนาดและครอบตัดความสูงของแหล่งที่มาของรูปภาพ |
$lazyload_class | เชือก | lazyload | คลาส CSS ที่จะเพิ่มลงในแท็ก img เมื่อเปิดใช้งาน lazyload |
$lqip_width | ตัวเลข | 100 | ความกว้างของรูปภาพที่จะใช้สำหรับ LQIP (ตัวยึดตำแหน่งรูปภาพคุณภาพต่ำ) |
$lqip_class | เชือก | blur-up | คลาส css ที่จะเพิ่มในแท็ก img เมื่อเปิดใช้งาน LQIP (ตัวยึดตำแหน่งรูปภาพคุณภาพต่ำ) |
$image_quality | ตัวเลข | 90 | คุณภาพการบีบอัดรูปภาพเป็นเปอร์เซ็นต์ที่ใช้ใน WP_Image_Editor เมื่อปรับขนาดรูปภาพ |
$wp_rest_cache | บูลีน | false | จำเป็นต้องเปิดใช้งานแคชในส่วนหัวการตอบสนอง WP Rest API |
$wp_rest_cache_duration | ตัวเลข | 3600 | ระยะเวลาแคช (อายุสูงสุด) เป็นวินาทีของส่วนหัว WP Rest API Cache-Control |
ตามค่าเริ่มต้น ResponsivePics จะใช้ตัวแปร Bootstrap 4 SCSS เพื่อกำหนด:
จำนวน คอลัมน์กริด : $grid-columns: 12;
ความกว้างของรางน้ำกริด เป็นพิกเซล: $grid-gutter-width: 30px;
เบรกพอยต์กริด เป็นพิกเซล:
$grid-breakpoints : (
xs : 0 ,
sm : 576 px ,
md : 768 px ,
lg : 992 px ,
xl : 1200 px ,
xxl : 1400 px
);และ ความกว้างสูงสุดของคอนเทนเนอร์ เป็นพิกเซล:
$container-max-widths : (
sm : 540 px ,
md : 720 px ,
lg : 960 px ,
xl : 1140 px ,
xxl : 1320 px
); หมายเหตุ: ResponsivePics จะเพิ่มความกว้างสูงสุดของคอนเทนเนอร์ xs ให้กับคุณ (= 576) โดยขึ้นอยู่กับเบรกพอยต์กริด sm เริ่มต้น (= 576px)
หากคุณได้ปรับแต่งค่าเริ่มต้นบูตสแตรปหรือหากคุณใช้ระบบกริดอื่น (Foundation, Materialize ฯลฯ) หรือแม้ว่าคุณต้องการเพิ่มเบรกพอยต์และความกว้างของคอนเทนเนอร์เพิ่มเติม คุณสามารถส่งตัวแปรกริดของคุณเองไปยังไลบรารี ResponsivePics ได้
เพิ่มบรรทัดเหล่านี้ลงใน Functions.php ของธีมของคุณ และตรวจสอบว่ามีคลาส ResponsivePics อยู่หรือไม่:
/*
* 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 );
}คุณสามารถดึงข้อมูลตัวแปรใดๆ ที่ใช้ใน ResponsivePics ได้โดยการเรียกใช้ฟังก์ชันตัวช่วยอย่างใดอย่างหนึ่งเหล่านี้:
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 สำหรับการแทรกองค์ประกอบ <img> แบบตอบสนองในเทมเพลตของคุณ ให้ใช้ฟังก์ชัน get_image หรือจุดสิ้นสุด responsive-pics/v1/image API พร้อมด้วยพารามิเตอร์ที่มี
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>
| พารามิเตอร์ | พิมพ์ | ที่จำเป็น | ค่าเริ่มต้น | คำนิยาม |
|---|---|---|---|---|
| รหัส | ตัวเลข | ใช่ | รหัสรูปภาพ WordPress (เช่น 1) | |
| ขนาด | เชือก | ใช่ | สตริงที่คั่นด้วยเครื่องหมายจุลภาคของขนาดรูปภาพที่ต้องการ (เช่น 'xs-12, sm-6, md-4, lg-3' ) ดูส่วนขนาดสำหรับข้อมูลเพิ่มเติม | |
| ครอบตัด | หมายเลข/สตริง | ไม่จำเป็น | false | ปัจจัยครอบตัดของความกว้างสำหรับความสูงที่ต้องการภายในช่วงเริ่มต้น 0-2 (เช่น 0.75 ) พร้อมตำแหน่งครอบตัด (ไม่บังคับ) (เช่น 0.75|ct ) ดูส่วนการครอบตัดสำหรับข้อมูลเพิ่มเติม |
| ชั้นเรียน | เชือก | ไม่จำเป็น | null | สตริงที่คั่นด้วยเครื่องหมายจุลภาคของคลาส CSS เพิ่มเติมที่คุณต้องการเพิ่มลงในองค์ประกอบ img (เช่น 'my_img_class' หรือ 'my_img_class, my_second_img_class' ) |
| ขี้เกียจโหลด | บูลีน/สตริง | ไม่จำเป็น | false | เมื่อเปิดใช้งานคลาส lazyload และแอตทริบิวต์ data-srcset true เมื่อ native ใช้งานแอตทริบิวต์ loading="lazy" ดั้งเดิม ดูส่วน Lazyloading สำหรับข้อมูลเพิ่มเติม |
| ลิปป์ | บูลีน | ไม่จำเป็น | false | เมื่อ true เปิดใช้งานคลาส LQIP และแอตทริบิวต์ src ดูส่วน LQIP สำหรับข้อมูลเพิ่มเติม |
สำหรับการเรียกข้อมูล <img> แบบตอบสนองในธีมของคุณ คุณสามารถใช้ฟังก์ชัน get_image_data หรือจุดสิ้นสุด API responsive-pics/v1/image-data พร้อมด้วยพารามิเตอร์ที่มีให้ id , sizes , crop , classes , lazyload และ 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>
สิ่งนี้จะส่งคืนอาร์เรย์ที่มีแหล่งที่มาของรูปภาพที่มีอยู่ต่อเบรกพอยต์, ข้อความแสดงแทน, ประเภท mime, ค่าบูลีนสำหรับช่องอัลฟ่าและโหลดแบบขี้เกียจ, URL สำหรับรูปภาพ lqip และอาร์เรย์สำหรับคลาส css
[
' sources ' => ( array ) $ sources ,
' alt ' => ( string ) $ alt ,
' mimetype ' => ( string ) $ mime_type ,
' alpha ' => ( bool ) $ alpha ,
' lazyload ' => ( bool ) $ lazyload ,
' lqip ' => ( string ) $ lqip ,
' classes ' => ( array ) $ classes
]; สำหรับการแทรกองค์ประกอบ <picture> แบบตอบสนองในเทมเพลตของคุณ ให้ใช้ฟังก์ชัน get_picture หรือจุดสิ้นสุด responsive-pics/v1/picture API พร้อมด้วยพารามิเตอร์ที่มี
ResponsivePics:: get_picture (id, sizes, classes, lazyload, intrinsic); GET /wp-json/responsive-pics/v1/picture/<id>?sizes=<sizes>&classes=<classes>&lazyload=<lazyload>&intrinsic=<intrinsic>
| พารามิเตอร์ | พิมพ์ | ที่จำเป็น | ค่าเริ่มต้น | คำนิยาม |
|---|---|---|---|---|
| รหัส | ตัวเลข | ใช่ | รหัสรูปภาพ WordPress (เช่น 1) | |
| ขนาด | เชือก | ใช่ | สตริงที่คั่นด้วยเครื่องหมายจุลภาคของขนาดรูปภาพที่ต้องการ (เช่น 'xs-12, sm-6, md-4, lg-3' ) ดูส่วนขนาดสำหรับข้อมูลเพิ่มเติม | |
| ชั้นเรียน | เชือก | ไม่จำเป็น | null | สตริงที่คั่นด้วยเครื่องหมายจุลภาคของคลาส CSS เพิ่มเติมที่คุณต้องการเพิ่มลงในองค์ประกอบรูปภาพ (เช่น 'my_picture_class' หรือ 'my_picture_class, my_second_picture_class' ) |
| ขี้เกียจโหลด | บูลีน/สตริง | ไม่จำเป็น | false | เมื่อเปิดใช้งานคลาส lazyload และแอตทริบิวต์ data-srcset true เมื่อ native ใช้งานแอตทริบิวต์ loading="lazy" ดั้งเดิม ดูส่วน Lazyloading สำหรับข้อมูลเพิ่มเติม |
| แท้จริง | บูลีน | ไม่จำเป็น | false | เมื่อ true เปิดใช้งานคลาส intrinsic และแอตทริบิวต์ data-aspectratio ดูส่วน Intrinsic Aspectratio สำหรับข้อมูลเพิ่มเติม |
สำหรับการดึงข้อมูล <picture> แบบตอบสนองในธีมของคุณ คุณสามารถใช้ฟังก์ชัน get_picture_data หรือจุดสิ้นสุด API responsive-pics/v1/picture-data พร้อมด้วยพารามิเตอร์ id , sizes , classes , lazyload และ 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>
ซึ่งจะส่งคืนอาร์เรย์ที่มีแหล่งรูปภาพที่มีอยู่ต่อเบรกพอยต์ ข้อความแสดงแทน ประเภท mime ค่าบูลีนสำหรับช่องอัลฟ่าและภายใน อาร์เรย์สำหรับคลาส picture css และอาร์เรย์สำหรับคลาส 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
]; สำหรับการแทรกภาพพื้นหลังแบบตอบสนองในเทมเพลตของคุณ ให้ใช้ฟังก์ชัน get_background หรือจุดสิ้นสุด API responsive-pics/v1/background พร้อมพารามิเตอร์ที่มีอยู่
ResponsivePics:: get_background (id, sizes, classes); GET /wp-json/responsive-pics/v1/background/<id>?sizes=<sizes>&classes=<classes>
| พารามิเตอร์ | พิมพ์ | ที่จำเป็น | ค่าเริ่มต้น | คำนิยาม |
|---|---|---|---|---|
| รหัส | ตัวเลข | ใช่ | รหัสรูปภาพ WordPress (เช่น 1) | |
| ขนาด | เชือก | ใช่ | สตริงที่คั่นด้วยเครื่องหมายจุลภาคของขนาดรูปภาพที่ต้องการ (เช่น 'xs-12, sm-6, md-4, lg-3' ) ดูส่วนขนาดสำหรับข้อมูลเพิ่มเติม | |
| ชั้นเรียน | เชือก | ไม่จำเป็น | null | สตริงที่คั่นด้วยเครื่องหมายจุลภาคของคลาส CSS เพิ่มเติมที่คุณต้องการเพิ่มให้กับองค์ประกอบพื้นหลัง (เช่น 'my_bg_class' หรือ 'my_bg_class, my_second_bg_class' ) |
สำหรับการดึงข้อมูลรูปภาพพื้นหลังแบบตอบสนองในธีมของคุณ คุณสามารถใช้ฟังก์ชัน get_background_data หรือจุดสิ้นสุด API responsive-pics/v1/background-data พร้อมด้วยพารามิเตอร์ id sizes และ classes ที่มีอยู่
ResponsivePics:: get_background_data (id, sizes, classes); GET /wp-json/responsive-pics/v1/background-data/<id>?sizes=<sizes>&classes=<classes>
สิ่งนี้จะส่งคืนอาร์เรย์ที่มีแหล่งที่มาของรูปภาพพื้นหลังที่มีอยู่ต่อเบรกพอยต์, ข้อความแสดงแทน, ประเภท mime, ค่าบูลีนหากรูปภาพมีช่องอัลฟา, รหัสสำหรับพื้นหลัง และอาร์เรย์สำหรับคลาส css พื้นหลัง
[
' sources ' => ( array ) $ sources ,
' alt ' => ( string ) $ alt ,
' mimetype ' => ( string ) $ mime_type ,
' alpha ' => ( bool ) $ alpha ,
' id ' => ( string ) $ id ,
' classes ' => ( array ) $ classes
];รองรับรูปแบบไฟล์รูปภาพต่อไปนี้:
| รูปแบบไฟล์ | ประเภทไมม์ | คุณสมบัติ |
|---|---|---|
| เจพี(อี)ก | รูปภาพ/jpeg | |
| เว็บพี | รูปภาพ/webp | ต้องใช้ Wordpress เวอร์ชัน 5.8 ขึ้นไป |
| PNG | รูปภาพ/png | เมื่อ PNG มี ช่องอัลฟ่า ระบบจะเพิ่มคลาส 'has-alpha' พิเศษให้กับองค์ประกอบรูปภาพเพื่อจัดสไตล์เพิ่มเติม |
| กิ๊ฟ | รูปภาพ/gif | เมื่อ GIF เป็น ภาพเคลื่อนไหว (จะตรวจสอบเฟรมส่วนหัวหลายเฟรม) จะไม่มีการปรับขนาดหรือการครอบตัดรูปภาพเพื่อป้องกันการละทิ้งภาพเคลื่อนไหว |
รูปแบบรูปภาพอื่นๆ จะไม่ถูกปรับขนาดหรือครอบตัด
ไวยากรณ์ต่อไปนี้ใช้ได้กับรูปภาพแต่ละขนาดในพารามิเตอร์ sizes :
breakpoint:width| พารามิเตอร์ | พิมพ์ | ที่จำเป็น | ค่าเริ่มต้น | คำนิยาม |
|---|---|---|---|---|
| เบรกพอยต์ | หมายเลขหรือสตริง | ใช่ | หากไม่ได้กำหนด และ width เป็นตัวเลข จุดพักจะเหมือนกับความกว้าง หากไม่ได้กำหนด และ width เป็นคำจำกัดความของคอลัมน์ เบรกพอยต์จะเป็นเบรกพอยต์ที่สอดคล้องกัน (เช่น ถ้าความกว้างคือ 'xs-8' เบรกพอยต์จะเป็น 'xs' ) | |
| ความกว้าง | หมายเลขหรือสตริง | ใช่ | คำจำกัดความของคอลัมน์คือคีย์ใน $grid_widths บวกเครื่องหมายขีดกลางและหมายเลขช่วงคอลัมน์ (เช่น 'xs-8' )หากหมายเลขช่วงคอลัมน์ต่อท้ายด้วย -full (เช่น 'xs-8-full' ) ความกว้างของคอลัมน์จะถูกคำนวณเป็นเปอร์เซ็นต์ของ $grid_width แต่เป็นความกว้าง $breakpoint ที่ตรงกันถัดไป (เช่นใน .container-fluid ).คุณยังสามารถใช้ full เป็นหมายเลขช่วง (เช่น 'xs-full' ) สำหรับขนาดความกว้างเต็มตามความกว้าง $breakpoint ที่ตรงกันถัดไป |
เนื่องจากองค์ประกอบ <picture> และภาพพื้นหลังสนับสนุนภาพที่กำกับศิลป์ ดังนั้นไวยากรณ์แบบเต็มต่อไปนี้จึงสามารถใช้ได้สำหรับรูปภาพแต่ละขนาดในพารามิเตอร์ sizes :
breakpoint:width [/factor|height]|crop_x crop_yพารามิเตอร์ต่อไปนี้มีอยู่ในไวยากรณ์ขนาด:
| พารามิเตอร์ | พิมพ์ | ที่จำเป็น | ค่าเริ่มต้น | คำนิยาม |
|---|---|---|---|---|
| เบรกพอยต์ | หมายเลขหรือสตริง | ใช่ | หากไม่ได้กำหนด และ width เป็นตัวเลข จุดพักจะเหมือนกับความกว้าง หากไม่ได้กำหนด และ width เป็นคำจำกัดความของคอลัมน์ เบรกพอยต์จะเป็นเบรกพอยต์ที่สอดคล้องกัน (เช่น ถ้าความกว้างคือ 'xs-8' เบรกพอยต์จะเป็น 'xs' ) | |
| ความกว้าง | หมายเลขหรือสตริง | ใช่ | ความกว้าง (สูงสุด) ที่ต้องการของรูปภาพ (เช่น 800 ) คำจำกัดความของคอลัมน์คือคีย์ใน $grid_widths บวกเครื่องหมายขีดกลางและหมายเลขช่วงคอลัมน์ (เช่น 'xs-8' )หากหมายเลขช่วงคอลัมน์ต่อท้ายด้วย -full (เช่น 'xs-8-full' ) ความกว้างของคอลัมน์จะถูกคำนวณเป็นเปอร์เซ็นต์ของ $grid_width แต่เป็นความกว้าง $breakpoint ที่ตรงกันถัดไป (เช่นใน .container-fluid ).คุณยังสามารถใช้ full เป็นหมายเลขช่วง (เช่น 'xs-full' ) สำหรับขนาดความกว้างเต็มตามความกว้าง $breakpoint ที่ตรงกันถัดไป | |
| ความสูง | ตัวเลข | ไม่จำเป็น | ความสูงที่ต้องการ (สูงสุด) ของรูปภาพ (เช่น 500 ) | |
| ปัจจัย | ตัวเลข | ไม่จำเป็น | ปัจจัยครอบตัดของความกว้างสำหรับความสูงที่ต้องการภายในช่วงเริ่มต้นที่ 0-2 (เช่น 0.75 ) | |
| ครอบตัด_x | หมายเลขหรือสตริง | ไม่จำเป็น | ค | ตำแหน่งครอบตัดในแนวนอน (เช่น c ) ดูส่วนการครอบตัดสำหรับข้อมูลเพิ่มเติม |
| crop_y | หมายเลขหรือสตริง | ไม่จำเป็น | ค | ตำแหน่งครอบตัดในแนวตั้ง (เช่น b ) ดูส่วนการครอบตัดสำหรับข้อมูลเพิ่มเติม |
ตัวเลือกต่อไปนี้สามารถใช้เป็นตำแหน่งครอบตัดที่ถูกต้องได้:
คุณสามารถใช้ชวเลขตำแหน่งครอบตัดต่อไปนี้ในแนวนอน (x):
l : ซ้ายc : ตรงกลางr : ถูกต้องf : จุดโฟกัส (ดูส่วนจุดโฟกัสสำหรับข้อมูลเพิ่มเติม)และในทิศทางแนวตั้ง (y):
t : ด้านบนc : ตรงกลางb : ด้านล่าง หากไม่ได้กำหนดทิศทางแนวตั้ง ทิศทางแนวนอน x จะถือเป็นทางลัด:
c : ศูนย์กลาง ศูนย์กลางt : ตรงกลางด้านบนr : ตรงกลางด้านขวาb : ตรงกลางด้านล่างl : ตรงกลางด้านซ้ายf : จุดโฟกัส (ดูส่วนจุดโฟกัสสำหรับข้อมูลเพิ่มเติม)คุณยังสามารถใช้เปอร์เซ็นต์เป็นไวยากรณ์ตำแหน่งครอบตัดที่ถูกต้องได้:
75 10 : 75% จากซ้าย 10% จากด้านบน25 80 : 25% จากซ้าย 80% จากด้านบน50 100 : 50% จากซ้าย, 100% จากด้านบน (เท่ากับ center bottom ) ในกรณีนี้ต้องส่งทั้งพิกัด x และ y
เมื่อคุณต้องการครอบตัดรูปภาพแต่คงพื้นที่บางส่วนของรูปภาพไว้ให้เห็น คุณสามารถใช้คุณสมบัติการจดชวเลข f(ocal) ได้ เพื่อตั้งค่าพื้นที่โฟกัสของรูปภาพ เราได้เพิ่มอินเทอร์เฟซตัว เลือกจุดโฟกัส ให้กับมุมมองต่างๆ ของเฟรมเวิร์กสื่อ Wordpress
เมื่อคลิกที่ภาพย่อจากมุมมองตาราง Wordpress Media Library คุณจะเห็นโมดอลราย Attachment details นี่จะเป็นมุมมองที่แม่นยำที่สุดในการเลือกจุดโฟกัสของคุณ: 
เมื่อตั้งค่าหรือแทนที่รูปภาพเด่นในเพจหรือโพสต์ คุณจะเห็นโมดอล Featured image ในมุมมองนี้ คุณสามารถเลือกจุดโฟกัสในภาพขนาดย่อที่ด้านบนของแถบด้านข้างขวา: 
เมื่ออัปโหลดหรือแก้ไขรูปภาพในตัวแก้ไขแบบ WYSIWYG หรือฟิลด์เมตาในเพจหรือโพสต์ คุณจะเห็นโมดอล Edit image ในมุมมองนี้ คุณสามารถเลือกจุดโฟกัสในภาพขนาดย่อที่ด้านซ้ายบน: 
คุณสามารถกำหนดจุดโฟกัสของรูปภาพด้วยอินเทอร์เฟซได้ 3 วิธี:
ด้วยการใช้หนึ่งในตัวเลือกเหล่านี้ เมตาคีย์ของโพสต์ชื่อ responsive_pics_focal_point จะถูกเพิ่มหรืออัปเดตเป็นไฟล์แนบที่มีค่าอาร์เรย์ที่มีพิกัด x & y เป็นเปอร์เซ็นต์:
[
' x ' => ' 86 ' ,
' y ' => ' 39 '
]หากต้องการใช้ค่านี้ในส่วนอื่นในธีมของคุณ คุณสามารถเรียกข้อมูลได้โดยการโทร:
$ focal_point = get_post_meta ( $ attachment_id , ' responsive_pics_focal_point ' , true );ResponsivePics ไลบรารีนี้จะเพิ่มงานการปรับขนาดและ/หรือครอบตัดรูปภาพเป็นงานในคิวกระบวนการพื้นหลังโดยใช้ Action SchedulerAction Scheduler ไลบรารีการประมวลผลเบื้องหลังมีหน้าจอการดูแลระบบในตัวสำหรับการตรวจสอบ การแก้ไขจุดบกพร่อง และทริกเกอร์งานปรับขนาดรูปภาพตามกำหนดเวลาด้วยตนเอง อินเทอร์เฟซการดูแลระบบสามารถเข้าถึงได้ผ่าน:
Tools > Scheduled Actionsงานปรับขนาดทั้งหมดจะถูกจัดกลุ่มตามรหัสรูปภาพ WordPress
เมื่อคุณใช้ WP-Cron ในตัว คิวกระบวนการพื้นหลังจะประมวลผลงานใดๆ ในทุกการโหลดเพจเท่านั้น
หากคุณปิดใช้งาน WP-Cron ในการตั้งค่าของคุณและคุณกำลังใช้งาน cron ของคุณเองบนเซิร์ฟเวอร์ของคุณ Action Scheduler จะใช้ช่วงเวลาที่กำหนดในงาน cron นั้นเพื่อประมวลผลงานชุดถัดไป
define ( ' DISABLE_WP_CRON ' , true ); หากคุณใช้ Trellis เหมือนเรา ❤️ ช่วงเวลา cron เริ่มต้นจะตั้งไว้ที่ทุกๆ 15 นาที
คุณสามารถแทนที่สิ่งนี้ได้เช่น 1 นาทีด้วยการตั้งค่าตัวแปร cron_interval (หรือ cron_interval_multisite สำหรับหลายไซต์) ต่อไซต์ wordpress เป็น */1 :
ในตัวอย่าง 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 'อย่าลืมจัดสรรเซิร์ฟเวอร์ของคุณอีกครั้งหลังจากเปลี่ยนค่านี้
หากเกิดข้อผิดพลาดระหว่างกระบวนการปรับขนาดหรือมีไวยากรณ์ไม่ถูกต้อง ResponsivePics จะแสดงหรือส่งคืนข้อผิดพลาด
ข้อผิดพลาด ResponsivePics - เบรกพอยต์ xxs ไม่ได้กำหนดไว้หรือเป็นตัวเลข
{
"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
}
}การดำเนินการต่อไปนี้ช่วยให้คุณสามารถเชื่อมโยงไทม์ไลน์กระบวนการปรับขนาดรูปภาพได้ คุณสามารถวางไว้ในไฟล์ function.php ของธีมของคุณได้
responsive_pics_request_scheduledการดำเนินการนี้จะเริ่มทำงานเมื่อ ResponsivePics ได้กำหนดเวลาคำขอปรับขนาดรูปภาพใหม่ไปยังคิว ActionScheduler
do_action ( ' responsive_pics_request_scheduled ' , ( int ) $ post_id , ( array ) $ resize_request ); $post_id
(จำนวนเต็ม) ID ไฟล์แนบ
$resize_request
(อาร์เรย์) พารามิเตอร์คำขอปรับขนาด:
[
' 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_processedการดำเนินการนี้จะเกิดขึ้นเมื่อ ActionScheduler ประมวลผลคำขอปรับขนาดรูปภาพในคิว
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 สิ่งที่แนบมา
$คุณภาพ
(int) คุณภาพของภาพที่ร้องขอ
$ความกว้าง
(int) ความกว้างของภาพที่ร้องขอ
$ ความสูง
(int) ความสูงของภาพที่ร้องขอ
$ครอบตัด
(อาร์เรย์) ตำแหน่งการครอบตัดรูปภาพที่ต้องการเป็นเปอร์เซ็นต์:
[
' x ' => ( int ) The horizontal crop position as percentage,
' y ' => ( int ) The vertical crop position as percentage
] อัตราส่วน $
(ลอย) อัตราส่วนภาพที่ร้องขอ
$resize_path
(สตริง) เส้นทางไฟล์ภาพที่ร้องขอ
responsive_pics_file_saved_localการดำเนินการนี้จะเริ่มทำงานเมื่อ ResponsivePics บันทึกไฟล์รูปภาพที่ปรับขนาดแล้วในเครื่องได้สำเร็จ
do_action ( ' responsive_pics_file_saved_local ' , ( int ) $ post_id , ( array ) $ file ); $post_id
(int) ID สิ่งที่แนบมา
$ไฟล์
(อาร์เรย์) ไฟล์ที่บันทึกประกอบด้วย:
[
' 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_uploadedการดำเนินการนี้จะเกิดขึ้นเมื่อ WP Offload Media อัปโหลดไฟล์ภาพที่ปรับขนาดแล้วไปยังพื้นที่จัดเก็บข้อมูล S3 ของคุณ
do_action ( ' responsive_pics_file_s3_uploaded ' , ( int ) $ post_id , ( array ) $ file ); $post_id
(int) ID สิ่งที่แนบมา
$ไฟล์
(อาร์เรย์) ไฟล์ที่อัปโหลด S3 ประกอบด้วย:
[
' 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_localการดำเนินการนี้จะเริ่มทำงานเมื่อ ResponsivePics ลบไฟล์รูปภาพที่ปรับขนาดแล้วในเครื่องสำเร็จ
do_action ( ' responsive_pics_file_deleted_local ' , ( int ) $ post_id , ( string ) $ file ); $post_id
(int) ID สิ่งที่แนบมา
$ไฟล์
(สตริง) เส้นทางไฟล์รูปภาพที่ถูกลบ
responsive_pics_file_s3_deletedการดำเนินการนี้จะเกิดขึ้นเมื่อ WP Offload Media ลบไฟล์ภาพที่ปรับขนาดแล้วในพื้นที่จัดเก็บข้อมูล S3 ของคุณ
do_action ( ' responsive_pics_file_s3_deleted ' , ( int ) $ post_id , ( array ) $ file_paths ); $post_id
(int) ID สิ่งที่แนบมา
$file_paths
(อาร์เรย์) เส้นทางไฟล์ที่ปรับขนาดแล้วที่ถูกลบในพื้นที่จัดเก็บข้อมูล S3 ของคุณ
เมื่อคุณติดตั้งและเปิดใช้งานปลั๊กอิน WP Offload Media (Lite) ไลบรารีนี้โดยอัตโนมัติ:
บันทึก
เมื่อเปิดใช้งานตัวเลือก ลบไฟล์จากเซิร์ฟเวอร์ ในการตั้งค่า Offload Media Lite ปลั๊กอินนี้จะ ไม่ ลบรูปภาพที่ปรับขนาด/ครอบตัดที่สร้างโดยปลั๊กอินนี้!
เมื่อเปิดใช้งานตัวเลือก lazyload ในฟังก์ชัน get_picture หรือ get_image หรือจุดสิ้นสุด API ที่มีค่าบูลีน true ไลบรารีนี้โดยอัตโนมัติ:
lazyload ให้กับองค์ประกอบ <img>srcset ด้วยแอตทริบิวต์ data-srcset บนรูปภาพ <source> หรือองค์ประกอบ <img>สิ่งนี้จะช่วยให้คุณใช้ปลั๊กอินการโหลดแบบ Lazy Loading เช่น Lazysizes ได้
คุณยังสามารถตั้งค่าคลาส lazyload ของคุณเองได้โดยส่งต่อไปยังไลบรารี ResponsivePics ใน Functions.php ของธีมของคุณ :
if ( class_exists ( ' ResponsivePics ' )) {
ResponsivePics:: setLazyLoadClass ( ' lazy ' );
}หากต้องการติดตั้ง Lazysizes ในธีม WordPress เป็นโมดูลโหนด ให้รันคำสั่งต่อไปนี้จากไดเร็กทอรีธีมของคุณ:
npm install --save lazysizes
yarn add lazysizes
และนำเข้าแพ็คเกจในไฟล์จาวาสคริปต์ส่วนกลางของธีมของคุณ:
import 'lazysizes' ; เมื่อเปิดใช้งาน lazyload ด้วยค่าสตริง native ไลบรารีนี้โดยอัตโนมัติ:
loading="lazy" ดั้งเดิมให้กับองค์ประกอบ <img> เมื่อเปิดใช้งานตัวเลือก lqip ในฟังก์ชัน get_image หรือจุดสิ้นสุด /responsive-pics/v1/image API ไลบรารีนี้จะอัตโนมัติ:
blur-up ให้กับองค์ประกอบ <img>src ในองค์ประกอบ <img> ด้วยรูปภาพตัวยึดตำแหน่งคุณภาพต่ำซึ่งมีความกว้างเริ่มต้นที่ 100pxซึ่งจะทำให้คุณสามารถจัดรูปแบบรูปภาพตัวยึดตำแหน่งได้ก่อนที่จะโหลดรูปภาพคุณภาพสูงจริง
คุณยังสามารถตั้งค่าคลาส lqip ของคุณเองได้โดยส่งต่อไปยังไลบรารี ResponsivePics ใน Functions.php ของธีมของคุณ :
if ( class_exists ( ' ResponsivePics ' )) {
ResponsivePics:: setLqipClass ( ' blurred ' );
} เมื่อเปิดใช้งานตัวเลือก intrinsic ในฟังก์ชัน get_picture หรือตำแหน่งข้อมูล API /responsive-pics/v1/picture ไลบรารีนี้จะอัตโนมัติ:
<picture> และคลาส intrinsic__item ให้กับองค์ประกอบรูปภาพ <img>data-aspectratio บนองค์ประกอบรูปภาพ <source> และ <img> ด้วยอัตราส่วนรูปภาพต้นฉบับที่คำนวณได้สิ่งนี้จะช่วยให้คุณสามารถครอบครองพื้นที่ที่จำเป็นสำหรับรูปภาพล่วงหน้าโดยการคำนวณความสูงจากความกว้างของรูปภาพ หรือความกว้างจากความสูงด้วยปลั๊กอินภายใน เช่น ส่วนขยายlazizesspectratio
หากต้องการใช้ ส่วนขยาย Lazysizesspectratio ในธีม WordPress ของคุณ ขั้นแรกให้ติดตั้ง Lazysizes เป็นโมดูลโหนดตามที่อธิบายไว้ในส่วน Lazyloading และนำเข้าส่วนขยายในไฟล์ JavaScript ส่วนกลางของธีมของคุณ:
import 'lazysizes/plugins/aspectratio/ls.aspectratio.js' ; โปรดส่งปัญหาใด ๆ ที่คุณพบเกี่ยวกับไลบรารี ResponsivePics มาที่ Github
ResponsivePics ได้รับการพัฒนาและดูแลโดย:
@monokai (ผู้สร้าง)
@twansparant (ผู้สร้าง)
รหัสและเอกสารลิขสิทธิ์ 2017-2023 โดย Clarify
รหัสที่เผยแพร่ภายใต้ใบอนุญาต MIT
เอกสารเผยแพร่ภายใต้ครีเอทีฟคอมมอนส์
