Слайдер в статьях "Из коробки". Руководство.

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

Опытных пользователей и администраторов сайтов на котонти прошу не ругаться, - данный мануал расcписан по большей части для тех, кто только начинает изучать Cotonti Siena.

Что нам понадобится?

1. Установленный модуль "PFS".
Об установке и настройке читаем по ссылке.

2. Установленный модуль "Page".

3. Знать, где в админке экстраполя.

4. Уметь немного пользоваться программами для редактирования кода, например "Notepad++" и для доступа к файлам сайта FTP-менеджер, - например "FileZilla Client".

5. Подключенная библиотека инструментария для создания интерфейсов - Bootstrap 5.3. скомпилированные файлы (Compiled CSS and JS)
(Если, кто не знает как подключить - создайте отдельную тему на форуме).

Поехали!

Экстраполя.

Заходим в экстраполя модуля "Page":
Управление сайтом / Прочее / Экстраполя / Таблица cot_pages - Модуль Pages
или если кому проще по ссылке:
https://Your_Project.com/admin.php?m=extrafields&n=cot_pages

* Your_Project.com - заменить на домен вашего сайта

 

                                  нажмите на картинку, чтобы увеличить

Создаем три экстраполя:

Для каждого "field_type" или "Тип поля" устанавливаем - "input".
"HTML-код поля" - здесь ничего не прописываем, по дефолту заполняется автоматически.

Первое экстраполе для первой картинки.
Для первой картинки в слайдшоу прописываем:
в "field_name" или "Название поля" - "head_screen_1"
в "field_description" или "Описание поля (_TITLE)" - "Изображение статьи №1"

Второе экстраполе для второй картинки.
Для второй картинки в слайдшоу прописываем:
в "field_name" или "Название поля" - "head_screen_2"
в "field_description" или "Описание поля (_TITLE)" - "Изображение статьи №2"

Третье экстраполе для третьей картинки.
Для третьей картинки в слайдшоу прописываем:
в "field_name" или "Название поля" - "head_screen_3"
в "field_description" или "Описание поля (_TITLE)" - "Изображение статьи №3"

Или вот так показать думаю будет нагляднее, заполняете только две строки и контролим "Тип поля"  - "input"

 

На этом по экстраполям усё!

Переходим к нашим шаблонам модуля "Page",
они в обязательном порядке должны находится в соответствующей папке вашей темы (скина) фронтэнда, а именно по адресу:
"themes/папка_вашей_темы/modules/page".
(о том, как их правильно туда внести читаем здесь, абзац "Кастомизация, то есть настройка и изменение внешнего вида шаблонов")

Открываем шаблон добавления страницы page.add.tpl
Находим, где у нас в шаблоне прописан модуль PFS, это {PAGEADD_FORM_PFS}.

 

Не важно, он прописан или не прописан, - "вкидуем" поверх него код, который ниже:

!!! Обращаю внимание, весь код в этом материале требует установленной библиотеки "Bootstrap 5.3"

<!-- IF {PHP.cot_modules.pfs} -->
<!-- IF {PAGEADD_FORM_PFS} -->
<div class="list-group-item list-group-item-action pb-2 px-2 px-sm-2 px-lg-auto mb-3">
  <div class="input-group input-group-outline row">
	<div class="col-12 col-md-6">
	  <p>
		<span class="fs-6 text-muted">{PHP.L.Mypfs}</span>
	  </p>
	</div>
	<div class="col-12 col-md-6">
	  <div class="col-12 fs-6 text-dark float-end">{PAGEADD_FORM_PFS} </div>
	</div>
  </div>
<!-- IF {PAGEADD_FORM_HEAD_SCREEN_1} -->
<div class="input-group input-group-static row">
  <div class="col-12 col-md-4">
	<p>
	  <span class="fs-6 text-muted">{PAGEADD_FORM_HEAD_SCREEN_1_TITLE}<span class="text-danger"> {PHP.L.URL}</span>:</span> 
	</p>
  </div>
  <div class="col-12 col-md-8">
	<div class="input-group input-group-static mb-4"> {PAGEADD_FORM_HEAD_SCREEN_1}</div>
  </div>
</div>
<!-- ENDIF -->
<!-- IF {PAGEADD_FORM_HEAD_SCREEN_2} -->
<div class="input-group input-group-static row">
  <div class="col-12 col-md-4">
	<p>
	  <span class="fs-6 text-muted">{PAGEADD_FORM_HEAD_SCREEN_2_TITLE}<span class="text-danger"> {PHP.L.URL}</span>:</span> 
	</p>
  </div>
  <div class="col-12 col-md-8">
	<div class="input-group input-group-static mb-4"> {PAGEADD_FORM_HEAD_SCREEN_2}</div>
  </div>
</div>
<!-- ENDIF -->
<!-- IF {PAGEADD_FORM_HEAD_SCREEN_3} -->
<div class="input-group input-group-static row">
  <div class="col-12 col-md-4">
	<p>
	  <span class="fs-6 text-muted">{PAGEADD_FORM_HEAD_SCREEN_3_TITLE}<span class="text-danger"> {PHP.L.URL}</span>:</span> 
	</p>
  </div>
  <div class="col-12 col-md-8">
	<div class="input-group input-group-static mb-4"> {PAGEADD_FORM_HEAD_SCREEN_3}</div>
  </div>
</div>
</div>
<!-- ENDIF -->
<!-- ENDIF -->
<!-- ENDIF -->

 

 

Сохраняем наш шаблон добавления страницы "page.add.tpl".
Теперь создаем страницу, ссылка на создание новой страницы обычно есть на любой странице или статье.
Или напрямую перейти по ссылке:
https://Your_Project.com/index.php?e=page&m=add

