CMS Freelance Marketplace Demo

webitproff

2025-03-11 14:22

Небольшая справка по шаблонам.

Все tpl шаблоны модуля Files можно посмотреть и скачать в репозитории разработчика или уже мои модификации у меня на github.

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

/themes/nameskin/modules/files

Разбираем каждый шаблон, в контексте его назначения и что он делает

1. Админка. Папки пользователей.

├── files.admin.allpfs.tpl

    Шаблон админки "Разделы «Мои файлы» всех пользователей"
    Выводится список(таблица) пользователей, сколько у кого файлов.
    Дает администратору возможность просматривать эти файлы и управлять ими.
    Шаблон лучше переместить(не скопировать) в скин/тему своей админки.

2. Админка. Служебная информация.

├── files.admin.main.tpl

    Шаблон админки "Файлы: Администрирование"
    Выводится системная служебная информация, немного справки по модулю.
    Version: ImageMagick, Supported formats, Графическая библиотека GD, Версия модуля: 2.1.0.
    Шаблон лучше переместить(не скопировать) в скин/тему своей админки.

3. Админка. Управление и навигация.

├── files.admin.tpl

    Основной шаблон администрирования модуля.
    В шаблон подключаются шаблоны: files.admin.allpfs.tpl и files.admin.main.tpl
    Шаблон содержит основные элементы интерфейса навигации и управления модулем: Конфигурация, Экстраполя для файлов, Экстраполя для папок, Разделы «Мои файлы» всех пользователей, Файловый архив сайта, Уборка мусора, Удалить все миниатюры.
    Шаблон лучше переместить(не скопировать) в скин/тему своей админки.

4. Аватары. Пользователи.

├── files.avatarbox.tpl

Шаблон выбора, прикрепления и замены аватарки пользователя.
Используется в настройках профиля пользователя или при редактивании данных пользователя администратором сайта.
Подключается в шаблоне users.profile.tpl тегом {USERS_PROFILE_AVATAR} и в users.edit.tpl тегом {USERS_EDIT_AVATAR}.

5. Публикации. Карусель в контенте (в тексте)

├── files.bootstrap-carousel_gallery.tpl

Шаблон курасели картинок на bootstrap. вертка какой версии не знаю.
Шаблон подключается прямо в тексте статьи, поста в теме на форуме или в личных приватных сообщениях путем вставки кода на папку с картинками в таком виде:

pfs_gallery?f=2&tpl=files.bootstrap-carousel_gallery - код должен быть обернут в квадратные скобки [тут&код.вставки]

где f=2 это (f - folder/папка), а 2 это ID этой папки, которые мы видим сразу в диалоговом окне своего персонального файлового хранилища (PFS), в которое мы переходим по ссылке "Мои файлы".

У меня шаблон каруселькой запустить на дефолтной теме сайта не получилось как положено, то есть картинки грузятся и отображаются, но каруселька не работает.
Поэтому, я так думаю шаблон нужно переписывать под себя, или создавать свой шаблон и подключать его, как пример здесь в пункте 3.

    То есть, я сразу создал вот шаблон files.gallery.page_page_full.tpl со своей каруселькой, а затем подключил его при помощи инструкции:
    {PAGE_ID|cot_filesGallery('page',$this,'','files.gallery.page_page_full')}

6. Универсальный вывод прикрепленных файлов и картинок к объектам

├── files.display.tpl

    Сам по себе шаблон выводит и отображает прикрепленые к объекту файлы (объект - статья или пост, имеющий ID).
    Он может выводить как все файлы, так отдельно изображения, отдельно файлы, не являющиеся изображениями.
    {PAGE_ID|cot_filesDisplay('page',$this)} - шаблон явно не указан, но подключится именно он и выведет все файлы
    {PAGE_ID|cot_filesDisplay('page',$this,'','files.display', '')} - уже явно указываем шаблон 'files.display' выведет все файлы. Обратите внимание, внутри конструкции выражения вызываемой функции, указывая имя шаблона, мы его записываем без указания расширения .tpl - это как само собой разумеется.
    {PAGE_ID|cot_filesDisplay('page',$this,'','files.display')} - выведет все файлы
    {PAGE_ID|cot_filesDisplay('page',$this,'','files.display', 'images')} - только картинки
    {PAGE_ID|cot_filesDisplay('page',$this,'','files.display', 'files')} - только файлы.

7. Форум, список прикрепленных файлов для скачивания

