Штирлиц — Сеть печатных салонов в Перми

Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми

Modx revo gallery: MODX Extras | Gallery 2.0.1-pl

Добавление фото/видео галереи на MODx Revo

В этой статье мы сделаем галерею с фото и видео материалами для нашего сайта на MODx Revo, с возможностью полноэкранного просмотра изображений, приятного чтения.

  • Вступление
  • Установка дополнения Gallery
  • Создание шаблона и ресурса Галерея
  • Создание альбома и чанка вывода
  • Добавим страницу в навигацию сайта
  • Добавим возможность увеличивать и листать
  • Адаптируем галерею под видео
  • Заключение

Вступление

Важное примечание: я заранее набросал простые стили на элементы сайта, которые мы сейчас добавим. При непосредственном создании сайта стили накидываются уже на структурированные элементы, сейчас мы обучаемся организации «скелета» и смотреть способы и навыки стилизации мы не будем. Из прошлых уроков мы уже знаем, как создавать разные структурные элементы страниц и что значат конструкции в квадратных скобках.

В прошлом видео-уроке мы добавили AJAX пагинацию и поиск по тегам в блог, ниже будут полезные ссылки:

  • Ссылка на видео по этой статье.
  • Плейлист с уроками по MODx Revo.
  • Lightbox jquery.
  • Видео-урок по установке и базовой подготовке MODx Revo.
  • Скачать MODx Revo с официального сайта.
  • Notepad++ (работа с кодом).
  • FileZilla (работа с сервером).
  • Хостинг TimeWeb (бонус при регистрации по ссылке).

Установка дополнения Gallery

Начнём мы с установки дополнения, которое позволит нам удобно работать с изображениями: Пакеты -> установщик -> загрузить пакеты -> Gallery. Загрузим и установим его.

Создание шаблона и ресурса Галерея

Отлично, теперь создадим шаблон и страницу для нашей галереи. Шаблон: имя Галерея, категория Gallery (она создалась автоматически, после установки пакета Gallery), следующее содержание:

В содержимое мы поместим следующий код:

<!DOCTYPE html>
<html lang="ru">
[[$head]]
<body>
[[$header]]
<main>
[[*content]]
</main>
[[$footer1]]
[[$scripts1]]
</body>
</html>

Просто скопируем содержимое шаблона “Начальный шаблон”, который мы создавали в прошлых уроках.

Теперь создадим ресурс Галерея, присвоим ему только что созданный шаблон, псевдоним gallery, галочка “опубликован” и перейдём в настройки, снимем галочку “использовать HTML-редактор”, следующее содержание:

<div>
<div>
[[!pdoPage? 
&element=`Gallery` 
&limit=`3` 
&dir=`DESC` 
&album=`albumImages ` 
&ajaxMode=`button` 
&thumbTpl=`gallery-output-tpl` 
&totalVar=`gallery.total` 
&thumbWidth=`8000` 
&thumbHeight=`8000` 
&imageWidth=`8000` 
&imageHeight=`8000` 
&ajax=`1`
]]
</div>
[[!+page.nav]]
</div>

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

AJAX пагинация, которую мы добавили в прошлом видео-уроке.

Мы установили лимит картинок на страницу – 3, используемый альбом – albumImages, и шаблонирующий чанк вывода — gallery-output-tpl.

Создание альбома и чанка вывода

Создадим сам альбом: имя albumImages, галочки напротив активен и видимый. Загрузим в него 9 картинок, чтобы хватило на три страницы.

Далее мы создаём шаблонирующий чанк gallery-output-tpl, категория Gallery, следующее содержание:

<li>
<img src="[[+thumbnail]]" alt="[[+name]]" title="[[+description]]">
</li>

Так как мы выводим элементы альбома как список, отредактируем ресурс, обернув pdoPage в ul.

Не забудем тот факт, что мы не подключили скрипт, обеспечивающий работу AJAX пагинации к данной странице, перейдём в чанк

scripts и исправим это.

Добавим страницу в навигацию сайта

Отлично, сейчас у нас всё должно выводиться и листаться как нужно. Давайте сейчас добавим страницу Галерея в навигацию на нашем сайте.

Верхняя навигация

Редактируем чанк header, в нём лежим наша навигация:

<li><a href="[[++site_url]]gallery" title="Галерея">Галерея</a></li>

Наведём чистоту

