использовать кадрирование битрикс что это

Кадрирование изображений в компонентах «1С-Битрикс».

Как известно, в элементах инфоблока 1C-Битрикс можно использовать изображения, которые будут выводиться в анонсе и подробном содержимом элементов. В настройках инфоблока можно настроить уменьшение загружаемых изображений до определенного размера по ширине и высоте. Правда, из-за соблюдения пропорций при уменьшении добиться указанного размера и по ширине, и по высоте средствами системы не представляется возможным. Это проиллюстрировано на рисунке ниже. Однако добиться желаемого размера можно попробовать другим способом – это будет сделано путем кадрирования изображений при помощи CSS, о чем я сейчас расскажу подробнее.

Сначала определимся с размерами, а также с компонентом, который будем использовать. Например, мне нужно чтобы картинки в анонсе были размером 150px × 150px, а компонент будет – bitrix:news.list.

Как обычно все действия я провожу на «демо-версии для разработчиков» редакции «Стандарт». В ней по адресу /content/news/ уже размещен комплексный компонент bitrix:news, с ним и будем работать. Предварительно не забудьте добавить изображения к элементам инфоблока «Новости магазина» (ID 3). Копируем шаблон компонента в папку шаблона сайта. При копировании я назвал шаблон “crop_preview”. Теперь открываем файл /bitrix/templates/books/components/bitrix/news/crop_preview/bitrix/news.list/.default/template.php и проводим изменения в нем. После этих изменений будет происходить кадрирование изображений в анонсах ленты новостей.

Находим в коде следующий фрагмент:

И заменяем его приведенным ниже кодом

Вот так и происходит кадрирование изображений в ленте новостей с использованием CSS. Однако, есть момент на который нужно обращать внимание при добавлении новостей – это размеры уменьшенных изображений. Они не должны быть меньше размеров блока, в котором будут размещаться.

Источник

Грузим картинку четко по размеру, а также кадрирование картинок

Довольно часто на сайте для поддержания приятного оформления требуются четкие размеры загруженного превью. К примеру, 200х150, и если отклониться на несколько пикселов, уже нарушается гармония. Конечно, спасает стандартный ресайзер, который можно включить в настройках инфоблока, но это не то (как правило, он ровняет по одной стороне, а другую делает меньше), и может получиться 200 на 130 к примеру. Да и иногда вроде картинка подходит, но вот бы кадрировать ее.

Грузим ее в превью (не забыв отключить стандартный ресайз в настройках инфоблока):

Картинку я загрузил намеренно огромную, чтобы проиллюстрировать работу модуля. Как видите, она загрузилась без ресайза, ресайз будем делать сами.

Выбираем «Обрезать» в меню картинки.

Выставляем нужные нам размеры (запоминаются для последующих изменений), и выделяем нужный фрагмент фотки:

И жмем «сохранить». Результат:

Конечно, не 150 получилось, но картинка то была огромна это та погрешность, которой можно пренебречь. И вот теперь можно публиковать новость на сайте.

Источник

Использование WebP изображений в 1С-Битрикс (на Битрикс: Веб окружение)

WebP это современный формат сжатия изображений, который позволяет, при правильных настройках и уровнях сжатий, уменьшить размер файлов изображений. Развивается при поддержке Google.

В этой заметке, расскажу как применить данный формат на сайте, под управлением Битрикс. Однако, способ подойдет для любого сайта, на любой системе управления и без нее.

Что такое WebP

Изображения WebP в среднем на 26 % меньше по сравнению с PNG, и на 25-34 % меньше по сравнению с JPEG. Формат появился в 2010 году и с тех пор разрабатывается Google. WebP основан на алгоритме сжатия ключевых кадров видео-кодека VP8. Новый формат также поддерживает прозрачность.

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

Формат изображений WebP позволит существенно уменьшить размер веб-страницы, но учитывая его ограниченную поддержку необходимо содержать копии всех изображений в нескольких форматах.

Поддержка WebP браузерами

WebP уже поддерживается в Chrome, Opera и прочих браузерах на основе движка Chromium (в скором будущем и Edge). Для остальных браузеров отдается оригинал изображения в jpeg/png формате. Либо, можно использовать библиотеку WebPJS.