├── files.downloads.forums_posts_files.tpl

    Мой пользовательский шаблон, для вывода списка файлов без картинок для скачивания на форуме.
    Посмотреть код шаблона можно в репозитории.
    Подключается вот так:

{FORUMS_POSTS_ROW_ID|cot_filesDisplay('forums',$this,'','files.downloads.forums_posts_files', 'files')}

размещать нужно в своем шаблоне темы форума и сообщений в ней, - forums.posts.tpl внутри логического блока CoTemplate:  и 

8. Универсальный вывод прикрепленных файлов для скачивания

├── files.downloads.tpl

    Шаблон для выводы списка файлов (без картинок) для скачивания, которые прикреплены к какому либо объекту.
    При вызове функции в выражении
    {PAGE_ID|cot_filesDownloads('page',$this)}
    шаблон files.downloads.tpl подключается по-умолчанию.
    То есть шаблон вы можете только отредактировать, но создать свой пользовательский шаблон и подключить его затем при помощи функции cot_filesDownloads у вас не получится.
    Например, я хочу вывести тупо список файлов, которые можно скачать, без всяких иконок, размеров файлов и счетчика скачиваний, - я создаю свой шаблон:
    files.downloads.mytemplate.tpl
    но подключаю его уже при помощи другой функции, - cot_filesDisplay - она позволяет в свои параметры передать название того шаблона, который я хочу использовать.

{PAGE_ID|cot_filesDisplay('page',$this,'','files.downloads.mytemplate','files')}

9. Менеджер файлов "на лету" при добавлении и редактировании статьи, поста форума и т.д.

├── files.filebox.tpl

    Шаблон можно назвать служебным, то есть кастомизировать его точно не стоит, если вы достоверно не знаете, что делаете.
    Этот шаблон выводит кнопки "Добавить файлы...", "Начать закачку", "Отменить закачку", "Удалить", но не только, в шаблоне есть таблица, в которую подключается шаблон files.templates.tpl, где мы видим список прикрепленных файлов с превьюшками и при помощи кнопок выше можем управлять этими файлами.
    Назначение шаблона files.filebox.tpl и в него включенного files.templates.tpl вместе обеспечивают возможность прикреплять файлы и картинки к нужным нам статьям или сообщениям "на лету". То есть прикрепили файлы, сохранили статью и они тут же вывелись на странице, смотря как вы подключили их отображение. Это означает, что вы не идете по ссылке "мои файлы", где сразу туда грузите файлы, а затем при помощи короткого кода или ссылки вставляете в контент (в текст). Об этом как-то поговорим в отдельной теме, в чем разница "на лету" и в тексте из PFS(мои файлы).
    Шаблон вызывается функцией, как пример:
    {PHP|cot_filesFileBox('page', 0)} например в page.add.tpl
    {PHP|cot_filesFileBox('page', 0, 'logo')} например в page.add.tpl
    {PHP|cot_filesFileBox('page', 0, 'gallery')} например в page.add.tpl
    {PAGEEDIT_FORM_ID|cot_filesFileBox('page', $this)} например в page.edit.tpl
    Важно запомнить одно - прикрепление файлов для новых или существующих объектов

10. Служебный files.filebox.tpl

├── files.files.tpl

Шаблон используется если использовать функцию:

<!-- IF {PHP|cot_auth('files', 'a', 'W')} -->
{PAGE_ID|cot_filesWidget('page', $this, '', 'files.link')}
<!-- ENDIF -->

Этот шаблон — часть модуля Files в Cotonti и используется как HTML-компонент виджета загрузки файлов, интегрированного с jQuery File Upload и Bootstrap 3.
    Он предназначен для:
    Создания интерфейса, где пользователь может загружать файлы асинхронно (без перезагрузки страницы).
    Управления списком загруженных файлов (добавление, удаление, отмена).
    Отображения прогресса загрузки и информации о файлах в таблице.
    Вероятнее всего, это файл типа files.widget.tpl или аналогичный, который вызывается через JavaScript-код модуля Files для встраивания в другие страницы или формы Cotonti.
    Конкретно, пока не разобрался.

пока на потом

11. Карусель картинок в постах на форуме