Хорошо, теперь перенесём лишнее из содержания ресурса в его шаблон.

В ресурсе Галерея оставляем только:

[[!pdoPage? 
&element=`Gallery` 
&limit=`3` 
&dir=`DESC` 
&album=`albumImages` 
&ajaxMode=`button` 
&thumbTpl=`gallery-output-tpl` 
&totalVar=`gallery.total` 
&thumbWidth=`8000` 
&thumbHeight=`8000` 
&imageWidth=`8000` 
&imageHeight=`8000` 
&ajax=`1`
]]

Остальное переносим в шаблон:

…
<div>
<div>
<ul>
[[*content]]
</ul>
</div>
[[!+page.nav]]
</div>
…

Хлебные крошки

Не забудем добавить к нашей странице “хлебные крошки” и h2 заголовок, эти элементы присутствуют, например, в шаблоне Блог – просто скопируем их.

Теперь перейдём в чанк “navig-top” и дополним имеющийся код.

На этом этапе у нас все выводится и пагинация работает с AJAX.

Добавим возможность увеличивать и листать

Теперь мы добавим возможность увеличивать изображения и листать их.

Скачаем скрипт

Мы воспользуемся lightbox jqueru, скачаем его.

Закинем скрипт на хостинг

Закинем файлы на наш хостинг, lightbox.min.css – в папку css, lightbox.min.js – в папку js и содержимое папки Images закинем в папку images.

Подключим скрипт

Хорошо, теперь подключим этот стиль и скрипт к нашей странице Галерея. Для этого мы внесем следующий код в чанк head:

[[*id:is=`17`:then=`
<link rel="stylesheet" href="[[++site_url]]assets/components/css/lightbox.min.css" />
`]]

И следующий код в чанк scripts:

[[*id:is=`17`:then=`
<script src="[[++site_url]]assets/components/js/lightbox.min.js"></script>
`]]

Стоит заметить, что для работы скрипта требуется сам jqueru, у нас на сайте он уже подключён.

Внесем изменения в чанк вывода

Хорошо, нам осталось только дать скрипту понять, с чем ему нужно работать – отредактируем чанк вывода изображений gallery-output-tpl.

<li>
<a data-lightbox="roadtrip" href="[[+thumbnail]]" title="[[+name]]" alt="[[+name]]">
<img src="[[+thumbnail]]" alt="[[+name]]" title="[[+description]]">
</a>
</li>

На этом этапе увеличение изображений уже работает и мы также можем их листать влево – вправо.

А как быть, если нам нужно сделать вместо изображений видео?

Адаптируем галерею под видео

Перейдём в нашу галерею и сменим, например, вторую и девятую картинки на видео. Для этого мы в URL вставим ссылку на видео, в метках укажем, что это video.

Теперь перейдём в чанк вывода gallery-output-tpl и научим его различать фото и видео элементы, выводя их в разных шаблонах.

В этом нам поможет условие, если метка video – выводи как видео, иначе выводи как картинку.

Код будет выглядеть следующим образом:

<li>
[[+tags:is=`video`:then=`
<iframe src="[[+url]]" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
`:else=`
<a data-lightbox="roadtrip" href="[[+thumbnail]]" title="[[+name]]" alt="[[+name]]">
<img src="[[+thumbnail]]" alt="[[+name]]" title="[[+description]]">
</a>
`]]
</li>

Поздравляю, вы добавили галерею с фото и видео материалами к сайту на MODx Revo.

В следующем ролике мы добавим поиск по сайту.

Заключение

Работать с MODx очень удобно и мы убедились в этом на практике, наш ролик по этой теме на YouTube занимает всего 8 минут. Мы и дальше будем продолжать делиться с вами полезной информацией, разумеется, её аналоги можно было найти в интернете и ранее, но мы постараемся сэкономить ваше время, чтобы вы могли уделить больше времени самой разработке.

Вам нужно создать сайт или обновить его? — Не теряйте времени, обращайтесь к профессионалам!

ms2Gallery / Работа с фото, видео и файлами / Дополнения MODX / modstore.pro

  • Все дополнения
  • Работа с фото, видео и файлами

Улучшенная галерея miniShop2 для ресурсов любых типов.

фото miniShop2 галерея превью preview

1990 32.

10 28.43

за сайт

  • Проверено Modstore
  • Бесплатные будущие обновления
  • Работа на тестовом и публичном домене
  • 12 месяцев тех. поддержки