Использование WebP на веб-сервере c работающим сайтом

Итак: имеем работающий магазин под управлением 1С-Битрикс, который работает на веб сервере под управлением centOS-7 (стандартное Битрикс веб окружение)

Наша задача, конвертировать, в WebP, имеющиеся изображения всех товаров и прочие изображения хранящиеся в директории (и ее поддиректориях) upload

Внимательно! В моем примере я указал путь до папки upload нужного сайта. В моем случае /home/bitrix/ext_www/bxstory.ru/ Вы должны указать свой

Далее проходим в терминал и делаем этот файл исполняемым

И запускаем его. Предварительно, на всякий случай, сделайте полную резервную копию сайта

Собственно, начнется процесс конвертации. Длительность зависит от количества изображений и глубины их вложенности. Ну и, производительность сервера тоже имеет место быть. Для примера: на сервере за 250 рублей, от simplecloud заняло около получаса. На сайте 15 000 товаров, у каждого по 3-4 картинки.

Конфигурация nginx для отдачи WebP

Для этого открываем файл виртуального хоста. В моем случае он находится по пути /etc/nginx/bx/site_available/bx_ext_ssl_bxstory.ru.conf

И сразу, после указания правила server_name_in_redirect off; дописываем

И перезапускаем nginx

Источник

пересоздать картинки анонса в каталоге

что то мне подсказывает что не с проста он тему создал. видимо надо.
1)удалить все картинки
2)закачать новые

Ну что? Решилась задача?

У меня вот загвоздка небольшая. все картинки хранятся в каталоге: /upload/iblock/
и если я удалю здесь все папки, то потеряю вообще все картинки.

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

Или есть в битриксе какая то фишка куда я напишу кусочек кода и он его выполнит?

Но сперва на одним элементе попробуй )

Но сперва на одним элементе попробуй )

Суть уловил, документацию почитал, вроде всё ясно стало.
Вот только что-то не понимаю как правильно через командную строку выполнить скрипт.
Жалуется что класса такого не знает:
Fatal error : Class ‘CIBlockSection’ not found in /home/u23318/ www.torgstyle-ekb.ru/www/bitrix/modules/main/admin/php_command_line.php(88) : eval()’d code on line 1

