Слайдшоу "Из коробки"

Руководство по созданию слайдшоу в статье без сторонних расширений

webitproff

#45997 2023-03-04 02:16

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

Опытных пользователей и администраторов сайтов на котонти прошу не ругаться, - данный мануал рас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" />