Как загрузить несколько детальных картинок в битрикс

Bitrix галерея с мультизагрузкой фотографий

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

Сделать раздел для загрузки фотографий и управления альбомами (только для админов).

Сделать возможность связи альбома со строительным объектом (такой тип инфоблока).

Вывести фотографии из альбома на странице одного объекта.

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

Начнем с добавления Фотогалереи

Создаем инфоблок для Фотогалерея объектов:

Контент — Инфоблоки — Типы инфоблоков — Контент — Фотогалерея объектов

Запоминаем его ID (у меня 16).

Добавляем раздел для управления галереей. Через меню управления сайтом:

— жмем готово

Откроется страница редактирования, на нее добавляем «Фотогалерея 2.0«:

Указываем наш инфоблок:

Откроется страница галереи:

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

В файле /_fotogalereya/index.php добавляем:

Теперь создаем новый альбом (ссылку видно на прошлом скриншоте):

и загружаем в него фотографии

Теперь, через «изменить альбом«, можно прописать каждой картинке имя / текст и задать обложку альбома (но в рамках текущей задачи это не нужно)

Пора добавить инфоблоку объекты возможность выбрать галерею

Переходим в Контент — Инфоблоки — Типы инфоблоков — Контент — Инфоблок «Объекты»

Вкладка «Свойства» и добавляем поле как «привязка к разделам» и в настройках устанавливаем нашу «Фотогалерея объектов«:

Устанавливаем нужному объекту связь: Контент — Контент — Объекты

Выводим картинки на нужной странице

— $id_iblock = 16; — это идентификатор инфоблока из первого пункта.

Несколько фотографий в детальном просмотре товара.

Делаешь как написано выше и называешь свойство MORE_PHOTO. Тогда в шаблоне по этому названию твои фотки будут внизу выводиться.

Тут другая тема — мне например понравилась идея с добавлением только большой фотографии (детального описания) и можно поставить галочку чтобы маленькая фотография (превью) генерировалась из большой.

Однако возник такой затык:

1. при изменении параметра уменьшения (например было «200px по ширине», а сделали «300 px по ширине») — все уже уменьшенные картинки не перегенирируются из больших — придется писать свою функцию.

2. С MORE_PHOTO мне по идее тоже нужны маленькие фотки, где их взять, как автоматически генерировать? Думаю придеться делать еще одно свойство MORE_PHOTO_SMALL (типа файл, множественное) и самому его заполнять еще одной самописной функцией.

В Битриксе есть недокументированная функция CFile::ResizeImageFile(). Я тоже как-то интересовался ресайзингом изображений. Вот что мне ответила техподдержка:

Разобрался, наконец, как добавить дополнительные картинки в карточку товара.

1. Открываем урок Как поменять картинки в товарах каталога: https://dev.1c-bitrix.ru/learning/course/index.php?COURSE_ID=42&LESSON_ID=13596&LESS.
2. Находим следующий текст: Групповое редактирование (не подходит для свойств товара, которые могут содержать несколько картинок, т.е. для свойств типа файл со множественным выбором); — наводим мышку на гиперссылку файл. Откроется инструкция как создать Свойство товаров типа "файл".
3. После того, как вы выполнили предыдущий шаг нажмите Изменить элемент на любом вашем товаре и посмотрите в самом низу вкладки Элемент — должно появиться новое поле Картинки галереи. Сюда, собственно, и надо будет подгружать дополнительные картинки.
4. Теперь откройте Параметры компонента Каталог и убедитесь в том, что в разделе Внешний вид в подразделе Дополнительная картинка основного товара: выбрано MORE_PHOTO.

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

Массовая загрузка, обработка и выгрузка изображений в Битрикс на Python3

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

Для каждого товара нужно было сделать:

Скачать каждую детальную фотографию

Ресайзнуть ее в необходимое разрешение и обработать в зависимости от статуса товара (разрешение фотографии для люкс-товара больше, чем для товара из категории «масс-маркет»)

Загрузить эту фотографию как дополнительную картинку

Ресайзнуть эту же фотографию в разрешение требуемое для трех типов превью-картинок товара и загрузить в поля превью-картинок

Выкачать для каждого товара дополнительные фотографии со старого сайта, и подогнать под разрешение основной фотографии (в рамках этого поста будем считать, что доступа к базе старого сайта нет)

