responsive pics
Version 1.8.3
ResponsivePics — это плагин WordPress, который позволяет авторам тем WordPress автоматически изменять размер изображений * в адаптивных макетах.
*ReponsivePics не обрабатывает изображения в редакторе Wysiwig WordPress. Это полезно только для авторов тем, которые используют изображения или фотографии в своих темах. Он автоматически обрабатывает изображения Retina или 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 .
Чтобы включить поддержку элемента изображения и связанных с ним функций в браузерах, которые еще не поддерживают их, вы можете использовать полифилл. Мы рекомендуем использовать Picturefill.
Чтобы установить Picturefill в вашу тему WordPress в качестве модуля узла, выполните следующую команду из каталога вашей темы:
npm install --save picturefill
yarn add picturefill
И импортируйте пакет в глобальный файл javascript вашей темы: 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 | Продолжительность кэша (max-age) в секундах заголовка WP Rest API Cache-Control. |
По умолчанию ResponsivePics будет использовать переменные SCSS Bootstrap 4 для определения:
Количество столбцов сетки : $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 или конечную точку API 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' ). |
| ленивая загрузка | логическое значение/строка | необязательный | false | Если true включается классы lazyload и атрибуты data-srcset. Когда native включает встроенный атрибут loading="lazy" . Дополнительную информацию см. в разделе «Отложенная загрузка». |
| lqip | логическое значение | необязательный | 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 или конечную точку API 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' ). |
| ленивая загрузка | логическое значение/строка | необязательный | false | Если true включается классы lazyload и атрибуты data-srcset. Когда native включает встроенный атрибут loading="lazy" . Дополнительную информацию см. в разделе «Отложенная загрузка». |
| внутренний | логическое значение | необязательный | false | Когда true включается intrinsic классы и атрибуты data-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, логические значения для альфа-канала и встроенных функций, массив для классов CSS изображений и массив для классов CSS img.
[
' 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
];Поддерживаются следующие форматы файлов изображений:
| Формат файла | MIME-тип | Характеристики |
|---|---|---|
| jp(e)g | изображение/JPEG | |
| веб-сайт | изображение/веб-страница | Требуется Wordpress версии 5.8 или выше. |
| png | изображение/png | Если png содержит альфа-канал , к элементу изображения изображения будет добавлен дополнительный класс 'has-alpha' для дополнительного стиля. |
| гифка | изображение/гиф | Когда 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 ). Дополнительную информацию смотрите в разделе «Обрезка». |
| обрезка_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 Scheduler имеет встроенный экран администрирования для мониторинга, отладки и ручного запуска запланированных заданий по изменению размера изображения. Доступ к административному интерфейсу осуществляется через:
Tools > Scheduled ActionsКаждое задание по изменению размера будет сгруппировано по идентификатору изображения WordPress.
Когда вы используете встроенный WP-Cron, очередь фоновых процессов будет обрабатывать только любые задачи при каждой загрузке страницы.
Если вы отключили WP-Cron в своих настройках и используете собственное задание cron на своем сервере, планировщик действий будет использовать интервал, установленный в этом задании 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 отобразит или вернет ошибку.
Ошибки адаптивных изображений - точка останова 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
(целое число) Идентификатор вложения
$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) Запрошенная ширина изображения
$высота
(int) Запрошенная высота изображения
$crop
(массив) Запрошенные позиции обрезки изображения в процентах:
[
' x ' => ( int ) The horizontal crop position as percentage,
' y ' => ( int ) The vertical crop position as percentage
] соотношение $
(float) Запрошенное соотношение изображения
$resize_path
(строка) Запрошенный путь к файлу изображения.
responsive_pics_file_saved_localЭто действие срабатывает, когда ResponsivePics успешно сохранил файл изображения с измененным размером локально.
do_action ( ' responsive_pics_file_saved_local ' , ( int ) $ post_id , ( array ) $ file ); $post_id
(int) Идентификатор вложения
$файл
(массив) Сохраненный файл, содержащий:
[
' 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) Идентификатор вложения
$файл
(массив) Загруженный файл 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) Идентификатор вложения
$файл
(строка) Путь к удаленному файлу изображения.
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) Идентификатор вложения
$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.
Вы также можете установить свой собственный класс отложенной загрузки, передав его в библиотеку ResponsivePics в файле function.php вашей темы:
if ( class_exists ( ' ResponsivePics ' )) {
ResponsivePics:: setLazyLoadClass ( ' lazy ' );
}Чтобы установить Lazysizes в вашу тему WordPress в качестве модуля узла, выполните следующую команду из каталога вашей темы:
npm install --save lazysizes
yarn add lazysizes
И импортируйте пакет в глобальный файл javascript вашей темы:
import 'lazysizes' ; При включении lazyload со строковым native эта библиотека автоматически:
loading="lazy" к элементу <img> . При включении опции lqip в функции get_image или конечной точке API /responsive-pics/v1/image эта библиотека автоматически:
blur-up к элементу <img> .src к элементу <img> с изображением-заполнителем низкого качества с шириной по умолчанию 100 пикселей.Это позволит вам стилизовать изображение-заполнитель до загрузки фактического изображения высокого качества.
Вы также можете установить свой собственный класс lqip , передав его в библиотеку ResponsivePics в файле function.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 в вашей теме WordPress, сначала установите lazysizes как модуль узла, как описано в разделе «Отложенная загрузка», и импортируйте расширение в глобальный файл javascript вашей темы:
import 'lazysizes/plugins/aspectratio/ls.aspectratio.js' ; Пожалуйста, сообщайте о любых проблемах, с которыми вы столкнулись при работе с библиотекой ResponsivePics , на Github.
ResponsivePics разрабатывается и поддерживается:
@monokai (создатель)
@twansparant (создатель)
Авторские права на код и документацию принадлежат Clarify, 2017–2023 гг.
Код выпущен по лицензии MIT.
Документы выпущены на условиях Creative Commons.
