Создал тип инфоблока - Слайдер на битриксе и сам инфоблок - слайдер, который включает в себя фоновое изображение слайда (картинка анонса инфоблока слайдер), имя слайда, фотографию автора слайда (строковому свойству PictureUrl анонса задал путь к фотографии автора слайда), имя автора (задал строковому свойству Author анонса), дату создания слайда (задал свойству типа дата DateTime анонса ). (действовал согласно Инструкции) Должно получиться как на скриншоте
Шаблон взят с сайта w3layouts.
Есть код из этого шаблона
<!-- main-slider -->
<section class="w3l-main-slider position-relative" id="home">
<div class="companies20-content">
<div class="owl-one owl-carousel owl-theme">
<div class="item">
<li>
<div class="slider-info banner-view bg bg2">
<div class="banner-info">
<div class="container">
<div class="banner-info-bg text-center">
<a href="#blog-single.html" class="blog_post_title">How to Make Cappuccino without a Machine</a>
<ul class="author-date mb-4 d-flex align-items-center mt-4 justify-content-center">
<li class="circle avatar"><img src="<?=SITE_TEMPLATE_PATH ?>/assets/images/author1.jpg" alt=""></li>
<li>by <a href="#author.html">John Michele</a></li>
<li><span class="fa fa-clock-o" aria-hidden="true"></span> Mar 16, 2020</li>
</ul>
</div>
</div>
</div>
</div>
</li>
</div>
<div class="item">
<li>
<div class="slider-info banner-view banner-top1 bg bg2">
<div class="banner-info">
<div class="container">
<div class="banner-info-bg text-center">
<a href="#blog-single.html" class="blog_post_title">Create a Stunning Website!</a>
<ul class="author-date mb-4 d-flex align-items-center mt-4 justify-content-center">
<li class="circle avatar"><img src="<?=SITE_TEMPLATE_PATH ?>/assets/images/author2.jpg" alt=""></li>
<li>by <a href="#author.html">Daniel Roberto</a></li>
<li><span class="fa fa-clock-o" aria-hidden="true"></span> Jan 22, 2020</li>
</ul>
</div>
</div>
</div>
</div>
</li>
</div>
<div class="item">
<li>
<div class="slider-info banner-view banner-top2 bg bg2">
<div class="banner-info">
<div class="container">
<div class="banner-info-bg text-center">
<a href="#blog-single.html" class="blog_post_title">See yourself in a New Light.</a>
<ul class="author-date mb-4 d-flex align-items-center mt-4 justify-content-center">
<li class="circle avatar"><img src="<?=SITE_TEMPLATE_PATH ?>/assets/images/author3.jpg" alt=""></li>
<li>by <a href="#author.html">Emma Stone</a></li>
<li><span class="fa fa-clock-o" aria-hidden="true"></span> Aug 14, 2020</li>
</ul>
</div>
</div>
</div>
</div>
</li>
</div>
</div>
</div>
</section>
Подскажите как этот код можно посадить на bitrix?
Если действовать согласно Инструкции, то код шаблона компонента Список новостей надо переделать из файла C:\OpenServer\domains\bxsite3.ru\local\templates\blog\components\bitrix\news.list\myowlslider\template.php
<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
/** @var array $arParams */
/** @var array $arResult */
/** @global CMain $APPLICATION */
/** @global CUser $USER */
/** @global CDatabase $DB */
/** @var CBitrixComponentTemplate $this */
/** @var string $templateName */
/** @var string $templateFile */
/** @var string $templateFolder */
/** @var string $componentPath */
/** @var CBitrixComponent $component */
$this->setFrameMode(true);
?>
<div class="news-list">
<?if($arParams["DISPLAY_TOP_PAGER"]):?>
<?=$arResult["NAV_STRING"]?><br />
<?endif;?>
<?foreach($arResult["ITEMS"] as $arItem):?>
<?
$this->AddEditAction($arItem['ID'], $arItem['EDIT_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_EDIT"));
$this->AddDeleteAction($arItem['ID'], $arItem['DELETE_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_DELETE"), array("CONFIRM" => GetMessage('CT_BNL_ELEMENT_DELETE_CONFIRM')));
?>
<?echo '<pre>', var_dump($arItem) ,'</pre>';?>
<div class="news-item" id="<?=$this->GetEditAreaId($arItem['ID']);?>">
<?if($arParams["DISPLAY_PICTURE"]!="N" && is_array($arItem["PREVIEW_PICTURE"])):?>
<?if(!$arParams["HIDE_LINK_WHEN_NO_DETAIL"] || ($arItem["DETAIL_TEXT"] && $arResult["USER_HAVE_ACCESS"])):?>
<a href="<?=$arItem[" DETAIL_PAGE_URL "]?>"><img
class="preview_picture"
border="0"
src="<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>"
width="<?=$arItem["PREVIEW_PICTURE"]["WIDTH"]?>"
height="<?=$arItem["PREVIEW_PICTURE"]["HEIGHT"]?>"
alt="<?=$arItem["PREVIEW_PICTURE"]["ALT"]?>"
title="<?=$arItem["PREVIEW_PICTURE"]["TITLE"]?>"
style="float:left"
/></a>
<?else:?>
<img class="preview_picture" border="0" src="<?=$arItem[" PREVIEW_PICTURE "]["SRC "]?>" width="<?=$arItem[" PREVIEW_PICTURE "]["WIDTH "]?>" height="<?=$arItem[" PREVIEW_PICTURE "]["HEIGHT "]?>" alt="<?=$arItem[" PREVIEW_PICTURE "]["ALT "]?>" title="<?=$arItem["
PREVIEW_PICTURE "]["TITLE "]?>" style="float:left" />
<?endif;?>
<?endif?>
<?if($arParams["DISPLAY_DATE"]!="N" && $arItem["DISPLAY_ACTIVE_FROM"]):?>
<span class="news-date-time"><?echo $arItem["DISPLAY_ACTIVE_FROM"]?></span>
<?endif?>
<?if($arParams["DISPLAY_NAME"]!="N" && $arItem["NAME"]):?>
<?if(!$arParams["HIDE_LINK_WHEN_NO_DETAIL"] || ($arItem["DETAIL_TEXT"] && $arResult["USER_HAVE_ACCESS"])):?>
<a href="<?echo $arItem[" DETAIL_PAGE_URL "]?>"><b><?echo $arItem["NAME"]?></b></a><br />
<?else:?>
<b><?echo $arItem["NAME"]?></b><br />
<?endif;?>
<?endif;?>
<?if($arParams["DISPLAY_PREVIEW_TEXT"]!="N" && $arItem["PREVIEW_TEXT"]):?>
<?echo $arItem["PREVIEW_TEXT"];?>
<?endif;?>
<?if($arParams["DISPLAY_PICTURE"]!="N" && is_array($arItem["PREVIEW_PICTURE"])):?>
<div style="clear:both"></div>
<?endif?>
<?foreach($arItem["FIELDS"] as $code=>$value):?>
<small>
<?=GetMessage("IBLOCK_FIELD_".$code)?>: <?=$value;?>
</small><br />
<?endforeach;?>
<?foreach($arItem["DISPLAY_PROPERTIES"] as $pid=>$arProperty):?>
<small>
<?=$arProperty["NAME"]?>:
<?if(is_array($arProperty["DISPLAY_VALUE"])):?>
<?=implode(" / ", $arProperty["DISPLAY_VALUE"]);?>
<?else:?>
<?=$arProperty["DISPLAY_VALUE"];?>
<?endif?>
</small><br />
<?endforeach;?>
</div>
<?endforeach;?>
<?if($arParams["DISPLAY_BOTTOM_PAGER"]):?>
<br />
<?=$arResult["NAV_STRING"]?>
<?endif;?>
</div>
в файл
<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
<div class="owl-carousel">
<?foreach($arResult["ITEMS"] as $arItem):?>
<?
$this->AddEditAction($arItem['ID'], $arItem['EDIT_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_EDIT"));
$this->AddDeleteAction($arItem['ID'], $arItem['DELETE_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_DELETE"), array("CONFIRM" =>GetMessage('CT_BNL_ELEMENT_DELETE_CONFIRM')));
?>
<div id="<?=$this->GetEditAreaId($arItem['ID']);?>">
<img src="<?=$arItem[" PREVIEW_PICTURE "]["SRC "]?>" />
</div>
<?endforeach;?>
</div>
<script>
$(document).ready(function() {
$(".owl-carousel").owlCarousel({
items: 1,
})
});
</script>
- Вопрос состоит в том как именовать классы div-ов в конечном файле template.php (а именно необходимо сопоставить эти классы с классами исходного шаблона сайта). А именно как соотнести класс
news-list
с классомowl-one owl-carousel owl-theme
и т.п.? (эти классы описаны в файлеC:\OpenServer\domains\bxsite3.ru\local\templates\blog\assets\css\style-starter.css
) - Как получить значения свойств Author, DateTime и PictureUrl инфоблока?
- Каким образом можно повесить класс
banner-top№
на все слайды, кроме первого?