├── files.gallery.forums_posts_images.tpl

    Кастомный (мой пользовательский) шаблон, который предназначен выводить только картинки в постах и темах на форуме.
    В данном случае, выводит картинки плиткой/сеткой, кликая по любому из них применяется "Lightbox component" и "Slideshow component"
    Код шаблона в репозитории.
    Подключается вот так:

        <!-- IF {FORUMS_POSTS_ROW_ID|cot_filesCount('forums', $this, '', 'images')} > 0 -->
        <div class="uk-margin">
            <label class="uk-form-label">
                <h3>{PHP.L.Image}</h3>
            </label>
            <div class="uk-form-controls"> {FORUMS_POSTS_ROW_ID|cot_filesGallery('forums',$this,'','files.gallery.forums_posts_images')} </div>
        </div>
        <!-- ENDIF -->

демонстрация работы в этой теме.

11. Карусель картинок в карточке товара

├── files.gallery.page_market_full.tpl

    Кастомный (мой пользовательский) шаблон, который предназначен выводить только картинки при просмотре полной страницы карточки товара модуля "Market".
    В данном случае, выводит картинки через "Slideshow component", где кликая по любой картинки применяется "Lightbox component".
    Код шаблона в репозитории.
    Подключается вот так:

        <!-- IF {PRD_ID|cot_filesCount('market',$this,'','images')} > 0 -->
            <div class="uk-card uk-margin-medium-bottom">
            {PRD_ID|cot_filesGallery('market',$this,'','files.gallery.page_market_full')}
            </div>
        <!-- ENDIF -->

размещать нужно в своем шаблоне карточки товара, - market.tpl, например вслед за кратким описание товара {PRD_DESCRIPTION} или перед текстом {PRD_TEXT}.

в папку с модулем Files, придется докинуть хуки: files.market.add.add.done, market.edit.delete.done, market.add.tags, market.edit.tags по примеру с модулем Pages.

12. Карусель картинок на странице полной новости

├── files.gallery.page_page_full.tpl

    Кастомный (мой пользовательский) шаблон, который предназначен выводить только картинки при просмотре полной страницы статьи или новости модуля "Pages".
    В данном случае, выводит картинки через "Slideshow component", где кликая по любой картинки применяется "Lightbox component".
    Код шаблона в репозитории.
    Подключается вот так:

        <!-- IF {PAGE_ID|cot_filesCount('page',$this,'','images')} > 0 -->
        <div class="uk-card uk-margin-medium-bottom">
        {PAGE_ID|cot_filesGallery('page',$this,'','files.gallery.page_page_full')}
        </div>
        <!-- ENDIF -->

размещать нужно в своем шаблоне полной страницы статьи или новости, - page.tpl, например вслед за кратким описание новости {PAGE_DESCRIPTION} или перед текстом {PAGE_TEXT}.

13. Картинка статьи или новости в списках страниц

├── files.gallery.page_page_list.tpl

    Кастомный (мой пользовательский) шаблон, который предназначен выводить только картинку (одно изображение) при просмотре списка страниц в категории модуля "Pages".
    Код шаблона в репозитории.
    Подключается вот так:

    <!-- IF {PHP|cot_module_active('files')} -->
        <!-- IF {LIST_ROW_ID|cot_filesCount('page', $this, '', 'images')} > 0 -->
        <div class="uk-inline thumbnail uk-cover-container uk-visible@s">
            <canvas width="330" height="320"></canvas>
            <a href="{LIST_ROW_URL}" title="{LIST_ROW_TITLE}" rel="bookmark" class="thumbnail">
              <img alt="{LIST_ROW_TITLE}" src="{LIST_ROW_ID|cot_filesGet('page', $this, '')|cot_filesThumbnailUrl($this, '800', '600', 'outbound')}" uk-cover />
            </a>
        </div>
        <!-- ENDIF -->
    <!-- ENDIF -->

размещать нужно в своем шаблоне списка страниц - page.list.tpl, внутри логического блока  и , например сразу после:

    <h3><a href="{LIST_ROW_URL}">{LIST_ROW_TITLE}</a></h3>

14. Галлерея миниатюр прикрепленных картинок.

├── files.gallery.tpl

Шаблон достаточно универсален и в идеале предназначен выводить миниатюры картинок со ссылкой на полноразмерное изображение (картинку).
Код шаблона в репозитории.