Загрузить дополнительные фотографии в раздел дополнительных картинок

Так как мы общаемся в основном на языке питона, с Битриксом не знакомы, а написание и использование модулей на PHP это вообще для нас мрак, мы начали искать информацию как это сделать просто, желательно еще и на Python. Информации было мало, а точнее почти ноль, поэтому, для таких же любителей навалить жесткого пайтон-кода в таком случае, а не решать все вопросы встроенными инструментами и написана эта статья. Предпологается, что вы знаете как работать c Python и SQL, знаете библиотеки requests, bs4, sqlite3, если нет, то все равно информация будет полезной.

Шаг 1. Массово получаем ссылки на изображения с Битрикса

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

Первое, что нужно знать: для того, чтоб скачать изображение с помощью питона да и просто скачать нужно получить прямую ссылку на это изображение. Это можно сделать пропарсив карточку товара в Битриксе, а можно просто (как оказалось) скачать таблицу с соответствием ID товара и ссылкой на детальное изображение.

Для этого идем в Контент > Каталог > Каталог товаров > Элементы

Каталог товаров Битрикс

Видите шестеренку, выделенную на фото? Жмем на нее и настраиваем поля, которые будут отображены в таблице в зависимости от вашей задачи.

Настройка таблицы

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

Нажимаем кнопку «Применить» и получаем вот такой прекрасный вид на таблицу наших товаров

Теперь нам эту таблицу нужно скачать как обычную Excel таблицу. Для этого нажимаем вот эту кнопочку:

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

И если вы уже приготовились расчехлять свой модуль для работы с эксель-таблицами в питоне, то спешу вас обломать и открыть скачанный файл в текстовом редакторе:

Оказывается, это обычный html-документ, что не может нас конечно не радовать. Было бы неплохо привести полученные данные в плюс-минус удобный формат, то есть загрузить это в локальную базу данных. Прежде чем что-то загружать в таблицу, ее необходимо создать:

_{(хочу обратить внимание, что этот шаг не является обязательным, и если вам удобно хранить данные в json, txt, этой же таблице, пожалуйста).}

Что это за поля:

id — идентификатор товара в битриксе (логично)

article — его артикул

detail — ссылка на детальную фотографию, которую мы скачали

additional — через точку с запятой ссылки на дополнительные фотографии, которые будут получены при парсинге старого сайта

prev1 — имя файла обработанной картинки с для первой первью-картинки

prev2 — имя файла обработанной картинки с для второй первью-картинки

prev3 — имя файла обработанной картинки с для третьей первью-картинки

additional_handled — через точку с запятой имена файлов с обработанными дополнительными картинками

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

Теперь если мы откроем базу данных, мы увидим столь отрадную картину:

Шаг 2. Парсинг картинок со старого сайта Битрикс

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

В первую очередь импортируем библиотеку requests, добавим класс ошибки, которая вылетит в случае если товар по артикулу не найден, или таких два (да, бывают и такие случаи) )

Загоним в переменные нужную инфу:

headers — это заголовки GET-запроса, которые подпишут наши автоматические запросы как совсем не автоматические

Дальше соберем массив артикулов наших товаров

Пробегая по массиву артикулов:

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

Шаг 3. Обработка картинок

Подробного описания обработки картинок приводить не буду, не то получится либо краткий самоучитель по PIL, либо бесполезное описание кода под одну задачу. Обозначу только главный верстовой столб, который может быть вам полезен:

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

Пробегаетесь по базе данных -> получаете из нее URL-ки картинок -> скачиваете картинки -> обрабатываете их под свои задачи -> сохраняете с таким именем, которое сможете однозначно сопоставить с товаром и местом в карточке, куда эту картинку нужно загрузить -> profit.

Шаг 4. Загрузка обработанных картинок на сервер.

Все бы было клубнично-шоколадно в этой жизни, если бы загруженные через инструменты Битрикса картинки лежали бы на сервере с именами, которые были изначально прописаны у этих файлов. Но все не так просто).

Для начала фотографии нужно хоть в каком-то виде загрузить на сервер. Для этого идем Контент > Структура сайта > Медиабиблиотека > Изображения

И с помощью элемента множественная загрузка загружаем все наши фотографии.

Попробуем открыть одну из загруженных фотографий.

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

Шаг 5. Сопоставление имен файлов

