responsive pics
Version 1.8.3
ResponsivePics عبارة عن مكون إضافي لـ WordPress يمكّن مؤلفي سمات WordPress من تغيير حجم الصور تلقائيًا * في تخطيطات سريعة الاستجابة.
*لا يتعامل ReponsivePics مع الصور في محرر WordPress wysiwig، فهو مفيد فقط لمؤلفي السمات الذين يستخدمون الصور أو الصور في موضوعاتهم. يتعامل تلقائيًا مع صور شبكية العين أو hdpi عبر استعلامات الوسائط.
للحصول على الوثائق والأمثلة الكاملة، تفضل بزيارة: response.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 .
لتمكين دعم عنصر الصورة والميزات المرتبطة به في المتصفحات التي لا تدعمها بعد، يمكنك استخدام polyfill. نوصي باستخدام 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 | Wether لتمكين ذاكرة التخزين المؤقت في رؤوس استجابة 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 الافتراضية (= 576 بكسل).
إذا قمت بتخصيص إعدادات التمهيد الافتراضية أو إذا كنت تستخدم نظام شبكة مختلفًا (Foundation أو Materialize وما إلى ذلك)، أو حتى إذا كنت تريد إضافة نقاط توقف إضافية وعروض حاوية، فيمكنك تمرير متغيرات الشبكة الخاصة بك إلى مكتبة ResponsivePics.
أضف هذه السطور إلى ملف function.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 مع المعلمات المتاحة.
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' ). |
| com.lazyload | منطقية/سلسلة | خياري | false | عندما true يتم تمكين فئات lazyload وسمات data-srcset. عندما يقوم native بتمكين سمة loading="lazy" . راجع قسم Lazyloading لمزيد من المعلومات. |
| com.lqip | منطقية | خياري | false | عندما true ، يتم تمكين فئات LQIP وسمة src. راجع قسم LQIP لمزيد من المعلومات. |
لاسترداد بيانات <img> المستجيبة في قالبك، يمكنك استخدام الدالة get_image_data أو نقطة نهاية واجهة برمجة 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، وقيم منطقية لقناة ألفا وlazyload، وعنوان 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 مع المعلمات المتاحة.
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' ). |
| com.lazyload | منطقية/سلسلة | خياري | false | عندما true يتم تمكين فئات lazyload وسمات data-srcset. عندما يقوم native بتمكين سمة loading="lazy" . راجع قسم Lazyloading لمزيد من المعلومات. |
| جوهري | منطقية | خياري | false | عندما يكون true ، يتم تمكين الفئات intrinsic وسمات نسبة أبعاد البيانات. راجع قسم الجوانب الجوهرية لمزيد من المعلومات. |
لاسترداد بيانات <picture> سريعة الاستجابة في قالبك، يمكنك استخدام الدالة get_picture_data أو نقطة نهاية واجهة برمجة 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، وقيم منطقية لقناة ألفا وجوهرية، ومصفوفة لفئات الصورة 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 أو نقطة نهاية واجهة برمجة التطبيقات 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 أو نقطة نهاية واجهة برمجة 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
];يتم دعم تنسيقات ملفات الصور التالية:
| تنسيق الملف | نوع MIME | ملكيات |
|---|---|---|
| ج ب (ه) ز | صورة/JPEG | |
| webp | صورة/ويب | يتطلب إصدار وورد 5.8 أو أعلى. |
| png | صورة / بابوا نيو غينيا | عندما يحتوي ملف png على قناة ألفا ، ستتم إضافة فئة 'has-alpha' إضافية إلى عنصر صورة الصورة لمزيد من التصميم. |
| gif | صورة / جيف | عندما يتم تحريك الصورة المتحركة (سيتم التحقق من وجود إطارات رأسية متعددة)، لن يتم إجراء تغيير حجم الصورة أو اقتصاصها لمنع تجاهل الرسوم المتحركة. |
لن يتم تغيير حجم أي تنسيقات صور أخرى أو اقتصاصها.
يتوفر بناء الجملة التالي لكل حجم صورة في معلمة sizes :
breakpoint:width| المعلمة | يكتب | مطلوب | تقصير | تعريف |
|---|---|---|---|---|
| نقطة توقف | رقم أو سلسلة | نعم | إذا كان العرض غير محدد، وكان 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 عبارة عن تعريف عمود، فستكون نقطة التوقف هي نقطة التوقف المقابلة (على سبيل المثال، إذا كان 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 ). | |
| Crop_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، ستشاهد نموذج Attachment details . سيكون هذا هو العرض الأكثر دقة لتحديد نقطة الاتصال الخاصة بك: 
عند تعيين أو استبدال صورة مميزة في صفحة أو منشور، سترى نموذج Featured image . في طريقة العرض هذه، يمكنك تحديد نقطة التركيز الخاصة بك في الصورة المصغرة أعلى الشريط الجانبي الأيمن: 
عند تحميل صورة أو تحريرها في محرر WYSIWYG أو حقل التعريف في صفحة أو منشور، ستشاهد نموذج Edit image . في هذا العرض، يمكنك تحديد نقطة التركيز الخاصة بك في الصورة المصغرة في الجزء العلوي الأيسر: 
هناك ثلاث طرق يمكنك من خلالها تعيين النقطة المحورية للصورة باستخدام الواجهة:
باستخدام أحد هذه الخيارات، ستتم إضافة مفتاح تعريف النشر المسمى responsive_pics_focal_point أو تحديثه إلى المرفق بقيمة صفيف تحتوي على إحداثيات x وy كنسب مئوية:
[
' x ' => ' 86 ' ,
' y ' => ' 39 '
]لاستخدام هذه القيمة في مكان آخر في القالب الخاص بك، يمكنك استردادها عن طريق الاتصال:
$ focal_point = get_post_meta ( $ attachment_id , ' responsive_pics_focal_point ' , true );ResponsivePics ، ستضيف هذه المكتبة مهمة تغيير الحجم و/أو اقتصاص الصورة كمهمة إلى قائمة انتظار عملية الخلفية باستخدام Action Scholer.تحتوي مكتبة معالجة الخلفية Action جدولة على شاشة إدارة مدمجة للمراقبة وتصحيح الأخطاء وتشغيل مهام تغيير حجم الصورة المجدولة يدويًا. يمكن الوصول إلى واجهة الإدارة عبر:
Tools > Scheduled Actionsسيتم تجميع كل مهمة تغيير الحجم حسب معرف الصورة الخاص بها في WordPress
عند استخدام WP-Cron المدمج، ستقوم قائمة انتظار العمليات الخلفية بمعالجة أي مهام عند كل تحميل للصفحة فقط.
إذا قمت بتعطيل WP-Cron في الإعداد الخاص بك وكنت تستخدم مهمة cron الخاصة بك على الخادم الخاص بك، فسيستخدم Action المجدولة الفاصل الزمني المحدد في مهمة cron هذه لمعالجة الدفعة التالية من المهام.
define ( ' DISABLE_WP_CRON ' , true ); إذا كنت تستخدم Trellis مثلنا ❤️، فسيتم تعيين الفاصل الزمني الافتراضي للكرون على كل 15 دقيقة.
يمكنك تجاوز هذا إلى دقيقة واحدة على سبيل المثال من خلال تعيين المتغير 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 خطأ أو ترجعه.
أخطاء الصور المستجيبة - لم يتم تعريف نقطة التوقف 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
}
}تسمح لك الإجراءات التالية بالربط بالمخطط الزمني لعملية تغيير حجم الصورة. يمكنك وضعها في ملف jobs.php الخاص بموضوعك.
responsive_pics_request_scheduledيتم تشغيل هذا الإجراء عندما تقوم ResponsivePics بجدولة طلب جديد لتغيير حجم الصورة إلى قائمة انتظار ActionScheduler.
do_action ( ' responsive_pics_request_scheduled ' , ( int ) $ post_id , ( array ) $ resize_request ); $post_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) جودة الصورة المطلوبة
عرض $
(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
(كثافة العمليات) معرف المرفق
ملف $
(مصفوفة) الملف المحفوظ الذي يحتوي على:
[
' 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
(كثافة العمليات) معرف المرفق
ملف $
(مصفوفة) الملف الذي تم تحميله إلى 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
(كثافة العمليات) معرف المرفق
ملف $
(سلسلة) مسار ملف الصورة المحذوفة
responsive_pics_file_s3_deletedيتم تشغيل هذا الإجراء عندما يقوم WP Offload Media بحذف ملف صورة تم تغيير حجمه في وحدة تخزين S3 الخاصة بك.
do_action ( ' responsive_pics_file_s3_deleted ' , ( int ) $ post_id , ( array ) $ file_paths ); $post_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> .سيمكنك هذا من استخدام مكون إضافي للتحميل البطيء مثل Lazysizes.
يمكنك أيضًا تعيين فئة Lazyload الخاصة بك عن طريق تمريرها إلى مكتبة ResponsivePics في ملف jobs.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> مع صورة عنصر نائب منخفضة الجودة بعرض افتراضي يبلغ 100 بكسل.سيمكنك هذا من تصميم صورة العنصر النائب قبل تحميل الصورة الفعلية عالية الجودة.
يمكنك أيضًا تعيين فئة lqip الخاصة بك عن طريق تمريرها إلى مكتبة ResponsivePics في ملف jobs.php الخاص بموضوعك:
if ( class_exists ( ' ResponsivePics ' )) {
ResponsivePics:: setLqipClass ( ' blurred ' );
} عند تمكين الخيار intrinsic في وظيفة get_picture أو نقطة نهاية API /responsive-pics/v1/picture ، تقوم هذه المكتبة تلقائيًا بما يلي:
<picture> وفئة intrinsic__item إلى عنصر <img> في الصورة.data-aspectratio إلى عناصر الصورة <source> و <img> مع نسبة الصورة المصدر المحسوبة.سيمكنك هذا من شغل المساحة اللازمة للصورة مسبقًا عن طريق حساب الارتفاع من عرض الصورة أو العرض من الارتفاع باستخدام مكون إضافي جوهري مثل امتداد نسبة العرض إلى الارتفاع Lazysizes.
لاستخدام ملحق Lazysizes Aspectratio في قالب WordPress الخاص بك، قم أولاً بتثبيت Lazysizes كوحدة عقدة كما هو موضح في قسم Lazyloading وقم باستيراد الامتداد في ملف جافا سكريبت العام الخاص بموضوعك:
import 'lazysizes/plugins/aspectratio/ls.aspectratio.js' ; يرجى إرسال أي مشكلات تواجهها مع مكتبة ResponsivePics على Github.
تم تطوير وصيانة ResponsivePics بواسطة:
@monokai (المبدع)
@twansparant (منشئ)
حقوق الطبع والنشر للكود والوثائق 2017-2023 بواسطة Clarify.
تم إصدار الكود بموجب ترخيص MIT.
تم إصدار المستندات تحت المشاع الإبداعي.
