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

И так, не будет лишним напомнить, если вы интегрируете модуль «Files» на рабочий проект, уже с приличным "багажом" данных, - делаем бекап сайта и разворачиваем его где-то на локалке или поддомене, чтобы затем "брать" те же картинки или файлы от-туда на рабочий проект.

Потому что первым делом, перед интеграцией модуля "Files" нам нужно удалить модуль "PFS"!

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

1. Создание статьи или новости, - шаблон page.add.tpl

находим код для модуля "PFS", в исходниках выглядит вот так:

        <!-- IF {PAGEADD_FORM_PFS} -->{PAGEADD_FORM_PFS}<!-- ENDIF -->
        <!-- IF {PAGEADD_FORM_SFS} --><span class="spaced">{PHP.cfg.separator}</span>
        {PAGEADD_FORM_SFS}<!-- ENDIF -->

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

Сейчас же модуль "PFS" должен быть деинсталирован в системе!

Чтобы применить условие, сделать это нужно вот так:

<!-- IF {PHP|cot_module_active('pfs')} -->
        <!-- IF {PAGEADD_FORM_PFS} -->{PAGEADD_FORM_PFS}<!-- ENDIF -->
        <!-- IF {PAGEADD_FORM_SFS} --><span class="spaced">{PHP.cfg.separator}</span>
        {PAGEADD_FORM_SFS}<!-- ENDIF -->
<!-- ENDIF -->

 

А вот после этого уже прописываем инструкцию для прикрепления к создаваемой статье файлов и картинок при помощи модуля «Files», добавив код:

<!-- IF {PHP|cot_module_active('files')} -->
<div class="uk-card uk-padding-small uk-background-default shadow-scmtdlight uk-border-rounded uk-margin-medium-bottom">
<div class="uk-margin">
  <h4 class="uk-heading-divider uk-text-primary uk-margin-remove">{PHP.L.Files}:</h4>
 {PHP|cot_filesFileBox('page', 0)}
</div>
<hr>
<div class="uk-grid-small uk-child-width-expand@s uk-text-center" uk-grid>
  <div>
    {PAGEADD_FORM_PFS}
  </div>
  <div>
    {PAGEADD_FORM_SFS}
  </div>
</div>
</div>
<!-- ENDIF -->

 

---

 

2. Редактирование статьи или новости, - шаблон page.edit.tpl

находим код для модуля "PFS", в исходниках выглядит вот так:

<!-- IF {PAGEEDIT_FORM_PFS} -->{PAGEEDIT_FORM_PFS}<!-- ENDIF -->
<!-- IF {PAGEEDIT_FORM_SFS} --><span class="spaced">{PHP.cfg.separator}</span>
{PAGEEDIT_FORM_SFS}<!-- ENDIF -->

удаляем этот код или обрамляем в условие с проверкой под модуль "PFS":

<!-- IF {PHP|cot_module_active('pfs')} -->
<!-- IF {PAGEEDIT_FORM_PFS} -->{PAGEEDIT_FORM_PFS}<!-- ENDIF -->
<!-- IF {PAGEEDIT_FORM_SFS} --><span class="spaced">{PHP.cfg.separator}</span>
{PAGEEDIT_FORM_SFS}<!-- ENDIF -->
<!-- ENDIF -->

Напоминаю, что модуль "PFS" не должен быть установлен в системе, потому что он несовместим с модулем «Files»!

Теперь смело прописываем инструкцию для редактирования и прикрепления, файлов и картинок в статье, которую редактируем, добавив код:

<!-- IF {PHP|cot_module_active('files')} -->
<div class="uk-margin">
  <h4 class="uk-heading-divider uk-text-primary uk-margin-remove">{PHP.L.Files}:</h4> {PAGEEDIT_FORM_ID|cot_filesFileBox('page', $this)}
</div>
<hr>
<div class="uk-grid-small uk-child-width-expand@s uk-text-center" uk-grid>
  <div>
    {PAGEEDIT_FORM_PFS}
  </div>
  <div>
    {PAGEEDIT_FORM_SFS}
  </div>
