Mini: PHP-кастомизация — передаем HTML-код в модальное окно

Этот пример создан для улучшения понимания принципов работы Фотогалереи. Он поможет научиться решать схожие задачи.

Задача №1: научиться передавать wiki-код в окно с фотографией

Решение задачи состоит в создании Mini-пресета, адаптированного для синтаксиса https://fotorama.io/docs/4/html/
Будем использовать комбинацию с атрибутом data-img так, чтобы HTML-код можно было разместить поверх изображения. Этом случае, передавая в атрибут путь до полноразмерного изображения, в самом блоке мы сможем разместить любой HTML-код.

Необходимый PHP-код (из файла /local/Cooks.Wikirama-Demos-Mini-PHPCustomization-AddHTML.php ):

$FmtPV['$UploadsUrl'] = '$_SERVER["HTTP_HOST"]."/uploads"'; // host without HTTP/HTTPS
$HTMLHeaderFmt['styles']['Mini'] = "<style>
  .ph-fotoramer {
    font-size: 125%; 
    background: rgba(222, 222, 222, 0.7);
  }
  </style>"; // some CSS
$Mini["LinkFmt3"] = "<div class='col-xs-4'>
<a href='%2\$s' class='ph-mini' id='transID_%2\$s' %3\$s><img src='%1\$s'></a>
</div>";

$UploadsUrl нужен потому, что движок PmWiki превращает в ссылку любой текст, начинающийся с http* , а для атрибута data-img нужен чистый текст.
$Mini["LinkFmt3"] переопределяет дефолтный Mini3: просто убирая часть, содержавшую ссылку на исходную фотографию.

В результате применения этого PHP-кода, команда Mini3: по прежнему генерирует превью картинки, но больше не генерирует транслируемую в Фотораму ссылку на полноразмерную картинку. Это сделано затем, что вместо полноразмерной картинки мы будем использовать вручную созданный <div> c data-img : 

Mini3:Doom_20140302.jpg
(:div class='ph-fotoramer hidden' data-img="[=http://=]{$UploadsUrl}/{$Group}/{$Name}/Doom_20140302.jpg":)
Это wiki-код для первого блока:
* [[http://www.ph-ph.ru|Ссылки работают!]]
* списки тоже работают.
* работать будет вся базовая вики-разметка
Но, конечно, вставлять сюда вызов других фотогалерей не стоит :)

А вот таблицы можно попробовать.
(:divend:)
Mini3:Doom_20140514.jpg
(:div class='ph-fotoramer hidden' data-img="[=http://=]{$UploadsUrl}/{$Group}/{$Name}/Doom_20140514.jpg":)
Пробуем, вот таблица:
|| class="table table-bordered"
||!ЗагЛев ||! ЗагЦент ||! ЗагПрав||
||cell 1  ||  cell 2 ||  cell 3||
(:divend:)

[=http://=] - позволяет обойти дефолтное поведение PmWiki: автоматическое преобразование в ссылку;
{$UploadsUrl} - это PTV без http, определенная в php-коде выше.

Задача №2: научиться передавать текст не в caption, а в свой собственный блок в окне с фотографией

Эту задачу будем решать через модификацию Mini4: . 

Mini4:[=
Doom_20140522_005210.jpg"Живые какодемоны"
Doom_20140506_021640.jpg"Мертвые какодемоны"
Doom_20140606_232515.jpg
Doom_20140621_234143.jpg
=]"Дефолтное описание, дается всем фото без своего уникального описания"
Общая HTML-ссылка Живые какодемоны
Общая HTML-ссылка Мертвые какодемоны
Общая HTML-ссылка Дефолтное описание, дается всем фото без своего уникального описания
Общая HTML-ссылка Дефолтное описание, дается всем фото без своего уникального описания 
Mini4:Doom_2015*"Общее описание для группы фотографий:"
Общая HTML-ссылка Общее описание для группы фотографий:
Общая HTML-ссылка Общее описание для группы фотографий:

Необходимая крупица PHP-кода (из файла /local/Cooks.Wikirama-Demos-Mini-PHPCustomization-AddHTML.php ):

$Mini["LinkFmt4"] = "<div class='col-xs-3'>
<a href='%2\$s' class='ph-mini' id='transID_%2\$s' %3\$s><img src='%1\$s'></a>
<div class='ph-fotoramer' data-img='%2\$s' data-thumb='%1\$s'>
  <a class='btn btn-primary' href='https://www.ph-ph.ru/' target='_blank'>Общая HTML-ссылка</a>
  %5\$s
</div>
</div>";

Суть состоит в замене <a class='ph-fotoramer' на <div class='ph-fotoramer', внутрь которого можно добавлен собственный HTML-код, а также передается title изображения..