розміри зображень

1. Стандартні розміри зображень WP
2. Як використовувати додаткові розміри зображень на сайті
3. У коді
4. Як додати власний розмір зображення
5. Етап 1. add_image_size ()
6. Етап 2. Додавання розміру в медіазагрузчік
7. Як оновити зображення при зміні їх розмірів або зміні теми
8. Як позбутися від зайвих розмірів зображень в WP
9. Миша Рудрастих

Наша взаимовыгодная связь https://banwar.org/

Припустимо, ви завантажили зображення на свій сайт. Де і як воно може використовуватися? Деякі з варіантів:

• безпосередньо в постах,
• в портфоліо,
• знову ж в постах або в портфоліо - у спливаючому вікні зі збільшеною версією зображення,
• в якості мініатюр на сторінках рубрик або тегів,
• в віджети, наприклад «Популярні записи», «Розпродаж» (якщо у вас інтернет-магазин наприклад) і т.д.,
• і в тому числі в адмінці можна зробити, щоб пости або рубрики відображалися з прев'юшки ;

Загалом існує безліч різних варіантів використання одного і того ж зображення на сайті. Погодьтеся, це недоцільно, якщо кожна картинка буде одного і того ж розміру.

Звичайно, з додатковими розмірами зображень теж краще не зловживати, адже, чим їх більше:

• тим більше файлів буде в складі вашого сайту (70 тисяч зображень, з яких оригіналів тільки 2 тисячі - це не круто),
• тим більше часу буде потрібно на завантаження кожного файлу (адже движку потрібно згенерувати всі ці розміри).

Стандартні розміри зображень WP

За замовчуванням WordPress вже підтримує кілька розмірів зображень. Ви можете побачити їх і відредагувати в адмінки на сторінці «Налаштування> Медіафайли».

Ви повинні дещо знати про ці три розміри: всі завантажені вами зображення будуть вписані в ті параметри висоти і ширини, які вказані в адмінки (скріншот вище), виняток - мініатюри - якщо в настройках стоїть галочка (знову дивимося скріншот), то мініатюри будуть строго зазначеного розміру.

Наприклад, ви завантажили на сайт фотографію 1024х765, у вас в підсумку вийдуть такі копії: великий - 1024х765, середній - 300х224, мініатюра - 150х150. Ну в загальному думаю механізм зрозумілий.

Також якщо вам не потрібні деякі (або всі) з цих розмірів і ви не хочете, щоб WP створював для кожного з них копію, то можете просто відключити їх, про те як - читайте тут .

Як використовувати додаткові розміри зображень на сайті

В адмінці

Ну тут все просто - все, що нам потрібно, це при вставці зображення в запис вибрати розмір, який хочемо вставити.

У коді

У WordPress є різні функції для роботи з зображеннями в коді. Для виведення зображень я наприклад найчастіше користуюся функціями get_the_post_thumbnail () , the_post_thumbnail () , wp_get_attachment_image_src () .

Більшість з них має параметр $ size, в якому ви можете задати назву розміру. До слова ось назви для стандартних:

Назва в адмінці Назва у функціях Мініатюри thumbnail Середній розмір medium Великий розмір large Оригінал full

Ось простий приклад:

the_post_thumbnail ( 'large');

Як додати власний розмір зображення

Процес додавання свого розміру складається з двох етапів - обов'язкового і необов'язкового.

Етап 1. add_image_size ()

Відкриваємо свій functions.php і вставляємо туди щось на кшталт:

add_image_size ( 'nazvanie-moego-razmera', 244, 244);

В принципі з цього прикладу вже зрозуміло, що означають перші три параметра функції, проте я рекомендую ознайомитися вам з документацією add_image_size () на моєму сайті.

Етап 2. Додавання розміру в медіазагрузчік

Як я вже говорив вище, цей крок необов'язковий. Однак в нових версіях WordPress робиться він дуже легко, тому рекомендую, про те як, я вже докладно писав тут .

Як оновити зображення при зміні їх розмірів або зміні теми

Можливо ви стикалися з такою ситуацією, що після зміни параметрів функції add_image_size () або ж і зовсім при зміні теми, у вас на сайті як і раніше відображалися зображення зі старими розмірами або ж їх оригінали.

Що робити в цій ситуації? Якщо на вашому сайті 2-3 картинки, ви можете їх просто перезавантажити. А якщо 2-3 тисячі? Чи не перезавантажувати ж все картинки по-новій.

Можу порекомендувати вам два класних плагіна, які використовував сам - Ajax Thumbnail Rebuild і Force Regenerate Thumbnail.

Як позбутися від зайвих розмірів зображень в WP

Ось ми і підійшли до ключової чолі, заради якої власне я і вирішив написати цей пост. Спочатку докладний опис завдання / проблеми

Отже, на сайті є 10 зареєстрованих типів постів , При цьому для кожного з них в шаблоні задіяно по 2-3 розміри. Неважко перемножити ці числа, щоб зрозуміти, що при завантаженні будь-фотки на сайт у нас створюється по 20-30 копій!

Пропоную вашій увазі невеликий код, який дозволяє вирішити цю проблему. Взагалі вся завдання даного коду зводиться до того, щоб не створювати розміри зображень там, де це не треба.

/ * * Цей фільтр буде запущений в процесі завантаження зображень на сайт * / add_filter ( 'intermediate_image_sizes', 'true_reduce_image_sizes'); function true_reduce_image_sizes ($ sizes) {/ * * $ sizes - масив з розмірами, наприклад Array ([0] => thumbnail [1] => medium [2] => large [3] => post-thumbnail) * отримуємо тип поста за допомогою get_post_type () * / $ type = get_post_type ($ _REQUEST [ 'post_id']); / * * Прокручуємо масив з розмірами через цикл, $ key - індекс масиву, $ value - назва розміру * / foreach ($ sizes as $ key => $ value) {/ * * задаємо умови для кожного з типів, якщо їх (типів записів) занадто багато, використовуйте switch * / if ($ type == 'page') {if ($ value == 'regionfeatured') {// відключаємо regionfeatured для сторінок unset ($ sizes [$ key]); }} Else if ($ type == 'region') {if (! In_array ($ value, array ( 'regionfeatured', 'misha335'))) {// для регіонів відключаємо все, крім regionfeatured і misha335 unset ($ sizes [$ key]); }} Else {if ($ value! = 'Thumbnail') {// відключаємо все, крім thumbnail unset ($ sizes [$ key]); }}} Return $ sizes; }

Миша Рудрастих

Вперше познайомився з WordPress в 2009 році. З 2014 року мене можна зустріти на WordCamp - офіційної конфе по WordPress, іноді там виступаю. Також в даний час веду курси по WordPress в Epic Skills .

Якщо вам потрібна допомога з вашим сайтом або може навіть розробка з нуля - пишіть мені .