Синтаксис Mini1:* 1 фото во всю ширь, Fotorama в контенте страницы

Выводит фотографии с использованием fotorama.io. Все вызванные одной командой фотографии автоматически объединяются в галерею. Превьюшки генерируются автоматически. Сами фотографии подгружаются по мере прокрутки по одной. Фотографии вписываются в 100% ширину области, в которой они вызваны:

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

Одиночный вызов фотографий можно использовать для типичной иллюстрации текстовых материалов:

При использовании внутри таблиц, необходимо добавить к таблице style='table-layout: fixed'Иначе автоматическое определение размеров не будет работать

Поведение галереи можно тонко модифицировать, см. Mini: контентная кастомизация -- модификации вызова простой Fotorama

Особенности практического применения пресета

Использование при встраивании в художественный дизайн

При внедрении вот в такой дизайн:

возникла идея создать такую верстку, чтобы галерея выглядела аккуратно при:

  • любом входном соотношении сторон фотографий, лишь бы они были достаточно горизонтальными;
  • любых разрешениях экрана устройства, т.е. еще и в мобильном/планшетном и т.д. виде, причем во всех случаях использовался только один файл превью.

Для того, чтобы обеспечить "красивое" отображение в предложенном дизайне при почти любом соотношении сторон входных кадров, было сделано следующее: фотографии встраивались в блок 1306х576 по центру, все что не влезало по вертикали — обрезалось. Итог таков, что достаточно большая фотография получалась визуально точно нужного размера, даже если у нее не такое соотношение сторон. Но у Фоторамы есть особенность — размеры последующих фотографий определяются по размерам первой. Таким образом, если заявочная обрезается тогда и только тогда, когда ее размеры не соответствуют нужному блоку 1306х576 (и это логично и правильно), то все последующие обрезаются всегда, если обрезалась Заявочная. Эта особенность проявилась в том, что если в галерее первая фотография по соотношению сторон слишком сильно отличалась от целевого размера и последующих фото, они (последующие) обрезались неоправданно сильно, и кнопка для перехода в Native Fullscreen зачастую выезжала за границы видимости. В итоге пришлось отказаться от Native Fullscreen.

Итого: Fotorama рекомендуется использовать саму по себе, без вписывания куда-либо еще.

Историко-техническое пояснение php-конфигурации

Конфиг выглядит так: 

  
  // Mini1:*
  $Mini['thumbs'][1] = "64x64";
  $Mini["MiniFmt1"]  = "<div class='fotorama' data-allowfullscreen='native' data-nav='thumbs'>%s</div>";
  $Mini["LinkFmt1"] = '<a href="%2$s" data-thumb="%1$s"></a>';  
  $Mini["ImgFmt1"] = '%1$s';

Почему? Объясняю.

Фоторама не использует превью для основного изображения. Другими словами, основное изображение всегда выводится "как есть", т.е. сжимается в браузере.
С этим можно что-то делать, но сложно, путем комбинации двух вызовов Mini.

Но лучше плюнуть, потому что у нее есть замечательное свойство Lazy load. Суть в том, что при загрузке страницы сразу загружаются только первые 2 картинки. Остальные — по мере пролистывания. Таким образом, в случае открытия на весь экран, или промотке к следующему фото это работает очень быстро (картинки уже загружены).

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

Кстати, если убрать data-nav='thumbs', то превьюшки не только превратятся обратно в точки, но и перестанут генериться.