* Your_Project.com - заменить на домен вашего сайта

Заполняем все поля и подходим к только что созданным полям для картинок нашего слайдера.
Если всё правильно сделали, - увидите примерно то, что на скриншоте ниже.

 

 

Жмём на ссылку "Мои файлы".
В открывшемся окне браузера создаем новую папку/каталог "Статья со слайдшоу".

 

 

После создания нового каталога, он появится в списке в верху страницы.

 

 

Открываем папку "Статья со слайдшоу" и нажимая на кнопку "Обзор" грузим с компьютера три картинки одинакового размера, например 640 на 420 пикселей (px).

 

 

После клика по кнопке "Загрузить", и уже после загрузки картинок мы окажемся в папке "Статья со слайдшоу", где видим три ссылки на наши картинки.
Копируем эти ссылки как на скриншоте ниже.

 

 

Вставляем ссылки в наши созданные экстраполя для картинок слайдшоу.
!!! Но обратите внимание!
На этом этапе, вставляя ссылку в каждое поле нужно удалить адрес сайта, включая слеш (знак "/"), который находится сразу за именем доменной зоны вашего сайта, - ru, com, net, ...
смотрите скрин ниже.

 

 

Теперь когда все поля формы создания страницы заполненны и ссылки на картинки слайдшоу прописаны верно, - жмем кнопку "Опубликовать".

Открылась наша новая страница, а слайдера картинок в статье нет....

Открываем шаблон полной новости/статьи "page.tpl",
который обязательно должен находится папке вашей темы (скина) фронтэнда, а именно по адресу:
"themes/папка_вашей_темы/modules/page"

Теперь в нужном месте, обычно выше блока с текстом, вставляем код, который ниже:

 

<!-- IF {PHP.pag.page_head_screen_1} OR {PHP.pag.page_head_screen_2} OR {PHP.pag.page_head_screen_3} -->
<!-- блок слайдшоу показываем, если прикреплена хотябы одна картинка -->
<div class="card-header p-0 mx-3 my-3 position-relative z-index-1">
  <div id="carouselExampleIndicators" class="carousel slide">
    <div class="carousel-indicators">
	<!-- IF {PAGE_HEAD_SCREEN_1} -->
	<!-- на случай, если картинок меньше трех -->
      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
	 <!-- ENDIF -->
	 <!-- IF {PAGE_HEAD_SCREEN_2} -->
	 <!-- на случай, если картинок меньше трех -->
      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
	  <!-- ENDIF -->
	  <!-- IF {PAGE_HEAD_SCREEN_3} -->
	  <!-- на случай, если картинок меньше трех -->
      <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
	  <!-- ENDIF -->
    </div>
    <div class="carousel-inner">
	<!-- IF {PAGE_HEAD_SCREEN_1} -->
	<!-- на случай, если картинок меньше трех -->
      <div class="carousel-item active shadow ">
        <img src="{PHP.cfg.mainurl}/{PAGE_HEAD_SCREEN_1}" class="d-block w-100 img-fluid border-radius-md" alt="{PAGE_SHORTTITLE}" loading="lazy">
      </div>
	  <!-- ENDIF -->
	  <!-- IF {PAGE_HEAD_SCREEN_2} -->
	  <!-- на случай, если картинок меньше трех -->
      <div class="carousel-item">
        <img src="{PHP.cfg.mainurl}/{PAGE_HEAD_SCREEN_2}" class="d-block w-100 img-fluid border-radius-md" alt="{PAGE_SHORTTITLE}" loading="lazy">
      </div>
	  <!-- ENDIF -->
	  <!-- IF {PAGE_HEAD_SCREEN_3} -->
	  <!-- на случай, если картинок меньше трех -->
      <div class="carousel-item">
        <img src="{PHP.cfg.mainurl}/{PAGE_HEAD_SCREEN_3}" class="d-block w-100 img-fluid border-radius-md" alt="{PAGE_SHORTTITLE}" loading="lazy">
      </div>
	  <!-- ENDIF -->
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
</div>
<!-- ENDIF -->

 

Сохраняем наш шаблон полной новости/страницы "page.tpl"

Теперь перезагружаем нашу статью/новость, к которой мы добавляли картинки для слайдера.

Если всё сделано чётко по инструкции, - результат будет как на скриншотах ниже, а еще, пока, на данный момент это в работе можно увидеть здесь.

 

 

 

 

Если Вы используете библиотеку UIkit3 - документация по слайдшоу здесь. Если не получается, пишите в этой теме, - подскажу.

После небольших манипуляций с шаблоном "header.tpl"

    <meta property="og:locale" content="{PHP.lang}" />
    <meta property="og:type" content="article" />
    <meta property="og:title" content="{HEADER_TITLE}" />
    <meta property="og:description" content="{HEADER_META_DESCRIPTION}" />
    <meta property="og:url" content="{HEADER_CANONICAL_URL}" />
    <meta property="og:site_name" content="{PHP.cfg.maintitle}" />
	<!-- IF {PHP.env.ext} == 'page' AND {PHP.env.location} == 'pages' -->
	<meta property="og:image" content="{PHP.cfg.mainurl}/{PHP.pag.page_head_screen_1}" />
	<!-- ELSE -->
	<meta property="og:image" content="{PHP.cfg.mainurl}/apple-touch-icon.png}" />
	<!-- ENDIF -->
    <meta property="og:image:type" content="image/jpeg" />

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

Вот так в телеграм

 

вот так на facebook

 

вот так это в ВК

 

и вот так в мейл ру

 

на самом деле на создание такого слайдера у меня ушло примерно 10 минут.

если был полезен и помог, - жмем "спасибо"

обсудить на форуме