Битрикс. Вывод детального изображения в списке новостей

В 1С-Битрикс для вывода детальной картинки элемента в списке новостей можно использовать:

<img
    class="detail_img"
    src="<?= $arItem["DETAIL_PICTURE"]["SRC"] ?>"
/>

Где использовать этот код

Обычно код размещается:

• в шаблоне компонента news.list;
• в цикле foreach;
• в template.php.

Пример вывода в news.list

<?foreach ($arResult["ITEMS"] as $arItem):?>

    <div class="news-item">

        <img
            class="detail_img"
            src="<?= $arItem["DETAIL_PICTURE"]["SRC"] ?>"
            alt="<?= $arItem["NAME"] ?>"
        />

        <div class="news-title">
            <?= $arItem["NAME"] ?>
        </div>

    </div>

<?endforeach;?>

Что такое DETAIL_PICTURE

Поле:

DETAIL_PICTURE

содержит:

• детальное изображение элемента инфоблока.

Битрикс автоматически передает:

• SRC;
• WIDTH;
• HEIGHT;
• ALT;
• TITLE.

Важно включить поле в настройках компонента

По умолчанию детальная картинка может не передаваться в шаблон.

Поэтому в настройках компонента нужно отметить:

Настройки списка → Детальная картинка

Иначе:

$arItem["DETAIL_PICTURE"]

будет пустым.

Как вывести ALT изображения

Лучше сразу добавлять:

alt="<?= $arItem["NAME"] ?>"

Это полезно:

• для SEO;
• доступности;
• Google Images.

Проверка на наличие картинки

Чтобы избежать ошибок, желательно проверять, существует ли изображение:

<?if ($arItem["DETAIL_PICTURE"]):?>

    <img
        src="<?= $arItem["DETAIL_PICTURE"]["SRC"] ?>"
        alt="<?= $arItem["NAME"] ?>"
    />

<?endif;?>

Уменьшение изображения

Для оптимизации сайта лучше использовать:

CFile::ResizeImageGet()

Пример:

<?
$file = CFile::ResizeImageGet(
    $arItem["DETAIL_PICTURE"],
    array("width" => 400, "height" => 300),
    BX_RESIZE_IMAGE_PROPORTIONAL,
    true
);
?>

<img src="<?= $file["src"] ?>" />

Почему лучше ресайзить изображения

• быстрее загрузка сайта;
• меньше нагрузка;
• лучше PageSpeed;
• не загружаются огромные оригиналы.

Где еще используется DETAIL_PICTURE

• каталог товаров;
• новости;
• акции;
• портфолио;
• блог;
• проекты.

Итог

Для вывода детальной картинки в списке элементов Битрикс используется:

<?= $arItem["DETAIL_PICTURE"]["SRC"] ?>

И не забывайте включить поле «Детальная картинка» в настройках компонента.