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

Ресайз изображения в 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, что приводит к пропорциональному уменьшению изображения без удаления части картинки.

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

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

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

Форум

Приветствую всех. Ребята не соображаю ничего в битрексе. У меня на сайте есть баннер (на главной) _barin-pizza.ru. Объясните пожалуйста как изменить его размеры, — нужно, что бы баннер был больше сверху-вниз. Чем редактируется, в пхп страницы или где то настройки в панели управления??

Постоянный посетитель
Сообщений: 395 Баллов: 32 Регистрация: 21.05.2012
06.05.2014 08:26:42

Цитата
Александр Коваль пишет: Приветствую всех. Ребята не соображаю ничего в битрексе. У меня на сайте есть баннер (на главной) _barin-pizza.ru. Объясните пожалуйста как изменить его размеры, — нужно, что бы баннер был больше сверху-вниз. Чем редактируется, в пхп страницы или где то настройки в панели управления??

вам лучше обратиться к разработчику решения/сайта. Либо за помощью к специалисту.
Задача будет требовать правки шаблона компонента как минимум (для вашего слайдера надо поправить стили на нужные)

Заглянувший
Сообщений: 18 Регистрация: 30.12.2013
06.05.2014 15:45:17

Цитата
Александр Коваль пишет: Приветствую всех. Ребята не соображаю ничего в битрексе. У меня на сайте есть баннер (на главной) barin_pizza.ru. Объясните пожалуйста как изменить его размеры, — нужно, что бы баннер был больше сверху-вниз. Чем редактируется, в пхп страницы или где то настройки в панели управления??

Вам не нужно редактировать PHP!
Отредактируйте только стиль в CSS файл,
путь к нему /bitrix/templates/pb-left/components/bitrix/news.list/banners/style.css/
найдите строчку .banner-index
и сделайте как я написал

.banner-index < width:714px; height:166px; //Отвечает за высоту баннера position:relative; margin-bottom:15px; //Отвечает за отступ с низу от края margin-Top:-15px; // добавте если нужно поднять немного выше overflow:hidden; >

это готовое решение
Заглянувший
Сообщений: 5 Регистрация: 02.01.2014
06.05.2014 16:22:50

Иван Асавлюк, вот просто огромнейшее спасибо Вам!! Даже честно говоря не надеялся что кто то даст настолько развернутый ответ. Ушел править, еще раз спасибо Иван!

Заглянувший
Сообщений: 5 Регистрация: 02.01.2014
06.05.2014 16:49:40

Иван Асавлюк, изменил высоту как Вы рекомендовали, со 166px на 266px. Добавил новый элемент в слайдер с высотой картинки так же 266px. В результате картинка сжалась как на скрине (скрин прилагаю к сообщению) Подскажите к ак сделать что бы картинка соответствовала размерам баннера??

Заглянувший
Сообщений: 18 Регистрация: 30.12.2013
07.05.2014 08:50:17
Повторите, тоже самое и дайте мне знать когда,
Я гляну!
Думаю что помогу 8)
Заглянувший
Сообщений: 18 Регистрация: 30.12.2013
07.05.2014 11:29:27

Цитата
Александр Коваль пишет: Иван Асавлюк , изменил высоту как Вы рекомендовали, со 166px на 266px. Добавил новый элемент в слайдер с высотой картинки так же 266px. В результате картинка сжалась как на скрине (скрин прилагаю к сообщению) Подскажите к ак сделать что бы картинка соответствовала размерам баннера??

.banner-index .banners-block < width:714px; height:266px;// изменения по высоте overflow:hidden; position:relative; >.banner-index .banners-block .banners-list < /*width:10000px;*/ height:266px;// изменения по высоте position:absolute; white-space:nowrap; left:-714px; >.banner-index .banners-block .banners-list a< display:inline-block; float:left; width:714px; height:266px;// изменения по высоте padding:0px; margin:0px; position:relative; и добавте эту строчку в CSS .banner-index .banners-block .banners-list img Постоянный посетитель Сообщений: 395 Баллов: 32 Регистрация: 21.05.2012 07.05.2014 11:32:42

Цитата
Иван Асавлюк пишет: Повторите, тоже самое и дайте мне знать когда, Я гляну! Думаю что помогу

Заглянувший
Сообщений: 18 Регистрация: 30.12.2013
07.05.2014 12:08:49
Заглянувший
Сообщений: 2 Регистрация: 17.10.2019
17.10.2019 14:19:32

Добрый день! Вот такая проблема. Был на шаблоне сайта нижний банер с размерами 1300 на 150 (компактная и легкая какмера)
Хотел заменить фото на свою тему и по своей ссылки. В результате не могу поставить банер чтобы размер был как у шаблона.
Второй скрин то что получается.
Что мне делать ? Где искать проблему?

Прикрепленные файлы

• Screenshot.png (756.08 КБ)
• Screenshot 2.png (202.89 КБ)

Страницы: 1 2 След.

Центр поддержки

Продукты

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

Битрикс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-2023 «Битрикс», «1С-Битрикс». Работает на 1С-Битрикс: Управление сайтом. Политика конфиденциальности

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

Встала задачка: на собственном сайте, уменьшить размер превьюшек картинок у анонсов раздела дизайн. Само собой, перезаливать все картинки и лень и долго и глупо. Можно воспользоваться стандартной функцией битрикс 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 при масштабировании. Чем больше значение, тем выше качество и больше размер файла изображения.

Михаил Базаров 26.03.2016

Цитата
Александр написал: Здравствуйте Михаил! а есть у Вас решение сделать в bitrix увеличить фото по клику, как на официальном сайте bitrix http://www.1c-bitrix.ru/products/cms/index.php С уважением

Просто подключите любой плагин, типа fancybox, и сверстайте под ваш дизайн. Тут особо и делать нечего

Артур 04.08.2016

А подскажите как убрать ресайз картинок у товаров в корзине??
что только не пробовал..
в корзине путь к картинки идет — /upload/resize_cache/iblock/e72/110_110_1/e725ae01607c4b21b1 ­4ffec17cc92c26.jpg
в детальной карточке — /upload/iblock/e7b/e7bc22e91cd29476877ec0137f9adc0d.jpg — нет /resize_cache/

нужно сделать везде как в карточки.

Борис Лобода 22.04.2017

Михаил, подскажите, как поменять название папки в которую resizer картинки кладет, например /300_250_ или /400_300_. Проблема возникает с блокировщиками рекламы, в правилах фильтрации изображений у них присутствуют такого вида папки. Может какой-то другой выход есть?

almix 30.11.2017

Здравствуйте, Михаил, создание превью изображений этой функцией. Но получаемые превью оказываются с артефактами — белый цвет иногда заменяется соседним f4f4f4, из-за этого картинка становится неяркой.

$arFile = CFile::GetFileArray($arItem['PREVIEW_PICTURE']['ID']; $imgWidth = $imgHeight = 260; $arrImage = CFile::ResizeImageGet( $arFile, array("width" => $imgWidth, "height" => $imgHeight), BX_RESIZE_IMAGE_EXACT, true, array("name" => "sharpen", "precision" => 100),//array(),//$arFilter false, 100 );

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

Встала задачка, на собственном сайте, уменьшить размер превьюшек картинок у анонсов раздела дизайн. Само собой, пере заливать все картинки и лень и долго и глупо. Можно воспользоваться стандартной функцией битрикс 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 код к элементам компонентов новостей и каталога в Битрикс.
Нечётные новости выводились в.