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

Кадрирование изображений в компонентах «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 версии, для вывода каталога.

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

[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

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

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

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

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

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

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *