Задача: изменить размер картинок загруженных в элементы инфоблока, для оптимизации их размера и подгонки под содержимое. Для этого можно воспользоваться стандартной функцией битрикс CFile::ResizeImage и изменить размеры картинок на лету.
Для того, чтобы изменить уже загруженные изображения в нужном месте шаблона компонента (новостей или каталога), вставляем:
<?$renderImage = CFile::ResizeImageGet(
$arItem['PREVIEW_PICTURE'],
Array(
'width' => НОВАЯ_ШИРИНА,
'height' => НОВАЯ_ВЫСОТА
),
BX_RESIZE_IMAGE_EXACT,
false
);?>
<img src="<?=$renderImage["src"]?>">
В качестве первого параметра передается массив описания файла или его ID (если массив еще не сформирован и у вас есть только ID). Не обязательно использовать именно в инфоблоках, в любом месте где можете получить ID картинки/файла через API - можно использовать CFile::ResizeImageGet Параметры масштабирования и обрезки можно установить c помощью:
- BX_RESIZE_IMAGE_EXACT - масштабирует в прямоугольник c сохранением пропорций, обрезая лишнее (в примере выше именно оно);
- BX_RESIZE_IMAGE_PROPORTIONAL - масштабирует с сохранением пропорций, размер ограничивается указанными width и height;
- BX_RESIZE_IMAGE_PROPORTIONAL_ALT - масштабирует с сохранением пропорций за ширину при этом принимается максимальное значение из высоты/ширины, размер ограничивается $arSize, улучшенная обработка вертикальных картинок.
В итоге отмасштабированные картинки сохранятся в директории /upload/resize_images/. При переносе сайта на новый хостинг эту директорию можно не копировать, при первом запросе картинки снова перемасштабируются.
Параметры метода CFile::ResizeImageGet:
array CFile::ResizeImageGet(
mixed file,
array arSize,
const resizeType = BX_RESIZE_IMAGE_PROPORTIONAL,
bool bInitSizes = false,
array arFilters = false,
bool bImmediate = false,
bool jpgQuality = false
);
- file Идентификатор файла из таблицы b_file или массив описания файла (Array(FILE_NAME, SUBDIR, WIDTH, HEIGHT, CONTENT_TYPE)), полученный методом GetFileArray.
- Size Массив в виде Array("width"=>WIDTH, "height"=>HEIGHT) со значениями ширины и высоты для уменьшаемой картинки. Оба ключа обязательны.
- resizeType Тип масштабирования:
- InitSizes Флаг возвращения в результирующем массив размеров измененной картинки. True - возвращает, false - нет
- Filters Массив массивов для постобработки картинки с помощью фильтров.
- Immediate Флаг передается в обработчик события OnBeforeResizeImage, по смыслу означает масштабирование непосредственно при вызове метода. Обработчик в принципе может выполнять отложенное масштабирование.
- jpgQuality Число, устанавливающее в процентах качество JPG при масштабировании. Чем больше значение, тем выше качество и больше размер файла изображения.
Наложение водяного знака на картинки
С помощью этого метода можно наложить водяной знак на измененные картинки. Заодно чуть ухудшим качество картинок уменьшив их вес. Пример:
$renderImage = CFile::ResizeImageGet(
$arItem['DETAIL_PICTURE'],
Array(
'width' => 400,
'height' => 400
),
BX_RESIZE_IMAGE_EXACT,
true,
array(
'name" => 'watermark',
'position" => "bottomright", // Положение снизу справа
'type" => 'image',
'size" => 'real',
'file" => $_SERVER['DOCUMENT_ROOT'] . '/upload/copy.png', // Путь водяному знаку
'fill" => "exact",
),
false,
false,
90 // Потеря визуально не заметна на jpeg-ах но ощутимо уменьшает вес
);