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

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

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

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

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

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

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

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

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

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

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

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

Требования

• рецепт Mini c pmwiki.org;
• верстка на базе Skin: thisSite.tmpl требуется для всех пресетов, кроме Mini1 и Mini5.

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

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

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

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

• \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-лист