</div>
<hr>
<!-- ENDIF -->

 

---

3. Просмотр статьи или новости, (страница полной новости) - шаблон page.tpl

Вариант 1, как у меня, при использовании CSS/JS front-end framework UIkit3

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

<!-- IF {PHP|cot_module_active('files')} -->
    <!-- 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>
    <!-- ELSE -->
    <!-- Заглушка. Если не прикреплена хоть одна картинка -->
    <div class="uk-card uk-card-body uk-card-small uk-background-default uk-margin-medium-bottom uk-border-rounded shadow-sldlight">
    <div class="uk-inline thumbnail uk-cover-container">
      <canvas width="900" height="420"></canvas>
      <img uk-cover class="" alt="" src="themes/{PHP.theme}/img/icon/gallery-empty.svg" uk-img>
    </div>
    </div>
    <!-- ENDIF -->
<!-- ENDIF -->

Затем, по адресу:
 

/themes/ИМЯ_ВАШЕЙ_ТЕМЫ/modules/files

создаем файл с именем
files.gallery.page_page_full.tpl

а в него, помещаем код:

<!-- BEGIN: MAIN -->
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slider="center: true">
    <ul class="uk-slider-items uk-grid uk-grid-match" uk-height-viewport="min-height: 420; offset-top: true; offset-bottom: 30" uk-lightbox>
        <!-- BEGIN: FILES_ROW -->
        <!-- IF {FILES_ROW_IMG} -->
        <li class="uk-width-1-1 uk-width-3-4@m">
            <div class="uk-cover-container">
                <canvas width="640" height="420"></canvas>
                <a href="{FILES_ROW_URL}" data-caption="{PAGE_SHORTTITLE} {FILES_ROW_TITLE} - {FILES_ROW_FILENAME}" alt="{FILES_ROW_TITLE}">
                    <img uk-cover src="{FILES_ROW|cot_filesThumbnailUrl($this,1153,523,'outbound')}" alt="{FILES_ROW_TITLE} - {FILES_ROW_FILENAME}" title="{FILES_ROW_TITLE} - {FILES_ROW_FILENAME}" />
                </a>
                <div class="uk-position-small uk-position-bottom-center uk-panel"><span class="uk-icon-button uk-button-primary">{FILES_ROW_NUM} </span></div>
            </div>
        </li>
        <!-- ENDIF -->
        <!-- END: FILES_ROW -->
    </ul>
    <div class="uk-visible@m">
        <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slider-item="previous"></a>
        <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slider-item="next"></a>
    </div>
</div>
<!-- END: MAIN -->

Результат такого дела можно увидеть, например на этой странице.

 

Вариант 2.

Это если вы используете  CSS/JS front-end framework Bootstrap, то :

Там, где будем выводить картинки, в нашем шаблоне шаблон page.tpl вставляем код:

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

Чтобы отредактировать вывод картинок в нашем втором варианте:

A.  из папки public_html/modules/files/tpl

файл files.gallery.tpl

копируем в папку:

/themes/ИМЯ_ВАШЕЙ_ТЕМЫ/modules/files

B.  затем открываем его и редактируем под себя. 

И так, как у вас Bootstrap можно легко сделать галлерею в виде слайдера (карусели).

 

---

4. Просмотр статей или новостей в списках, (листинг в категории) - шаблон page.list.tpl

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

 

 

Добавление списка файлов для скачивания

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

Такими файлами могут быть документы или архивы, как пример файлы с расширениями: zip, rar, 7z, pdf, djvu, txt, doc, docx, xls, xlsx и других, которые указаны в конфигурации модуля «Files».

В нужно месте шаблона полной новости/страницы - page.tpl добавляем код:

  

<!-- IF {PAGE_ID|cot_filesCount('page',$this,'','files')} > 0 -->
<div class="block">
    <h3>{PHP.L.files_downloads}</h3>
    {PAGE_ID|cot_filesDownloads('page',$this)}
</div>
<!-- ENDIF -->

 

примерно так: