Инструкция по созданию слайдера тематических изображений в новостях и статьях без установки сторонних расширений
Слайдшоу с тематическими изображениями в статье или в полной новости без сторонних плагинов.
И так, инструкция, руководство, мастер-класс, как кому угодно, по созданию слайдшоу в статье для иллюстрации контента, подчеркивания его смысловой нагрузки, формирования эстетики сайта, используя средства "Из коробки", без установки новых расширений.
Опытных пользователей и администраторов сайтов на котонти прошу не ругаться, - данный мануал расcписан по большей части для тех, кто только начинает изучать Cotonti Siena.
Что нам понадобится?
1. Установленный модуль "PFS".
Об установке и настройке читаем по ссылке.
2. Установленный модуль "Page".
3. Знать, где в админке экстраполя.
4. Уметь немного пользоваться программами для редактирования кода, например "Notepad++" и для доступа к файлам сайта FTP-менеджер, - например "FileZilla Client".
5. Подключенная библиотека инструментария для создания интерфейсов - Bootstrap 5.3. скомпилированные файлы (Compiled CSS and JS)
(Если, кто не знает как подключить - создайте отдельную тему на форуме).
Поехали!
Экстраполя в базе данных модуля "Page" для картинок.
Заходим в экстраполя модуля "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, ...
смотрите скрин ниже.
Теперь когда все поля формы создания страницы заполненны и ссылки на картинки слайдшоу прописаны верно, - жмем кнопку "Опубликовать".
Открылась наша новая страница, а слайдера картинок в статье нет.... cool
Открываем шаблон полной новости/статьи "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 минут.