по этому мануалу пробовал http://dev.1c-bitrix.ru/learning/course/?COURSE_ID=43&LESSON_ID=3055
Всё работает а вот CIBlockSection не находит(

В первой строке нужно подключить служебные классы Битрикса:

Ну или так, может не особо и правильно, но проще, по крайне мере мне.

http://dev.1c-bitrix.ru/learning/course/?COURSE_ID=43&LESSON_ID=2830 про result_modifier.php

http://dev.1c-bitrix.ru/learning/course/?COURSE_ID=43&LESSON_ID=2830 про result_modifier.php

Спасибо за совет, попробовал в своем шаблоне изменить отредактировать файл result_modifier.php(/bitrix/templates/имя_шаблона/components/bitrix/catalog/kata ­ ­log/bitrix/catalog.section.list/.default/result_modifer.php), но что-то никакой реакции.. (ни ошибок, ни результата)

Редактировал следующие строки:
Было:

Выражаю благодарность за помощь со скриптом.
Все работает, картинки при тесте обновились.
Единственное НО.

У меня в каталоге 43000 товаров.
За 7 минут он обновил 36 директорий картинок из 4000 и похоже что остановился.
Через ftp уже не вижу изменений.
Колесико загрузки еще крутится, подождем до утра.
Ошибок никаких не вывел.

Нашел способ быстрее и проще.

Из админки выгрузить в ексель: внешний код с путем детальной картинки.
В настройках инфоблока у анонсовой картинки поставьте галку «Создавать картинку анонса из детальной даже если задана».
Сохраните таблицу в csv и загрузите её обратно (При импорте поставьте галку «Использовать настройки инфоблока для обработки изображений»)
В настройках инфоблока у анонсовой картинки уберите галку «Создавать картинку анонса из детальной даже если задана».

Источник

Использование и настройка каталожных компонентов 14 версии

Все о чем будет рассказано в статье работает на обновление инфоблоков 14.0.7

У вас есть собственный сайт, который был сделан на основе компонентов предыдущих редакций или на кастомизированных компонентах. Или вы купили шаблон и хотите в нем использовать каталожные компоненты от 14 версии. В этой статье мы рассмотрим как можно использовать каталожные компоненты 14 версии и на что обратить внимание при настройке.

Для экспериментов я взял готовый HTML шаблон, интегрировал его в шаблон сайта – как это сделать можно узнать на онлайн курсах которые вы можете пройти у нас: http://academy.1c-bitrix.ru

И попробую использовать каталожные компоненты 14 версии, для вывода каталога.

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

[spoiler]
Начнем разбирать компоненты

Первый компонент который мы рассмотрим будет компонент выводящий список товара:

С помощью компонента, на главной странице сайта, мы выведем блоки с товарами, в две строки по « три » элемента:

Разместим его на странице, подключим наш каталог:

Прописываем конкретный раздел из которого будем выводить товары.

Задаем количество элементов в строке

Обратим внимание на первую опцию настройки которая нам нужна для осуществления задуманного:

Отлично, мы видим, что у нас отобразилось « три » колонки, давайте попробуем изменить значение на « пять » и посмотрим, что у нас получилось:

Количество элементов изменилось, теперь их « пять ».

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

Мне нравится когда количество элементов в строке « три ».

Какой он оптимальный каталог?

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

Одна из тяжелых операций при выводе каталога это картинки, и желательно уделять им внимание, если вы загрузите картинку привьюшки списка в разрешение 1200 на 1200 пикселей, но будете выводить « пять » элементов в строке, то такой размер картинки сильно избыточен.

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

Для детальной картинки которая будет отображаться в компоненте bitrix:catalog.element

363 х 474 пикселей, но так как я знаю, что буду использовать лупу, я сделаю картинку в два раза больше.

Для компонента списка и « трех » элементов в строке у меня получилось:

243 х 317 пикселей

Эти цифры понимают масштабирование, то есть из 363 х 474 я без потери пропорций, смогу сделать 243 х 317 пикселей – это сделано в компонентах, и найдя размер картинки для списка, исходя из представленных данных, можно предположить сколько будет размер у детальной картинки.

С размерами я определился, у меня будут следующие наборы картинок:

« Детальная картинка » в размере 243 х 317 – которая будет отображаться компонентом списка

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

На видеоролике выше вы можете видеть такую анимацию картинок.

Как показываются картинки и в какой последовательности и куда их нужно загружать для оптимального отображения.

Для обычного товара:

Картинка для анонса
Детальная картинка
Дополнительные картинки – загруженные в файловое свойство

Картинка для анонса
Детальная картинка
Дополнительные картинки – загруженные в файловое свойство

Картинка для анонса – в SKU инфоблоке
Детальная картинка – в SKU инфоблоке
Дополнительная картинка – загруженная в файловое свойство SKU инфоблока

Показ первой картинки делается по списку сверху вниз, второй картинки далее по списку.

Соответственно если вам нужно как и мне показать одну картинку в списке и пять картинок в детальном представление, то можно загрузить первую картинку или в « Картинка для анонса » или в « Детальная картинка », а пять картинок в « Дополнительные картинки » – загруженные в файловое свойство

Давайте сразу посмотрим где в настройках bitrix:catalog.section выбираются какие картинки и откуда показывать:

Я выбрал свойство с типом « Файл » из основного инфоблока товаров и установил его в « Дополнительная картинка основного товара: »

Посмотрим как выглядят загруженные картинки в редактирование товара:

Картинка для списка, и дополнительный набор из пяти картинок, который я буду использовать в детальном представление товара:

Рассмотрим остальные параметры компонента на которые стоит обратить внимание, и которые появились в новой 14 версии:

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

Вы можете задавать, показывать или не показывать « Процент скидки » и « Старую цену товара »

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

Так выглядит в публичном разделе отображение скидки и старой цены товара.

Видим, что компонент поддерживает несколько цветовых схем, выбираем желтую:

Следующий компонент который мы разберем, это bitrix:catalog.element

Добавляем его на страничку и входим в настройку компонента:

Спасибо за потраченное время на статью, если у вас будут вопросы задавайте их в комментариях, я постараюсь на них ответить.

Источник