Better image sizes

Опис

Цей плагін призначений переважно для розробників. Щоб він працював, вам потрібно використовувати його функції у вашій темі або плагіні.

Цей плагін пропонує такі функції, як обрізка з розпізнаванням облич, вибір точки фокусування для кожного зображення, функцію виведення розмірів, що адаптуються до екрану, за допомогою тегу <picture> та багато іншого.

Чому варто використовувати цей плагін?

WordPress автоматично створює безліч зменшених зображень для кожного завантаженого зображення.
Зазвичай вам потрібні лише 1 або 2 з них, тому це марна трата місця на сервері та ресурсів.
Крім того, за замовчуванням обрізані зображення створюються з центру, що часто може становити проблему.

Цей плагін дозволяє:

• вимкнути автоматичне визначення розмірів зображень
• динамічно генерувати лише необхідні розміри зображень для тих зображень, які дійсно потрібні
• видалити розміри зображень, згенеровані цим плагіном, окремо або всі разом
• вказати іншу точку фокусування, яка буде у фокусі під час створення обрізаних версій зображення
• автоматично визначати точку фокусування за допомогою алгоритму розпізнавання обличчя
• вимкнути поріг розміру великих зображень, щоб зображення розміром понад 2560×2560 пікселів НЕ зменшувалися

Як це працює

1. якщо ви вимкнете існуючі автоматично згенеровані розміри зображень, то для новозавантажених зображень ці розміри не створюватимуться
2. у коді потрібно вказати, якого розміру має бути зображення
3. зображення створюється динамічно під час першого відвідування сторінки та зберігається у папці uploads
4. під час кожного наступного відвідування цієї сторінки буде завантажуватися лише вже згенероване зображення

Функції

bis_get_attachment_image_src( $attachment_id, $size, $crop )

Функція, створена на основі стандартної функції wp_get_attachment_image_src.
Якщо ви раніше використовували Fly Dynamic Image Resizer, вам не потрібно замінювати функції fly_get_attachment_image_src у своєму коді — передбачено резервний варіант, тож ви можете деактивувати Fly Dynamic Image Resizer, і функція все одно працюватиме.

Параметри:

• attachment_id (ціле число) (обов’язкове)
  Ідентифікатор вкладеного зображення
  Приклад: 123 або get_post_thumbnail_id() або get_field(“my_image”)

• size (масив) (обов’язкове)
  Масив із значеннями ширини та висоти
  Приклад: [ 1920, 1080 ]

• обрізання (логічне/ціле число/масив/рядок)(необов’язково)
  Пропустіть це або передайте false або 0, якщо ви не хочете обрізати, а просто змінити масштаб,
  інакше передайте true або 1, щоб використовувати обрізання фокальної точки, вибране в адміністративному медіа (за замовчуванням по центру),
  або передайте масив з рядковими параметрами осі x та осі y, такими як [ 'right', 'bottom' ]
  або передайте масив з числовими параметрами осі x та осі y, такими як [ 0.5, 0.8 ]
  або передайте рядок 'face' для автоматичного визначення положення обличчя (може бути вичерпним для ресурсів сервера)

Повернення:

array(
    'src' => (string) url of the image,
    'width' => (integer) width in pixels,
    'height' => (integer) height in pixels
)

bis_get_attachment_image( $attachment_id, $size, $crop, $attr )

Функція, створена на основі стандартної функції wp_get_attachment_image.
Якщо ви раніше використовували Fly Dynamic Image Resizer, вам не потрібно замінювати функції fly_get_attachment_image у своєму коді — передбачено резервний варіант, тож ви можете деактивувати Fly Dynamic Image Resizer, і функція все одно працюватиме.

Параметри:

• attachment_id (ціле число) (обов’язкове)
  Ідентифікатор вкладеного зображення
  Приклад: 123 або get_post_thumbnail_id() або get_field(“my_image”)

• size (масив) (обов’язкове)
  Масив із значеннями ширини та висоти
  Приклад: [ 1920, 1080 ]

• обрізання (логічне/ціле число/масив/рядок)(необов’язково)
  Пропустіть це або передайте false або 0, якщо ви не хочете обрізати, а просто змінити масштаб,
  інакше передайте true або 1, щоб використовувати обрізання фокальної точки, вибране в адміністративному медіа (за замовчуванням по центру),
  або передайте масив з рядковими параметрами осі x та осі y, такими як [ 'right', 'bottom' ]
  або передайте масив з числовими параметрами осі x та осі y, такими як [ 0.5, 0.8 ]
  або передайте рядок 'face' для автоматичного визначення положення обличчя (може бути вичерпним для ресурсів сервера)

• attr (масив) (необов’язковий)
  Масив атрибутів
  Спеціальний атрибут retina дозволяє автоматично генерувати srcset для @2x пристроїв з екраном Retina
  Приклад: array( “retina” => true, “alt” => “Custom alt text”, “class” => “my-class”, “id” => “my-id” )

Повернення:

<img src="https://web.com/wp-content/uploads/bis-images/1234/your-image-500x500-f50_50.jpg" width="500" height="500" alt="Alt text">

bis_get_attachment_picture( $attachment_id, $sizes, $attr )

Параметри:

• attachment_id (ціле число) (обов’язкове)
  Ідентифікатор вкладеного зображення
  Приклад: 123 або get_post_thumbnail_id() або get_field(“my_image”)

