Дополнительные картинки в списке элементов каталога битрикс
Очень редко, но бывают ситуации, когда надо вывести дополнительные картинки в списке элементов инфоблока. Например в списке товаров торгового каталога интернет-магазина на битрикс. Данная заметка не относится к выводу картинок SKU предложений товара. Только к одиночным товарам. В качестве примера: Нам нужно вывести дополнительные картинки товара в которых отображаются доступные цвета. При этом при клике на превью, оно должно заменять собой большую картинку.
Создаем множественное свойство типа файл
Для начала создаем множественное свойство типа файл в инфоблоке нашего каталога. Дадим ему код TSVETS и выведем в нашем каталоге для списка товаров: 
И накидаем картинок для какого-нибудь товара: 
Добавляем в шаблон
Далее открываем на редактирование template.php шаблона catalog.section нашего каталога и добавляем следующий код:
Данный код позволяет нам обратиться к свойству типа файл TSVETS и отрезайзит детальную картинку до размера 300 пиксей в ширину если исходная картинка очень большая, что разгрузит нагрузку на трафик нашего списка товаров. Далее подключаем js скрипт который позволит заменять основную картинку превьюшками при клике
— данный код подставит ID конкретного товара, так как он уникален для каждого из них И собственно, выводим большую картинку и ссылки на отресайзенные превью картинок. Саму превью уменьшаем до 30 пикселей в ширину а ее большую копию, которой будет заменяться основная картинка до 300-сот.
В общем-то все. Данным методом можно выводить и дополнительные картинки в списке новостей Битрикс не забывая заменить arElement на arItem. Надеюсь написал не очень сумбурно, с вопросами прошу в комментарии.
Как загрузить несколько детальных картинок в битрикс
Нашли ошибку? Выделите мышкой и нажмите Ctrl+Enter
Дополнительная фотогалерея с уникальными изображениями
Чтобы вывести в галереях разные изображения, необходимо создать новое пользовательское свойство. Для этого перейдите в Контент → Инфоблоки → Типы инфоблоков и выберите нужный. Например, «Каталог товаров».
Откройте вкладку «Свойства» и пролистайте ее до конца. Под последней записью создайте новую. К примеру, «Фото для галереи». Поле кода заполните кодовым названием на латинице.
Внимание! В качестве типа свойства обязательно выберите «Файл» и поставьте галку «Множественное».
Сохраните изменения и вернитесь в карточку товара. Здесь на основной вкладке в группе настроек «Значения свойств» появится новая область загрузки изображений, которую вы только что создали. Добавьте в нее фотографии.
Сохраните изменения и откройте редактор параметров компонента. В списке «Свойство с “Фотогалереей”» выберите созданное вами свойство.
После сохранения настроек изображения в нижнем блоке будут отличаться от фото в верхней галерее.
Используя этот метод настройки галереи, вы можете убрать вывод дополнительных картинок в верхнем блоке. Для этого удалите все изображения из поля «Картинки» на вкладке «Подробно».
Если вы хотите, чтобы в фотогалерее дублировались изображения под основным фото товара, то в настройках компонента выберете уже существующий инфоблок — «Свойство с фотогалереей «Картинки»» и загрузите те же самые фотографии, что и под основным фото.
Дополнительные картинки в новостях Битрикс, почти фотогалерея.
Частенько стоит задача, по мимо стандартных «Картинка для анонса» и «Детальная картинка», добавить возможность загрузки изображений в новости Битрикс. Чтобы вывести дополнительные картинки в bitrix:news изначально такой возможности не заложено. Исправим это, а заодно и превратим шаблон «Новости и статьи» в что-то вроде фотогалереи с эффектом fancybox
ВАЖНО.
Эта заметка написана в далеком 2013-ом году. Она вполне работоспособна, но есть более свежая и актуальная версия. Лучше, воспользуйтесь ею.
Фотогалерея на базе компонента новостей, с fancybox.
По интернету ходит вполне подробная инструкция по добавлению и выводу дополнительных изображений в новостях- ею и воспользуемся :
Для вывода дополнительных изображений в элементах информационного блока (т.е. изображений кроме PREVIEW_PICTURE и DETAIL_PICTURE) необходимо создать дополнительное свойство типа ФАЙЛ с кодом MORE_PHOTO.
Нужно в шаблоне news.detail добавить в файл result_modifier.php следующий код:
Тем самым мы сможем обращаться к массиву фотографий также, как это происходит в шаблоне каталога: $arResult[«MORE_PHOTO»].
Далее копируем код из шаблона каталога для вывода изображений в шаблон новостей news.detail:
0):?> » width=»» height=»» alt=»» title=»» />
После этого подгруженные изображения будут отображаться при выводе новостей. Правда таким образом выводить изображения навтрятли кто станет, ведь они выводятся в реальном размере и могут сильно попортить дизайн сайта. Чтобы этого не происходило применяют следующую функцию.
CFile::ResizeImageGet
Вот что говорится в официальной документации: Функция уменьшает картинку и размещает уменьшенную копию в папку /upload/resize_cache/путь. Один раз уменьшив изображение получаем физический файл, который позволяет при последующих обращениях не проводить операции по уменьшению изображения. При следующем вызове функция вернет путь к уменьшенному файлу.
Таким образом нам достаточно немного подправить код:
И мы получаем список превьюшек с ссылками на оригиналы. В итоге при добавлении новости просто выбираем изображения при добавлении статьи или новости:
Прикручиваем красотулечку
Итак, мы вывели превьюшки в новость, сделали их ссылками на полное изображение. Давайте теперь прикрутим к этому fancybox
Скачиваем архивчик с плагином и закидываем в корень сайта (можно конечно в любую папку, например в папку с шаблоном)
Добавляем в news.detail:
" name="more_photo">
" name="more_photo" title=" 0 ? $arResult["DETAIL_PICTURE"]["DESCRIPTION"] : $arResult["NAME"])?>">
Как получить путь к изображению в 1C-Битрикс
Вы наверняка задавались вопросом “Что это за цифры и где мой путь к картинке?” �� Давайте разберем несколько примеров, как с этим можно работать.
Как узнать полный путь к картинке в Битриксе
Файлы изображений нам обычно нужны, когда мы говорим за новости или товары. За такие поля, как правило, отвечают свойства элемента “Картинка для анонса” и “Детальная картинка“. Иногда, создают свойства инфоблока, тип этого свойства файл, и используют для дополнительных изображений (например, галерея товаров). Вся проблема в том, что Битрикс не даст вам сразу готовый путь к файлу изображения, или к его уменьшенной ресайз копии.
Советую для начала прочесть небольшую статью про вывод элементов на странице т.к. в дальнейшем мы столкнемся с похожим кодом.
"ASC"), Array("IBLOCK_ID" => $iblock_id), false, false, Array('ID', 'NAME', 'DETAIL_PAGE_URL', 'PREVIEW_PICTURE', 'DETAIL_PICTURE') ); while($ar_fields = $my_elements->GetNext()) < echo $ar_fields['PREVIEW_PICTURE']."
"; > endif; ?>
Как видите, мы добавили ‘PREVIEW_PICTURE‘ и ‘DETAIL_PICTURE‘ в массив, который называют arSelect. На моей тестовой копии Битрикса, когда вывожу значения в поле ‘PREVIEW_PICTURE’ получаю
1 3 7
и на самом деле все отработало правильно, мы получили “код изображений”, некий уникальный идентификатор файла, по которому мы сможем получить данные.
В 1С-Битрикс есть класс CFile – который используется для работы с файлами и изображениями. Мы воспользуемся его методом GetPath и получим полный путь к изображению на примере картинки для анонса (для детальной все точно также):
"ASC"), Array("IBLOCK_ID" => $iblock_id), false, false, Array('ID', 'NAME', 'DETAIL_PAGE_URL', 'PREVIEW_PICTURE', 'DETAIL_PICTURE') ); while($ar_fields = $my_elements->GetNext()) < //echo $ar_fields['PREVIEW_PICTURE']."
"; $img_path = CFile::GetPath($ar_fields["PREVIEW_PICTURE"]); echo $img_path."
"; > endif; ?>
Теперь у меня выводит:
/upload/iblock/c2a/c2a29aad47791f81f6fa8fd038d83789.jpg /upload/iblock/35e/35e000d0e7c3a94b32fb086c627f87eb.jpg /upload/iblock/088/08847400f3c59cae1371cf97009228a9.jpg
Отлично, это то что нужно. Теперь мы при помощи HTML тега img сможем задать картинке путь. Меняем нашу строчку с echo
echo "
";
Как изменить размер изображений в Битриксе или выполнить ресайз
Перед тем как создать проект или новый инфоблок, всегда думайте “какого размера должны быть мои изображения“. Это очень важно, т.к. если вы не настроите в информационном блоке уменьшение картинки после загрузки, генерацию картинки анонса из детальной (если нужно) и прочие параметры, то размер вашей страницы может превышать несколько мегабайт (а в очень редких случаях даже больше 10 мб �� ).
На самом деле, когда вы строго задаете размеры изображению, используя CSS, картинка все равно грузится в полном размере, и такие вещи не прокатят:
//HTML //CSS .my-prev-image
Это не решит нашу проблему с размером исходного изображения на странице, и единственные допустимые правила, на мой взгляд, могут быть max-width и max-height.
Рассмотрим случай, когда у нас уже есть большие картинки и мы хотим получить их уменьшенные копии. Нам поможет метод CFile::ResizeImageGet. Его преимущество в том, что когда мы запускаем страницу, он создает картинки в папке /upload/resize_cache/путь – и если такая картинка уже есть, он автоматически вернет нам путь к ней. Кроме того, мы можем задавать любой размер, качество и даже вид масштабирования изображений.
Вот какие типы нам доступны (информация взята из официальной документации Битрикс):
- BX_RESIZE_IMAGE_EXACT – масштабирует в прямоугольник $arSize c сохранением пропорций, обрезая лишнее;
- BX_RESIZE_IMAGE_PROPORTIONAL – масштабирует с сохранением пропорций, размер ограничивается $arSize;
- BX_RESIZE_IMAGE_PROPORTIONAL_ALT – масштабирует с сохранением пропорций, размер ограничивается $arSize, улучшенная обработка вертикальных картинок.
Давайте попробуем уменьшить наши картинки используя ResizeImageGet:
"ASC"), Array("IBLOCK_ID" => $iblock_id), false, false, Array('ID', 'NAME', 'DETAIL_PAGE_URL', 'PREVIEW_PICTURE', 'DETAIL_PICTURE') ); while($ar_fields = $my_elements->GetNext()) < //echo $ar_fields['PREVIEW_PICTURE']."
"; //$img_path = CFile::GetPath($ar_fields["PREVIEW_PICTURE"]); $img_resize_path = CFile::ResizeImageGet( $ar_fields["PREVIEW_PICTURE"], array('width'=>'100', 'height'=>'150'), BX_RESIZE_IMAGE_PROPORTIONAL ); //echo "";print_r($img_resize_path);echo "
"; echo "![](".$img_resize_path[)
"; > endif; ?>
$img_resize_path[‘src’] – надеюсь вы заметили что этот метод возвращает нам массив, и нам нужен только src.
Разберем по порядку:
$ar_fields[“PREVIEW_PICTURE”] – поле для кода файла (для детальной меняем на $ar_fields[“DETAIL_PICTURE”]),
array(‘width’=>’100′, ‘height’=>’150′) – размеры итогового изображения (или вышеупомянутый arSize),
BX_RESIZE_IMAGE_PROPORTIONAL – тип масштабирования, про котором наши изображения не будут вылазить за указанные границы.
В официальной документации этого метода есть подробное описание, кроме того, там описываются остальные 4 параметра, которые мы тут не использовали (InitSizes, Filters, Immediate, jpgQuality).
автор: Dmitriy
З 2011 року займаюся веб-розробкою. Зараз я – PHP Full Stack Developer.
Обговорити ваш проект, а також дізнатися більше про мене ви можете на цьому сайті:
dev.forwww.com
Читайте також:
7 коментаря
Василий :
Скажите, а как вытащить полную картинку из страницы? Например есть сайт ГИБДД, где есть превьюшки фото и нужно вытащить из них полное фото
Dmitriy :
Вам нужно использовать вместо PREVIEW_PICTURE – DETAIL_PICTURE. Замените в коде выше
Deryvier :
Василий, убираете из URL – resize_cache и hash-сумму, и будет Вам радость!
Владимир :
Добрый день! Подскажите. CFile::GetPath делает столько запросов к БД, сколько элементов в инфоблоке. Есть функция CFile::GetList, тут можно сразу вытащить все картинки одним запросом. Как это сделать правильно?
Мне нужно получить картинки для анонса новостей
Dmitriy :
Здравствуйте, а покажите весь код
Сергей Садыков :
Не подскажете каким образом можно подставить свое изображение картинки? условно – есть папка на сервере /img, есть картинки названые по определенному полю “код” в карточке товара. как можно указать битриксу что при открытии товара с кодом 854 нужно подгружать картинку img/854.jpg
Dmitriy :
Добрый день, стандартно функция формирования “пути к картинке” берет именно ID файла а не элемента. Поэтому в вашем случае путь нужно будет формировать в таком виде:
1. сначала у вас идет цикл (как правило, foreach)
2. в цикле для ваших изображений вам нужно будет прописать атрибут src=”/img/ .jpg” – это если у вас код = ID элемента. если же это свойство, то src=”/img/ .jpg” , где CODE – символьный код свойства в котором хранится код изображения
Залишити відповідь Скасувати відповідь
Щоб відправити коментар вам необхідно авторизуватись.