Руководство по созданию слайдшоу в статье без сторонних расширений
webitproff |
|
---|---|
Слайдшоу с тематическими изображениями в статье или в полной новости без сторонних плагинов. Опытных пользователей и администраторов сайтов на котонти прошу не ругаться, - данный мануал расcписан по большей части для тех, кто только начинает изучать Cotonti Siena. Что нам понадобится? 1. Установленный модуль "PFS". 2. Установленный модуль "Page". 3. Знать, где в админке экстраполя. 4. Уметь немного пользоваться программами для редактирования кода, например "Notepad++" и для доступа к файлам сайта FTP-менеджер, - например "FileZilla Client". 5. Подключенная библиотека инструментария для создания интерфейсов - Bootstrap 5.3. скомпилированные файлы (Compiled CSS and JS) Поехали!
Заходим в экстраполя модуля "Page": * Your_Project.com - заменить на домен вашего сайта
нажмите на картинку, чтобы увеличить Создаем три экстраполя: Для каждого "field_type" или "Тип поля" устанавливаем - "input". Первое экстраполе для первой картинки. Второе экстраполе для второй картинки. Третье экстраполе для третьей картинки. Или вот так показать думаю будет нагляднее, заполняете только две строки и контролим "Тип поля" - "input"
На этом по экстраполям усё!
Открываем шаблон добавления страницы page.add.tpl
!!! Обращаю внимание, весь код в этом материале требует установленной библиотеки "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". * Your_Project.com - заменить на домен вашего сайта Заполняем все поля и подходим к только что созданным полям для картинок нашего слайдера.
Жмём на ссылку "Мои файлы".
После создания нового каталога, он появится в списке в верху страницы.
Открываем папку "Статья со слайдшоу" и нажимая на кнопку "Обзор" грузим с компьютера три картинки одинакового размера, например 640 на 420 пикселей (px).
После клика по кнопке "Загрузить", и уже после загрузки картинок мы окажемся в папке "Статья со слайдшоу", где видим три ссылки на наши картинки.
Вставляем ссылки в наши созданные экстраполя для картинок слайдшоу.
Теперь когда все поля формы создания страницы заполненны и ссылки на картинки слайдшоу прописаны верно, - жмем кнопку "Опубликовать".
Теперь в нужном месте, обычно выше блока с текстом, вставляем код, который ниже:
<!-- 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 минут. за то на составление этой инструкции часа два. если был полезен и помог, - жмем "спасибо" удачных и красочных проектов, и берегите себя! НЕТ ВОЙНЕ В УКРАИНЕ !
аккаунт удален - не срослось с разработчиками
ушел на другой движок |
|
This post was edited by webitproff (2023-03-05 08:18, 2 years ago) |