• sizes (масив) (обов’язкове)
  Масив, що містить пари ключ => значення
  де ключ означає точку розриву
  а значення — це масив, що містить ширину, висоту, обрізку та alternative_attachment_id
  Приклад: [ 767 => [ 767, 400, 1, 987 ], 9999 => [ 1200, 500, 1 ] ]
  Це згенерує <source media="(max-width:767px)" srcset="image987_767x400.jpg">
  та <source media="(max-width:9999px)" srcset="image_1200x500.jpg">
  та <source media="(min-width:10000px)" srcset="image.jpg">
  Якщо ви також вкажете ключ 0, то він замінить <img>.

• attr (масив) (необов’язковий)
  Масив атрибутів
  Спеціальний атрибут retina дозволяє автоматично генерувати srcset для @2x пристроїв з екраном Retina
  Приклад: array( “retina” => true, “alt” => “Custom alt text”, “class” => “my-class”, “id” => “my-id” )

Приклад:
Щоб створити ідеальне зображення «героя» повної ширини, яке буде чудово виглядати як на 4K-пристроях, так і на невеликих телефонах, але завантажуватиметься лише у необхідному розмірі, можна скористатися таким кодом:

echo bis_get_attachment_picture(
    get_post_thumbnail_id(),
    [
        375 => [ 375, 500, 1, 987 ],
        575 => [ 575, 500, 1, 987 ],
        767 => [ 767, 500, 1, 987 ],
        991 => [ 991, 500, 1 ],
        1199 => [ 1199, 500, 1 ],
        1399 => [ 1399, 500, 1 ],
        1600 => [ 1600, 500, 1 ],
        1920 => [ 1920, 500, 1 ],
        2560 => [ 2560, 500, 1 ],
        3440 => [ 3440, 500, 1 ],
        3840 => [ 3840, 500, 1 ],
    ]
);

Повернення:

<picture>
    <source media="(max-width:375px)" srcset="https://web.com/wp-content/uploads/bis-images/987/your-image-375x500-f50_50.jpg">
    <source media="(max-width:575px)" srcset="https://web.com/wp-content/uploads/bis-images/987/your-image-575x500-f50_50.jpg">
    <source media="(max-width:767px)" srcset="https://web.com/wp-content/uploads/bis-images/987/your-image-767x500-f50_50.jpg">
    <source media="(max-width:991px)" srcset="https://web.com/wp-content/uploads/bis-images/123/your-image-991x500-f50_50.jpg">
    <source media="(max-width:1199px)" srcset="https://web.com/wp-content/uploads/bis-images/123/your-image-1199x500-f50_50.jpg">
    <source media="(max-width:1399px)" srcset="https://web.com/wp-content/uploads/bis-images/123/your-image-1399x500-f50_50.jpg">
    <source media="(max-width:1600px)" srcset="https://web.com/wp-content/uploads/bis-images/123/your-image-1600x500-f50_50.jpg">
    <source media="(max-width:1920px)" srcset="https://web.com/wp-content/uploads/bis-images/123/your-image-1920x500-f50_50.jpg">
    <source media="(max-width:2560px)" srcset="https://web.com/wp-content/uploads/bis-images/123/your-image-2560x500-f50_50.jpg">
    <source media="(max-width:3440px)" srcset="https://web.com/wp-content/uploads/bis-images/123/your-image-3440x500-f50_50.jpg">
    <source media="(max-width:3840px)" srcset="https://web.com/wp-content/uploads/bis-images/123/your-image-3840x500-f50_50.jpg">
    <source media="(min-width:3841px)" srcset="https://web.com/wp-content/uploads/2022/11/your-image.jpg">
    <img width="4000" height="2000" src="https://web.com/wp-content/uploads/2022/11/your-image.jpg" alt="Some alt" loading="lazy">
</picture>

Для функції fly_add_image_size не передбачено альтернативного варіанту

Якщо ви раніше використовували Fly Dynamic Image Resizer, вам потрібно видалити з коду функції fly_add_image_size.
За потреби ви можете створити власні змінні для розмірів, наприклад:

define( 'MY_CUSTOM_SIZE', [ 1000, 200 ] );

а потім просто використовуйте його всередині функцій, наприклад:

echo bis_get_attachment_image( get_post_thumbnail_id(), MY_CUSTOM_SIZE );

Підтримка інших форматів, окрім JPG, PNG та WEBP

Цей плагін за замовчуванням працює лише з файлами форматів JPG, PNG та WEBP,
але ви можете легко дозволити будь-які інші типи MIME,
для цього просто вставте цей код, наприклад, у файл wp-config.php або у файл functions.php

define( 'BIS_ALLOWED_MIME_TYPES', array( 'image/jpeg', 'image/png', 'any_other/mime_type' ) );

Отримати точку фокусування вибраного зображення

Дані про фокусні точки зберігаються в метаданих публікації-додатку.
Також є спеціальна функція очищення даних, якою ви можете скористатися.

$focal_point = sanitize_focal_point( get_post_meta( get_post_thumbnail_id(), 'focal_point', true ) );

Повернення:

array( 0.5, 0.8 )

що означає, що фокусна точка знаходиться на відстані 50% від лівого краю та 80% від верхнього краю