На помощь нам в этом нелегком деле приходит возможность обращаться к базе данных Битрикса напрямую через встроенные инструменты. Для этого идем:
Настройки > Инструменты > SQL запрос и в поле запроса пишем

Что вернет нам такой запрос? Таблицу с полными данными о файлах в файловой системе Битрикса. Выглядит это так:

В настройке «На странице» выберите «Все», подождите пару минут пока у вас прогрузится страница с полной базой и сохраните эту страницу как html файл.

Вот этот код поможет вам выкачать данные из таблицы

originalname — имя файла в вашей старой файловой системе

filename — имя файла на сервере

subdir — имя субдиректории в которой этот файл на сервере лежит

Общий адрес файла выглядит так:
/uploads/$subdir/$filename

Поздравляю, вы получили адреса всех загруженных файлов

Шаг 6-ой и последний. Загрузка фотографий в карточки.

Для каждой карточки товара в Битриксе работает следующая модель: каждая картинка в этой карточке задается свойством в этой карточке. Если это объяснение не совсем понятно, сейчас по ходу разберемся.

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

Мало что понятно. Понимать это и не нужно, мы сами до конца не поняли. Теперь давайте по порядку:

В переменной $PRODUCT_ID лежит ID товара в Битриксе. Думаю это понятно

В переменной $tmpFilePath лежит адрес файла для первой превью-картинки.

Затем он закидывается в массив $arFile.

Аналогичные два блока снизу загружают файлы второй и третьей превью-картинок в свойства PICTURE_682_430 и PICTURE_682_962 соответственно

Затем для каждой дополнительной фотографии (а их может быть переменное количество) пишется такой код:

Затем один раз прописывается

Эта строчка присваивает свойству UF_ADDPHOTO значение $arFiles.

после этого очищаем массив $arFiles и закрываем блок кода.

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

Этот PHP код будет у вас занимать примерно 40000 строк. И для того чтобы его выполнить идем:

Настройки > Инструменты > Командная PHP-строка

И вставляем эту огромную кучу говнокода туда. Главное, не забудьте выключить подсветку кода, она очень сильно влияет на производительность, и с подсветкой код на 2000 элементов скорее всего (точно) уронит вам сайт 🙂

Небольшой ответ на возможную критику этого шага:

В процессе работы над проектом мы открыли более элегантный способ обновлять свойства товаров, загружая CSV таблицу через встроенные средства Битрикса. Однако, этот способ уже достаточно хорошо расписан в других источниках, к тому же занимает по ощущениям чуть больше времени чем вышеописанный 🙂

В заключение

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

Дополнительные картинки в новостях Битрикс, почти фотогалерея.

Частенько стоит задача, по мимо стандартных "Картинка для анонса" и "Детальная картинка", добавить возможность загрузки изображений в новости Битрикс. Чтобы вывести дополнительные картинки в bitrix:news изначально такой возможности не заложено. Исправим это, а заодно и превратим шаблон "Новости и статьи" в что-то вроде фотогалереи с эффектом fancybox

По интернету ходит вполне подробная инструкция по добавлению и выводу дополнительных изображений в новостях- ею и воспользуемся :

Для вывода дополнительных изображений в элементах информационного блока (т.е. изображений кроме PREVIEW_PICTURE и DETAIL_PICTURE) необходимо создать дополнительное свойство типа ФАЙЛ с кодом MORE_PHOTO.

Нужно в шаблоне news.detail добавить в файл result_modifier.php следующий код:

Тем самым мы сможем обращаться к массиву фотографий также, как это происходит в шаблоне каталога: $arResult["MORE_PHOTO"].

Далее копируем код из шаблона каталога для вывода изображений в шаблон новостей news.detail:

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

CFile::ResizeImageGet

Вот что говорится в официальной документации: Функция уменьшает картинку и размещает уменьшенную копию в папку /upload/resize_cache/путь. Один раз уменьшив изображение получаем физический файл, который позволяет при последующих обращениях не проводить операции по уменьшению изображения. При следующем вызове функция вернет путь к уменьшенному файлу.

Таким образом нам достаточно немного подправить код:

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

Прикручиваем красотулечку

Итак, мы вывели превьюшки в новость, сделали их ссылками на полное изображение. Давайте теперь прикрутим к этому fancybox

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

Добавляем в news.detail:

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