Как изменить размер шаблона в битрикс

Изменить размер картинок в битрикс

Встала задачка, на собственном сайте, уменьшить размер превьюшек картинок у анонсов раздела дизайн. Само собой, пере заливать все картинки и лень и долго и глупо. Можно воспользоваться стандартной функцией битрикс CFile::ResizeImage и изменить размеры картинок на лету Для того, чтобы отресайзерить уже загруженные изображения, в нужном месте шаблона компонента вставляем

$renderImage = CFile::ResizeImageGet($arItem[«PREVIEW_PICTURE»], Array(«width» => НОВАЯ_ШИРИНА, «height» => НОВАЯ_ВЫСОТА), BX_RESIZE_IMAGE_EXACT, false);
echo »;
?>

Вот и все. В итоге новые, отресайзенные картинки попадут в папку /upload/resize_images и сами применяться в шаблоне

Автор: Михаил Базаров

Закладки:

• Заработок в интернете (2)
• Продвижение сайтов (5)
• 1С-Битрикс (53)
• Разное (11)
• css (2)

О разделе:

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

Вы также можете выслать мне свой рецепт, по разработке сайтов заполнив форму обратной связи, приложив файл со своей статьёй.

Поиск по сайту:

Создание сайта на 1C-Битрикс:

Продвижение сайта:

Свежие записи:

Микроразметка необходима сайту, чтобы упростить поисковикам распознавание информации, размещенной на нем. Shema.org помогает роботам наиболее точно обработать.

Иногда не достаточно картинки анонса, детальной и нужно загружать на сайт больше фотографий к примеру в карточку товара, как правило это делается через.

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

Для некоторых платёжных систем, таких как Яндекс Касса и прочих подобных, требуется наличие SSL сертификата. Ваш сайт должен без ошибок и предупрежден.

Часто возникает необходимость применять разные стили или html код к элементам компонентов новостей и каталога в Битрикс.
Нечётные новости выводились в.

Изменить размер картинок на лету в битрикс

Встала задачка: на собственном сайте, уменьшить размер превьюшек картинок у анонсов раздела дизайн. Само собой, перезаливать все картинки и лень и долго и глупо. Можно воспользоваться стандартной функцией битрикс CFile::ResizeImage и изменить размеры картинок на лету.

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

$renderImage = CFile::ResizeImageGet( $arItem["PREVIEW_PICTURE"], Array("width" => НОВАЯ_ШИРИНА, "height" => НОВАЯ_ВЫСОТА), BX_RESIZE_IMAGE_EXACT, false ); echo '';

Параметры масштабирования и обрезки можно установить такими переменными:

• BX_RESIZE_IMAGE_EXACT — масштабирует в прямоугольник $arSize c сохранением пропорций, обрезая лишнее (в примере выше именно оно);
• BX_RESIZE_IMAGE_PROPORTIONAL — масштабирует с сохранением пропорций, размер ограничивается $arSize;
• 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 Массив массивов для постобработки картинки с помощью фильтров: array(array(«name» => «sharpen», «precision» => 15)). Фильтров пока один — sharpen. Задавать его не обязательно — будет инициализирован автоматом. Используется для наведения резкости у миниатюр.
• Immediate Флаг передается в обработчик события OnBeforeResizeImage, по смыслу означает масштабирование непосредственно при вызове метода. Обработчик в принципе может выполнять отложенное масштабирование.
• jpgQuality Число, устанавливающее в процентах качество JPG при масштабировании. Чем больше значение, тем выше качество и больше размер файла изображения.

Ресайз изображения в 1С Битрикс

В 1С Битрикс существует метод изменения размера изображения CFile::ResizeImageGet() который может изменить размер изображения (с учётом пропорции или без него), его качество, обрезать изображения. Этот метод сохраняет уменьшенную копию изображения в папку /upload/resize_cache/ . При повторном вызове и актуальности кеша, метод сразу вернёт путь к ранее созданной картинке, что значительно экономит ресурс сервера. Метод принимает следующие параметры:

Параметр	Описание	Доступно с версии
file	Идентификатор файла из таблицы b_file или массив описания файла (Array(FILE_NAME, SUBDIR, WIDTH, HEIGHT, CONTENT_TYPE)), полученный методом GetFileArray()
Size	Массив в виде [‘width’=>100, ‘height’=>150] со значениями ширины и высоты для уменьшаемой картинки. Оба ключа обязательны.
resizeType	Тип масштабирования изображения:

• BX_RESIZE_IMAGE_EXACT — масштабирует в прямоугольник $arSize c сохранением пропорций, обрезая срезания части изображения;
• BX_RESIZE_IMAGE_PROPORTIONAL — масштабирует с сохранением пропорций, размер ограничивается $arSize , т.е. если какая-то часть изображения не попала в размеры $arSize , она будет удалена;
• BX_RESIZE_IMAGE_PROPORTIONAL_ALT — масштабирует с сохранением пропорций за ширину при этом принимается максимальное значение из высоты/ширины, размер ограничивается $arSize , улучшенная обработка вертикальных картинок.

Тут нас будут интересовать первые 2 метода.

Вызывается метод примерно вот так:

 $file = CFile::ResizeImageGet( $uInfo['PERSONAL_PHOTO'], ['width'=>150, 'height'=>150, BX_RESIZE_IMAGE_PROPORTIONAL, true ); $img = ''; 

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

 /** * Ресайз изображения с проверкой атрибутов * @param $photo id картинки или массив содержащий id * @param $wi ширина * @param $hi высота * @param $mode тип масштабирования при ресайзе (обрезать изображение или пропорционально уменьшать) * @return mixed */ function ResizeImage($photo, $wi, $hi, $mode = false) < if(is_array($photo)) $photo = $photo["ID"]; if($wi >0 && $hi > 0) < $arPhoto = CFile::ResizeImageGet($photo, Array("width" =>$wi, "height" => $hi), ($mode ? BX_RESIZE_IMAGE_EXACT : BX_RESIZE_IMAGE_PROPORTIONAL), true, false, false, 100); $src = $arPhoto["src"]; > else < $arPhoto = CFile::GetFileArray($photo); $src = $arPhoto["SRC"]; >return $src; > 

Добавить её нужно в файл init.php расположенный или в папке /bitrix/php_interface/ или в папке /local/php_interface/ если он есть и там и там, то у local будет приоритет.

Пользоваться ей в коде гораздо проще. Ей необходимо передать в коде ID изображения или массив описывающий его, например $arItem[‘PREVIEW_PICTURE’] это массив картинки для анонса, например в компоненте «Список новостей» bitrix:news , в этом случае функция сама найдёт идентификатор изображения по ключу ID. Далее передаётся размер. Параметр $mode влияет на то как изображение будет уменьшено. Не обязательный, по умолчанию false, что приводит к пропорциональному уменьшению изображения без удаления части картинки.

Применение функции

Пример вызова пользовательской функции ресайза:

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

Как изменить размеры картинок которые загружаюстя и урезаются?

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

Сообщений: 1782 Баллов: 257 Регистрация: 04.05.2007
02.05.2011 17:00:26

У каждого товара есть две картинки: детальная и для анонса. Размеры этих картинок задаются в настройках инфоблока, и для их изменения есть несколько вариантов:
1. настроить инфоблок на другой размер картинок (старые придется перезалить)
2. использовать готовое решение, например, resizer (найдите через поиск, я его не продаю). Это позволяет использовать несколько размеров картинок путем создания нужного из детальной.
3. написать свою перерезалку. Аналогично п. 2

ITConstruct . Разработка сайтов в Москве и Новосибирске. Внедрение корпоративных порталов. Техническая поддержка

Постоянный посетитель
Сообщений: 184 Баллов: 32 Регистрация: 21.07.2008
02.05.2011 17:14:43

не получается настроить инфоблок чтобы картинка в переменной: $arElement[«PREVIEW_IMG»] содержалась нужных мне размеров, только размеры на странице просмотра товара настраиваются.

Еше проблема в том, что туда где список товаров попадает картинка из «Подробно», а картинки из «Анонс» вообще нигде нет. И вот в этой переменной и хранится картинка из «Подробно» — $arElement[«PREVIEW_IMG»]

Первый вопрос тот же, как сделать чтобы в списке товаров выводились картинки с нужными мне размерами?

Второй вопрос как сделать чтобы в компоненте списка товаров в переменной $arElement[«PREVIEW_IMG»] находились данные от картинки Анонса а не картинки Детально?

Заранее благодарю за помощь.

Битрикс малый бизнес 10.0

Сообщений: 987 Баллов: 87 Регистрация: 05.03.2009
02.05.2011 17:15:02

Подробнее про пункты:
1. Рабочий стол -> Контент -> Информ. блоки -> Типы информ. блоков -> Ваш инфоблок
Смотрим «Поля», нужном ставим Уменьшать если большая и размеры

while ($arElement = $res->GetNext()) < $image = CFile::GetFileArray($arElement['PHOTO']); if (!empty($image)) < // Пропорциональное уменьшение аватарки $tmpImage = CFile::ResizeImageGet($image, array("width" =>150, "height" => 150), BX_RESIZE_IMAGE_PROPORTIONAL, false); $image['src'] = $tmpImage['src']; > else < // Картинка, если аватарки нет $image['src'] = '/noimage150.png'; >print ''; >

З.Ы. Если вам нужны именно квадратные изображения, используйте еще clip: rect(Y1, X1, Y2, X2)

Постоянный посетитель
Сообщений: 184 Баллов: 32 Регистрация: 21.07.2008
02.05.2011 17:20:28
Ведь если я изменю файл модуля то при обновлении системы все вернется назад. или другого выхода нет?
Сообщений: 987 Баллов: 87 Регистрация: 05.03.2009
02.05.2011 17:20:44

Цитата
Связь пишет: Второй вопрос как сделать чтобы в компоненте списка товаров в переменной $arElement[«PREVIEW_IMG»] находились данные от картинки Анонса а не картинки Детально?

В шаблоне компонента выведите $arElement (пример: print_r($arElement)
И посмотрите там картинку анонса.

Сообщений: 987 Баллов: 87 Регистрация: 05.03.2009
02.05.2011 17:22:05

Цитата
Связь пишет: Ведь если я изменю файл модуля то при обновлении системы все вернется назад. или другого выхода нет?

Вы не будуте изменять компонент или модуль, вы будете редактировать шаблон компонента — это другое.

В шаблоне компонента делайте любые модификации. Никакого вреда системе этим не нанесете.

Постоянный посетитель
Сообщений: 184 Баллов: 32 Регистрация: 21.07.2008
02.05.2011 17:29:43
спасибо, во всем разобрался.
Постоянный посетитель
Сообщений: 133 Баллов: 22 Регистрация: 28.08.2011
30.09.2011 09:47:04

Подскажите пожалуйста: битрикс уменьшил фото используя BX_RESIZE_IMAGE_EXACT.
Фото получились обрезанные и не пропорциональные.Как обрезать их заново используя BX_RESIZE_IMAGE_PROPORTIONAL ?

Заглянувший
Сообщений: 6 Регистрация: 24.11.2011
Краснов Кирилл
29.12.2011 17:43:35

Объясните, пожалуйста. В настройках инфоблока стоит урезать если больше 110×110. Пытаюсь вывести каталог товара с фильтром, а в PREVIEW_IMAGE картинка оригинального или детального размера. Хотя в анонсе на товар картинка корректна.

Страницы: 1

Продукты

Управление сайтом

Битрикс24

Интернет-магазин + CRM

Решения

Для интернет-магазинов

Каталог готовых решений

Внедрение

Выбрать партнера

Проверить партнера

Стать партнером

1С-Битрикс http://www.1c-bitrix.ru Общие вопросы info@1c-bitrix.ru Приобретение и лицензирование продуктов : sales@1c-bitrix.ru Маркетинг/мероприятия/PR marketing@1c-bitrix.ru Партнерская программа partners@1c-bitrix.ru Мы работаем с 10:00 до 19:00 по московскому времени. Офис в Москве 127287 Россия Московская область Москва 2-я Хуторская улица дом 38А строение 9 Офис в Калининграде +7 (4012) 51-05-64 Офис в Калининграде 236001 Россия Калининградская область Калининград Московский проспект 261 Офис в Киеве ukraine@1c-bitrix.ru Телефон в Киеве +3 (8044)221-55-33 Офис в Киеве 01033 Украина Калининградская область Киев улица Шота Руставели 39/41 офис 1507

© 2001-2024 «Битрикс», «1С-Битрикс». Работает на 1С-Битрикс: Управление сайтом. Политика конфиденциальности