Добавить в корзину

Автор дополнения

Илья Уткин

Обычно отвечает в течение недели

siteExtra

Cборка для быстрого создания сайтов

reMessages

Система личных сообщений для пользователей

msRussianPost

Калькулятор стоимости и сроков доставки Почты России и EMS

  • Описание
  • История изменений

Версия 2. 0.12-pl

Дата выпуска 25.09.2020

Загрузки 4 404

Просмотры 37 924

Внимание, этот компонент требует версию PHP 5.6 или выше! Если ваш сайт использует PHP ниже требуемого, установка этого дополнения может его сломать.

Внимание, этот компонент требует версию MODX не ниже 2.3 !

Удобная галерея с предварительной генерацией превью при загрузке.

За счёт отсутствия динамического пережатия картинок при загрузке страницы, работает молниеносно и не использует дополнительные сниппеты типа phpthumbof.

Может заменять галерею miniShop2 и интегрироваться с Tickets.

Информация для галереи — SiteDash, возьмите под свой контроль свои сайты MODX

Галерея — это дополнение от matdave, впервые выпущенное 29 сентября 2022 г.

Описание пакета

Галерея — это динамическая дополнительная галерея для MODx Revolution. Это позволяет вам быстро и легко размещать галереи изображений, сортировать их, помечать тегами и отображать множеством способов во внешнем интерфейсе вашего сайта.

См. официальную документацию здесь: http://rtfm.modx.com/extras/revo/gallery

Важно: если у вас еще не установлена ​​Галерея 1.7.1 или выше, немедленно обновите ее!

Инструкции по использованию/установке

Установка через Управление пакетами.

Примечание: Перед обновлением обязательно сделайте резервную копию файлов галереи в расположении, указанном в системной настройке «gallery.files_path», так как это обновление перемещает хранилище файлов галереи в метод хранения, ориентированный на альбом.

Примечание : Параметры ввода для типа TV GalleryAlbumList работают только для Revolution 2.1.0-rc2 и более поздних версий.

Примечание . При перемещении серверов с установкой Галереи вам может потребоваться изменить следующие системные настройки:

  • галерея.core_path
  • галерея.assets_path
  • галерея.files_path
  • галерея.assets2l.files_url

    12

Детали

Разработчик(и)
матдав
Выпущено
29.09.2022
Первое появление
29.09.2022
Лицензия
GPLv2
Поддерживаемые базы данных
MySQL
Минимальные требования MODX
2

Выпуски галереи

Поставщик Подпись Выпущено
MODX. com 2.0.1-пл 2022-09-29 (2 месяца назад)
MODX.com 2.0.0-пл 2022-06-11 (5 месяцев назад)
MODX.com 1. 7.1-пл 2018-07-20 (4 года назад)
MODX.com 1.7.0-пл 2014-09-10 (8 лет назад)

Мы также видели 22 непроверенные версии используемой Галереи, но не перечисляем их, поскольку мы не смогли подтвердить, что они являются официальными выпусками из официального источника.

Список альбомов MODX Revo, страница

Задавать вопрос

спросил

Изменено 6 лет, 3 месяца назад

Просмотрено 271 раз

Я хочу разбить список альбомов на страницы с помощью Галереи. Попытка сделать это с помощью getPage. Для фотографий внутри альбома все работает идеально:

 [[!getPage?
        &element=`Галерея`
        &limit=`8`
        &album=`портфолио`
        &totalVar=`gallery.total`
        &thumbWidth=`180`
        &thumbHeight=`150`
        &containerTpl=`NewGalleryAlbumTpl`
        &thumbTpl=`NewGalItemThumb`
        &кэш=`0`
        &cache_expires=`0`
        &pageNavVar=`page.nav`
    ]]
<дел>
Страница [[+page]] из [[+pageCount]]
<ул>
[[!+page.nav]]
<дел>

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

 [[!getPage?
        &element=`галерея альбомов`
        &rowTpl=`rowTpl`
        &pageNavVar=`page.nav`
        &limit=`1`]]
<дел>
Страница [[+page]] из [[+pageCount]]
<ул>
[[!+page.nav]]
<дел>

Что я делаю не так?

  • modx
  • modx-revolution

Галерея не поддерживает getPage из коробки. Вы можете редактировать исходный код, но не очень перспективно.

Оставить комментарий

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *