Категории: Wordpress - как сделать

Работаем с загружаемыми изображениями в WordPress

Если вы загружаете изображение с помощью Add Media (кнопка «Добавить Медиафайл») в редакторе публикаций, или непосредственно в библиотеке мультимедиа через Медиафайлы > Добавить (Media > Add New), WordPress автоматически создает несколько копий изображения во время процесса загрузки, и помещает эти копии на вашем сервере в папку wp-content/uploads/ (если в настройках указана сортировка медиа, то тогда система помещает их в папки по годам и/или месяцам). Эти копии отличаются друг от друга, и от исходного изображения названием и разрешением. Например, вы загружаете изображение, которое называется fotka01.jpg, тогда на выходе вы получите дополнительные, новые файлы: fotka01-100х100.jpg, fotka01-300х300.jpg, fotka01-250х250.jpg, fotka01-1024х1024.jpg и т.д.

Откуда они берутся и для чего нужны?

Они берутся из настроек, о которых ниже, а нужны для визуального сопровождения поста. Эти копии картинок называются Featured Images (Популярные или Избранные изображения).

Вот некоторые примеры использования Featured Images:

  • Популярные изображения могут появляться в виде миниатюрок со ссылкой на пост на главной странице блога;
  • Популярные изображения могут появляться над/под заголовком записи на странице конкретного поста;
  • Популярные изображения могут отображаются в виде миниатюрок со ссылкой на пост в различного рода слайдерах и виджетах.

Виды Featured Images

Это могут быть изображения следующих настроек:

  • Размер Миниатюры (Thumbnail)
  • Средний размер
  • Большой размер
  • Исходное изображение, если оно больше, чем Большой размер

Настройки этих размеров изображения устанавливаются в Консоли: Настройки > Медиафайлы и, по умолчанию, имеют следующие размеры:

  • Размер Миниатюры составляет: 150х150px (с функцией обрезки, которую рассмотрим ниже)
  • Средний Размер: Максимальная ширина 300px, Максимальная высота 300px
  • Большой размер: Максимальная ширина 1024px, Максимальная высота 1024px
Настройка размеров изображения

Понимание опции размера медиафайлов

WordPress использует два способа изменения размера изображений — метод «грубая обрезка«, и метод «мягкая обрезка» (или метод «изменение размера блока»). Для получения Среднего и Большого размера изображений используется метод «мягкой обрезки», который подразумевает, что изображение «растягивается» до наибольшей стороны (горизонтальной или вертикальной), а затем помещается внутрь «коробки», определенной настойками «Максимальная ширина» и «Максимальная высота».

Мягкая обрезка. Допустим, что вы загружаете изображение размерами 600х600px, и будет создано изображение Среднего размера (300х300px). В данном случае изображение не потеряет своих характеристик из-за соблюдения соотношения сторон 1:1. Однако, если исходное изображение будет 300px в ширину и высотой в 600px, а наибольшим размером в данном случае является высота, изображение сначала «растянется» по ширине до 600px, а затем обрежется до размеров 300х300px. Другими словами, исходное изображение искажается, пока не впишется в «коробку» 300х300px.

Метод «грубой обрезки» (или «жесткой обрезки») заключается в том, что WordPress обрезает изображение до жестко заданных размеров, и без дополнительных манипуляций.

Техническая сторона вопроса

Популярные изображения – это встроенная возможность в ВордПрессе. Для кастомной настройки такой возможности, эта функция должна быть подключена в вашей теме, через добавление кода в файле functions.php:

add_theme_support ('post-thumbnails');

 

После подключения этой функции мы сможем задействовать пользовательские (т.е. – свои) настройки размеров изображений, с помощью функции:

add_image_size ($name, $width, $height, $crop);

 

После того, как вы добавили эту функцию, новые размеры изображения будут создаваться дополнительно с изображениями по умолчанию в процессе загрузки медиа.

Настройки функции

  • $name: уникальное имя для размера изображения, например, «small-thumb», или «single-post-thumb» или что-то подобное
  • $width: ширина изображения в пикселях
  • $height: высота изображения в пикселях
  • $crop: метод обработки — true, чтобы задействовать «жесткую обрезку», или false – для «мягкой обрезки».

Например, чтобы задать новый размер изображения под названием «small-thumb», размером в 160х160px, и для обработки применить “грубую обрезку”, используйте следующий код в файле functions.php вашей темы:

add_image_size ('small-thumb', 160, 160, true);

 

И, конечно, ничто не мешает вам добавлять несколько размеров изображения, каждый из которых будет использоваться в различных частях сайта, например:

add_image_size ('slider-thumb', 180, 180, true);
add_image_size ('single-post-thumb', 275, 75, false);
add_image_size ('archive-thumb', 300, 150, true);
add_image_size ('special-thumb', 279, 133, true);

 

Как видно из приведенных выше примеров, есть дополнительная возможность более тонко настраивать картинки на вашем блоге (или другом типе сайта на ВордПрессе), чтобы добиться желаемого результата.

Как приказать WordPress не создавать копии Featured Images по умолчанию?

Если вы хотите использовать в теме свои настройки размеров изображений, а настройки по умолчанию вас не устраивают, — вы можете их отключить. Чтобы изображения с размерами по умолчанию не создавались в процессе загрузки, добавьте следующий код в файл functions.php вашей темы:

function sgr_filter_image_sizes( $sizes) {
  
 unset( $sizes['thumbnail']);
 unset( $sizes['medium']);
 unset( $sizes['large']);
 
 return $sizes;
}
add_filter('intermediate_image_sizes_advanced', 'sgr_filter_image_sizes');

 

Также можно добиться того, чтобы количество изображений не росло как грибы, зайдя в Консоль через: Настройки – Медиафайлы и установить значения размеров изображений как 0х0.

 

Share

Последние посты

Как купить автомобиль на аукционе?

Если вас интересует вопрос, можно ли купить автомобиль на аукционе, вот вам краткий ответ: да.… Читать далее

02/12/2023

Основные критерии при выборе и покупке телевизора

В данном обзоре мы собрали основные советы и критерии по приобретению телевизора, в одном месте,… Читать далее

30/11/2023

На что обратить внимание при выборе фонарика на батарейках

Фонарик на батарейках способен помочь в разных ситуациях, начиная от походов и заканчивая авариями. При… Читать далее

29/11/2023

Всесторонний обзор Apple Watch Series 9: в чем его отличия от других поколений

Последняя презентация американской компании продемонстрировала несколько разнообразных новинок. В частности, в середине сентября 2023 года… Читать далее

24/11/2023

Как утеплить ребенка на зиму с помощью меховых наушников

Голова и уши – это те части тела, которые больше всего нуждаются в тепле зимой.… Читать далее

23/11/2023

Как проходит осмотр у проктолога при различных заболеваниях и как к нему подготовиться?

Проктология специализируется на лечении различных заболеваний ануса и прямой кишки. Такие деликатные проблемы вызывают боли… Читать далее

23/11/2023