Кадрирование изображений в компонентах «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)закачать новые
| Цитата |
|---|
| sevenssura пишет: а как только обратится к компоненту, который их использует |
Ну что? Решилась задача?
У меня вот загвоздка небольшая. все картинки хранятся в каталоге: /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 не находит(
В первой строке нужно подключить служебные классы Битрикса:
Ну или так, может не особо и правильно, но проще, по крайне мере мне.
| Цитата |
|---|
| Вячеслав Большагин написал: Как вариант, в шаблоне где картинки нужны новых размеров, сделать result_modifier.php и в нем отресайзить оригиналы CFile::ResizeImageGet этим, результаты кешируются |
http://dev.1c-bitrix.ru/learning/course/?COURSE_ID=43&LESSON_ID=2830 про result_modifier.php
| Цитата |
|---|
| Вячеслав Большагин написал: Как вариант, в шаблоне где картинки нужны новых размеров, сделать result_modifier.php и в нем отресайзить оригиналы CFile::ResizeImageGet этим, результаты кешируются |
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 версии, для вывода каталога.
Шаблон подготовлен, компоненты отлично вписались, давайте посмотрим, что у меня получилось и разберем как я настроил каталожные компоненты и включил их в купленный шаблон.
Начнем разбирать компоненты
Первый компонент который мы рассмотрим будет компонент выводящий список товара:
С помощью компонента, на главной странице сайта, мы выведем блоки с товарами, в две строки по « три » элемента:
Разместим его на странице, подключим наш каталог:
Прописываем конкретный раздел из которого будем выводить товары.
Задаем количество элементов в строке
Обратим внимание на первую опцию настройки которая нам нужна для осуществления задуманного:
Отлично, мы видим, что у нас отобразилось « три » колонки, давайте попробуем изменить значение на « пять » и посмотрим, что у нас получилось:
Количество элементов изменилось, теперь их « пять ».
Помним, что наши компоненты адаптивные соответственно они пытаются занять всю область в которую их поместили, и изменяют свои размеры в зависимости от разрешения устройства на котором отображается компонент.
Мне нравится когда количество элементов в строке « три ».
Какой он оптимальный каталог?
Компонент размещен, наступило время подумать о нашем каталоге, который мы будем выводить, я хочу сделать его красивым визуально, быстрым, вписывающимся в дизайн, что нужно сделать для этого.
Одна из тяжелых операций при выводе каталога это картинки, и желательно уделять им внимание, если вы загрузите картинку привьюшки списка в разрешение 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
Добавляем его на страничку и входим в настройку компонента:
Спасибо за потраченное время на статью, если у вас будут вопросы задавайте их в комментариях, я постараюсь на них ответить.