Ниже рассматривается кейс о выводе галереи (в терминологии битрикса, конечно, множественного свойства типа «файл») на детальной странице элемента инфоблока. В рамках данного примера рассматривается вывод данного свойства через bitrix:news.detail. Несмотря на то, что ранее, в предыдущих статьях, уже рассматривалось, в рамках данного статьи рассматривается комплексное решение вывода галереи от «А» до «Я».
Шаг 1. Добавление комплексного компонента
Скорее всего, первый шаг не требует детального описания, так как на данном этапе на страницу раздела добавляется и настраивается комплексный компонент новостей.
Предполагается, что инфоблок, свойства элементов которого планируется использовать в качестве галереи, уже создан и наполнен. Для справки, свойство элемента инфоблока для псевдо-галереи выглядит примерно следующим образом:
Шаг 2. Кастомизация детального шаблона компонента
Настроив комплексный компонент, можно приступить к кастомизации шаблона детальной страницы. Для этого можно: На детальной странице элемента, в публичной части, включить режим правки, выбрать подпункт «»редактировать шаблон компонента» в пункте «новость детально». Либо, что более приемлемо, отредактировать данный шаблон через админку, либо фтп.
Код шаблона компонента детальной страницы, с выводом элементов плиткой и подключением js-библиотеки fancybox (если она не подключена глобально), выглядит следующим образом:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css">
<div class="container">
<?if($arParams["DISPLAY_NAME"]!="N" && $arResult["NAME"]):?>
<h1><?=$arResult["NAME"]?></h1>
<?endif;?>
<div class="gallery" style="background-color: #fff;">
<?foreach($arResult["PROPERTIES"]["MORE_PHOTO"]["VALUE"] as $val):?>
<? $src = CFile::GetPath($val);
$filename = CFile::GetFileArray($val);
$photoalt = substr($filename['FILE_NAME'], 0, -4);
?>
<div class="photo text-center">
<a
href="<?=$src; ?>"
data-fancybox="gallery"
data-caption="<?=$photoalt; ?>" class="photo__link">
<img src="<?=$src; ?>" class="img-responsive photo__img" alt="<?=$photoalt;?>">
</a>
</div>
<?endforeach;?>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
Стили шаблона страницы:
.gallery{
background-color: #fff;
display: flex;
flex-wrap: wrap;
}
.gallery .photo{
margin: 1rem 0 0 0;
width: calc(100% / 4);
}
.gallery .photo__link{
display: inline-block;
}
.gallery .photo__img{
max-height: 175px;
}Обратите внимание, что для каждого элемента множественного свойства нельзя задать адекватный alt на уровне инфоблока, к примеру. Его можно задать на уровне медиагалереи, но его нет в массиве множественного свойства в шаблоне. Поэтому, в данном случае, alt каждой фотографии равен названию файла картинки с обрезанным расширением. Конечно, если в будущем появится адекватное решение с alt’ами для множественных свойств, то данная статья будет дополнена.
Основной целью описанных выше действий было добавление возможности управлять SEO-тегами для каждого элемента инфоблока (галереи, в понимании заказчика), что будет очень затруднительно, если выводить картинки непосредственно из медиабиблиотеки.