Викирама: фотогалерея

Этот рецепт предназначен для создания комплексных, хорошо масштабируемых фотогалерей. Рецепт соединяет воедино фотогалерею Mini для автоматической генерации превью на серверной стороне, принципы верстки Bootstrap для их расположения на странице и библиотеку https://fotorama.io/ для просмотра полноразмерных изображений. Набор предустановленных пресетов предоставляет несколько вариантов применения галереи, доступных редакторам сайта.

Что это делает?

С точки зрения пользователя, рецепт расширяет возможности Mini следующими основными фичами:

  1. готовые пресеты, позволяющие использовать сетку Bootstrap для расположения превью;
  2. слайдер фотографий с физически приятным «перелистыванием» фото. Можно удобно мотать фотографии налево-направо, мышкой, стрелками, пальцем в телефоне;
  3. переход в native fullscreen, фото можно просматривать на весь экран устройства (монитора, телевизора, планшета);
  4. хэш-адресация: если на странице много фото, можно поделиться ссылкой на конкретную фотографию;
  5. широкие возможности подстройки: под весь проект, один его раздел, одну страницу или даже один вызов галереи.

Фотогалерея поддерживает все дефолтные возможности кастомизации Фоторамы, и кроме того дополнительно в примерах реализованы следующие полезные возможности:

  • передача описаний в модальные окна: описания передаются в шапку модального окна из аттрибута title ссылки, пример;
  • свой wiki-код поверх фото: см. пример;
  • ссылка на оригинал фотографии: возможность использования большого превью внутри модального окна, пример.

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

Fotorama применена в модифицированном через API виде, а именно в форме всплывающих модальных окон. Таким образом создано комбо из подхода Mini для генерации превьюшек на серверной стороне, и фронтэнда Фоторамы для просмотра полноразмерных изображений.

Все это в целом позволяет создавать на базе Rext полноценные систематизированные сайты-фотогалереи с хорошей сложносоставной навигацией.

Демо и синтаксис

Работа с фото в REXT

Предустановленные пресеты:

  • Attach: ядро PmWiki: простая загрузка фото. Приведен здесь просто для удобства.
  • Mini: 12 превью в строке сетки Bootstrap + Fotorama + модальное окно
  • Mini1: 1 фото во всю ширь, Fotorama в контенте страницы
  • Mini2: | Mini3: | Mini4: | Mini6: то же, что Mini:, но по своему номеру выводят соответствующее число фото в строку
  • Mini5: тот же Mini:, но без bootstrap-сетки. Для сохранения обратной совместимости.
  • Mini7: RESERV, кроме размеров превьюшек, полностью соответствует оригинальному Mini

Примеры применения:

Тексты:
Как работает Викирама?
Викирама: FAQ
Викирама: ToDo-лист

Техническая информация

Требования

Как это работает

см. Как работает Викирама?.

Подключение, настройки

Загрузите следующие файлы:

  • \pub\!phph\!phph-pack-collection\fotorama\fotorama.css — дефолтный код с fotorama.io
  • \pub\!phph\!phph-pack-collection\fotorama\fotorama-ph.css — наша небольшая CSS-стилизция.
  • \pub\!phph\!phph-pack-collection\fotorama\fotorama.js — дефолтный код с fotorama.io
  • \pub\!phph\!phph-pack-collection\fotorama\fotorama-ph.js — наша доработка логики.

В (farm)config.php: подключите php-файл командой include_once("$FarmD/cookbook/phWikirama.php ");. Убедитесь, что файл mini.php также подключен.

Файл phWikirama.php фактически является надстройкой над mini.php, в нем нет действующего кода, только (пере)определены конфигурационные массивы. Ядро и логика mini.php никак не модифицированы. Собственные PHP-настройки скрипта можно произвести, в (farm)config.php: (после вызова phWikirama.php ) еще раз переопределив необходимые вам переменные.

Служебная информация

Status
stable
Core
yes
PHPcookbook
phWikirama.php

Version
20201127

Changelog

  • 2020-11-27: весь наш JS- и CSS-код перенесен в PHP, т.к. его мало
  • 2020-11-18: конфигурационные переменные теперь определяются через функции SVD() и SDVA();
  • 2020-11-13: добавлен класс .ph-fotorama-previews, чтобы с его помощью было удобнее кастомизировать верстку;

Todo

см. Викирама: ToDo-лист