Вы наверняка задавались вопросом “Что это за цифры и где мой путь к картинке?” 🙂 Давайте разберем несколько примеров, как с этим можно работать.
Как узнать полный путь к картинке в Битриксе
Файлы изображений нам обычно нужны, когда мы говорим за новости или товары. За такие поля, как правило, отвечают свойства элемента “Картинка для анонса” и “Детальная картинка“. Иногда, создают свойства инфоблока, тип этого свойства файл, и используют для дополнительных изображений (например, галерея товаров). Вся проблема в том, что Битрикс не даст вам сразу готовый путь к файлу изображения, или к его уменьшенной ресайз копии.
Советую для начала прочесть небольшую статью про вывод элементов на странице т.к. в дальнейшем мы столкнемся с похожим кодом.
<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");?> <? if (CModule::IncludeModule("iblock")): $iblock_id = 1; $my_elements = CIBlockElement::GetList ( Array("ID" => "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']." <br>"; } endif; ?> <?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?>
Как видите, мы добавили ‘PREVIEW_PICTURE‘ и ‘DETAIL_PICTURE‘ в массив, который называют arSelect. На моей тестовой копии Битрикса, когда вывожу значения в поле ‘PREVIEW_PICTURE’ получаю
1 3 7
и на самом деле все отработало правильно, мы получили “код изображений”, некий уникальный идентификатор файла, по которому мы сможем получить данные.
В 1С-Битрикс есть класс CFile – который используется для работы с файлами и изображениями. Мы воспользуемся его методом GetPath и получим полный путь к изображению на примере картинки для анонса (для детальной все точно также):
<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");?> <? if (CModule::IncludeModule("iblock")): $iblock_id = 1; $my_elements = CIBlockElement::GetList ( Array("ID" => "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']." <br>"; $img_path = CFile::GetPath($ar_fields["PREVIEW_PICTURE"]); echo $img_path." <br>"; } endif; ?> <?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?>
Теперь у меня выводит:
/upload/iblock/c2a/c2a29aad47791f81f6fa8fd038d83789.jpg /upload/iblock/35e/35e000d0e7c3a94b32fb086c627f87eb.jpg /upload/iblock/088/08847400f3c59cae1371cf97009228a9.jpg
Отлично, это то что нужно. Теперь мы при помощи HTML тега img сможем задать картинке путь. Меняем нашу строчку с echo
echo "<img src='".$img_path."' alt=''><br>";
Как изменить размер изображений в Битриксе или выполнить ресайз
Перед тем как создать проект или новый инфоблок, всегда думайте “какого размера должны быть мои изображения“. Это очень важно, т.к. если вы не настроите в информационном блоке уменьшение картинки после загрузки, генерацию картинки анонса из детальной (если нужно) и прочие параметры, то размер вашей страницы может превышать несколько мегабайт (а в очень редких случаях даже больше 10 мб 🙂 ).
На самом деле, когда вы строго задаете размеры изображению, используя CSS, картинка все равно грузится в полном размере, и такие вещи не прокатят:
//HTML <img src=".." width="200" height="200"> <img src=".." style="width: 200px; height: 200px;"> //CSS .my-prev-image { width: 200px; height: 200px; }
Это не решит нашу проблему с размером исходного изображения на странице, и единственные допустимые правила, на мой взгляд, могут быть 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:
<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");?> <? if (CModule::IncludeModule("iblock")): $iblock_id = 1; $my_elements = CIBlockElement::GetList ( Array("ID" => "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']." <br>"; //$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 "<pre>";print_r($img_resize_path);echo "</pre>"; echo "<img src='".$img_resize_path['src']."' alt=''><br>"; } endif; ?> <?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?>
$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).
Скажите, а как вытащить полную картинку из страницы? Например есть сайт ГИБДД, где есть превьюшки фото и нужно вытащить из них полное фото
Вам нужно использовать вместо PREVIEW_PICTURE – DETAIL_PICTURE. Замените в коде выше
Василий, убираете из URL – resize_cache и hash-сумму, и будет Вам радость!
Добрый день! Подскажите. CFile::GetPath делает столько запросов к БД, сколько элементов в инфоблоке. Есть функция CFile::GetList, тут можно сразу вытащить все картинки одним запросом. Как это сделать правильно?
Мне нужно получить картинки для анонса новостей
Здравствуйте, а покажите весь код
Не подскажете каким образом можно подставить свое изображение картинки? условно – есть папка на сервере /img, есть картинки названые по определенному полю “код” в карточке товара. как можно указать битриксу что при открытии товара с кодом 854 нужно подгружать картинку img/854.jpg
Добрый день, стандартно функция формирования “пути к картинке” берет именно ID файла а не элемента. Поэтому в вашем случае путь нужно будет формировать в таком виде:
1. сначала у вас идет цикл (как правило, foreach)
2. в цикле для ваших изображений вам нужно будет прописать атрибут src=”/img/=$arItem['ID']?>.jpg” – это если у вас код = ID элемента. если же это свойство, то src=”/img/=$arItem['PROPERTIES']['CODE']['VALUE']?>.jpg” , где CODE – символьный код свойства в котором хранится код изображения