Два важных замечания:

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

    А. Если вызовем так:

    {PAGE_ID|cot_filesGallery('page',$this,'','files.gallery')}

    ожидаемо получим картинки и в таком виде, как у нас это "свёрстано" в шаблоне files.gallery.tpl

    Б. Но если, мы по не опытности или по не знанию подключим так:

  {PAGE_ID|cot_filesDisplay('page',$this,'','files.gallery')}

    мы получим и миниатюры картинок и файлы, которые не являются изображениями.

    В. Если подключим, в такой конструкции:

 {PAGE_ID|cot_filesDisplay('page',$this,'','files.gallery', 'images')}

    где, в параметры функции cot_filesDisplay четко указываем 'images' - снова получим то, что в пункте А.

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

    А. добавляем в папку шаблонов модуля копированием files.gallery.tpl и переименовываем его в files.gallery.superpictures_in_page.tpl и редактируем код как угодно и под что угодно чтобы получить красивый слайдер, плитку миниатюр, как кому нравится.

    Б. как только сверстали/подправили новый шаблон, подключаем его в наш page.tpl

    <!-- IF {PHP|cot_module_active('files')} -->
    <!-- IF {PAGE_ID|cot_filesCount('page',$this,'','images')} > 0 -->
    {PAGE_ID|cot_filesGallery('page',$this,'','files.gallery.superpictures_in_page', 'images')}
    <!-- ENDIF -->
    <!-- ENDIF -->

В результате получим только картинки по своей вёрстке.

15. Шаблон files.image.tpl

├── files.image.tpl

пока не разобрался. на потом.

16. Ссылка и модальное окно.

├── files.link.bootstrap.tpl

код файла в исходном виде

по идее тоже самое что и files.link.tpl в пункте 17, но у меня не работает

17. Редактирование файлов на лету на странице объекта.

├── files.link.tpl

Добавление ссылки и диалога загрузки файлов в модальном окне.
Модуль позволяет добавлять файлы не только во время редактирования объекта, но и прямо во время просмотра.
Добавим ссылку "Прикрепить файлы" в меню администрирования страницы, в шаблон page.tpl

Прямо в шаблоне page.tpl, как пример, при вызове функции в таком виде:

<!-- IF {PHP|cot_auth('files', 'a', 'W')} -->
{PAGE_ID|cot_filesWidget('page', $this, '', 'files.link')}
<!-- ENDIF -->

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

18. "Мои Файлы" (PFS) Менеджер файлов. Редактирование папки с файлами и её содержимого.

├── files.pfs.folder.edit.tpl

19. "Мои Файлы" (PFS) Менеджер файлов. Основной интерфейс.

├── files.pfs.tpl

20. Шаблон управления файлами внутри таблицы в режиме "на лету" и в режиме "Мои файлы"

├── files.templates.tpl

Крайне не приятно выполнен шаблон автором библиотеки jQuery-File-Upload.

html-тегам присвоены свойства без создания собственных классов в css/js файлах

Редактировать только после бекапа

21.

files.tpl
пока не разобрался. на потом.

22.

files.widget.tpl
пока не разобрался. на потом.

link.css

пока не разобрался. на потом.

24.

widget.css

пока не разобрался. на потом.

This post was edited by webitproff (2025-03-13 11:09, 1 year ago)

Pages, Articles & News

Forums

Users

Tools & Plugins

Example / Placeholder Title

webitproff

1. Админка. Папки пользователей.

2. Админка. Служебная информация.

3. Админка. Управление и навигация.

4. Аватары. Пользователи.

5. Публикации. Карусель в контенте (в тексте)

6. Универсальный вывод прикрепленных файлов и картинок к объектам

7. Форум, список прикрепленных файлов для скачивания

8. Универсальный вывод прикрепленных файлов для скачивания

9. Менеджер файлов "на лету" при добавлении и редактировании статьи, поста форума и т.д.

10. Служебный files.filebox.tpl

11. Карусель картинок в постах на форуме

11. Карусель картинок в карточке товара

12. Карусель картинок на странице полной новости

13. Картинка статьи или новости в списках страниц

14. Галлерея миниатюр прикрепленных картинок.

Два важных замечания:

15. Шаблон files.image.tpl

16. Ссылка и модальное окно.

17. Редактирование файлов на лету на странице объекта.

18. "Мои Файлы" (PFS) Менеджер файлов. Редактирование папки с файлами и её содержимого.

19. "Мои Файлы" (PFS) Менеджер файлов. Основной интерфейс.

20. Шаблон управления файлами внутри таблицы в режиме "на лету" и в режиме "Мои файлы"

Account

Site Engine Cotonti Siena