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

Как узнать полный путь к картинке в Битриксе

Файлы изображений нам обычно нужны, когда мы говорим за новости или товары. За такие поля, как правило, отвечают свойства элемента «Картинка для анонса» и «Детальная картинка«. Иногда, создают свойства инфоблока, тип этого свойства файл, и используют для дополнительных изображений (например, галерея товаров). Вся проблема в том, что Битрикс не даст вам сразу готовый путь к файлу изображения, или к его уменьшенной ресайз копии.

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

<?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).

Источник: http://forwww.com/how-to-get-path-to-image-in-1c-bitrix/

⤧  Next post Как создать шаблон для сайта на 1С-Битрикс ⤧  Previous post Как добавить и отобразить свойства у разделов в 1С-Битрикс