Создание файлового шаблона для статей

Создание шаблона для статей

Создаем файловый шаблон ArticleTemplate.tpl со следующим содержимым:

{extends 'file:templates/base.tpl'} 
{block 'content'}
<header class="bg-light pt-2 border-bottom">
    <div class="container">
        {'!pdoCrumbs' | snippet : [
            'showHome' => 1,
            'showAtHome' => 0,
            'tpl' => '@INLINE <li class="breadcrumb-item"><a title="{$menutitle}" href="{$link}">{$menutitle}</a></li>',
            'tplHome' => '@INLINE <li class="breadcrumb-item"><a rel="nofollow" title="{$menutitle}" href="{$link}">{$menutitle}</a></li>',
            'tplWrapper' => '@INLINE <nav aria-label="breadcrumb"><ol class="breadcrumb">{$output}</ol></nav>',
            'tplCurrent' => '@INLINE <li class="breadcrumb-item active" aria-current="page">{$menutitle}</li>'
        ]}
    </div>
</header> 
<section class="bg-white py-4">
    <article class="container">
        <div class="card">
            {if $_modx->resource.video?}
                <div class="embed-responsive embed-responsive-16by9">
                     <iframe class="embed-responsive-item" src="{$_modx->resource.video}" title="{$_modx->resource.pagetitle}" frameborder="0" allowfullscreen></iframe>
                </div>
                <link rel="stylesheet" href="/template/css-js/responsive-video.css">
                {else}<img class="card-img-top" src="{$_modx->resource.img}" alt="{$_modx->resource.pagetitle}">
            {/if}
            <div class="card-body">
                 <h1>{$_modx->resource.pagetitle}</h1>
                 {$_modx->resource.introtext}
                 {$_modx->resource.content}
            </div>
        </div>
    </article> 
</section>
{/block}

Далее в административной панели сайта создаем шаблон «Статья» и подключаем к нему наш файловый шаблон:

{include 'file:templates/ArticleTemplate.tpl'}

Здесь у нас в отличии от статического шаблона добавились хлебные крошки и появились дополнительные поля, создайте их и назначьте новоиспеченному шаблону: img (тип «изображение»), video (тип «текст») — для добавления видео с ютуб, вимео и прочих видеохостингов.

Причем логика у вывода TV следующая: Если у вас статья с видео, вы заполняете видео и оно выводиться, если видео нет, то выводится изображение (ну соответственно оно должно быть добавлено). Если заполнены оба TV (img и video) — то все равно выведется видео, как то так.

Да и если заметили то если выбрано видео то подключается дополнительный файл css:

<link rel="stylesheet" href="/template/css-js/responsive-video.css">

в bootstrap 5.1.3 не нашёл классов для адаптации видео, поэтому взял их из 4й версии, следовательно создал в папке template/css-js файл responsive-video.css со следующим кодом:

.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.embed-responsive::before {
  display: block;
  content: "";
}

.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.embed-responsive-21by9::before {
  padding-top: 42.857143%;
}

.embed-responsive-16by9::before {
  padding-top: 56.25%;
}

.embed-responsive-4by3::before {
  padding-top: 75%;
}

.embed-responsive-1by1::before {
  padding-top: 100%;
}

Выглядеть заполненная статья с изображение будет так:

Да заполняйте introtext — он будет выводиться в категории. Изображения тоже добавляйте, даже если пост с видео — в категории будем выводить картинки.

с видео соответственно так:

Домашнее задание

Создайте ресурс «Блог» (шаблон любой — потом все сделаем шаблон категории блога и смените его).

Внутри ресурса «Блог» создайте ресурсы — статьи как минимум штук 5 и заполните их полностью (статьи временно можно взять с любого конкурента).