{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этой статье мы сделаем галерею с фото и видео материалами для нашего сайта на MODx Revo, с возможностью полноэкранного просмотра изображений. ","type":"unstyled","key":"b3rd3"},{"data":{"image":{"id":"5e84adf7c312bf0a386f9a6b"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"3fimm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вступление","type":"header-two","key":"7pt3q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"},{"length":7,"offset":224,"style":"ITALIC"}],"text":"Важное примечание: я заранее набросал простые стили на элементы сайта, которые мы сейчас добавим. При непосредственном создании сайта стили накидываются уже на структурированные элементы, сейчас мы обучаемся организации \"скелета\" и смотреть способы и навыки стилизации мы не будем. Из прошлых уроков мы уже знаем, как создавать разные структурные элементы страниц и что значат конструкции в квадратных скобках.","type":"unstyled","key":"as7k3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В прошлом видео-уроке мы добавили AJAX пагинацию и поиск по тегам в блог, ниже будут полезные ссылки:","type":"unstyled","key":"b9sqq"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":31,"offset":0}],"inlineStyleRanges":[],"text":"Ссылка на видео по этой статье.","type":"unordered-list-item","key":"4cg35"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":32,"offset":0}],"inlineStyleRanges":[],"text":"Плейлист с уроками по MODx Revo.","type":"unordered-list-item","key":"2q70b"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":16,"offset":0}],"inlineStyleRanges":[],"text":"Lightbox jquery.","type":"unordered-list-item","key":"aucri"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":55,"offset":0}],"inlineStyleRanges":[],"text":"Видео-урок по установке и базовой подготовке MODx Revo.","type":"unordered-list-item","key":"4bkji"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":39,"offset":0}],"inlineStyleRanges":[],"text":"Скачать MODx Revo с официального сайта.","type":"unordered-list-item","key":"d8h8m"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":27,"offset":0}],"inlineStyleRanges":[],"text":"Notepad++ (работа с кодом).","type":"unordered-list-item","key":"8vju"},{"data":{},"depth":0,"entityRanges":[{"key":6,"length":30,"offset":0}],"inlineStyleRanges":[],"text":"FileZilla (работа с сервером).","type":"unordered-list-item","key":"e31r7"},{"data":{},"depth":0,"entityRanges":[{"key":7,"length":50,"offset":0}],"inlineStyleRanges":[],"text":"Хостинг TimeWeb (бонус при регистрации по ссылке).","type":"unordered-list-item","key":"73bsd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Установка дополнения Gallery","type":"header-two","key":"7jst1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":51,"offset":88,"style":"ITALIC"}],"text":"Начнём мы с установки дополнения, которое позволит нам удобно работать с изображениями: Пакеты -> установщик -> загрузить пакеты -> Gallery. Загрузим и установим его.","type":"unstyled","key":"c97hi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создание шаблона и ресурса Галерея","type":"header-two","key":"865rm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":62,"style":"BOLD"}],"text":"Отлично, теперь создадим шаблон и страницу для нашей галереи. Шаблон: имя Галерея, категория Gallery (она создалась автоматически, после установки пакета Gallery), следующее содержание:","type":"unstyled","key":"61o28"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В содержимое мы поместим следующий код:","type":"unstyled","key":"421mi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"156nt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"1n3pk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"[[$head]] ","type":"blockquote","key":"4n74f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"edcs7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"[[$header]] ","type":"blockquote","key":"6snkb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"6gpv3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"[[*content]] ","type":"blockquote","key":"9rmbq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"3igmu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"[[$footer]] ","type":"blockquote","key":"fiuc9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"[[$scripts]] ","type":"blockquote","key":"ci51f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"8j43r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"64na"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6kr6u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":36,"style":"BOLD"}],"text":"Просто скопируем содержимое шаблона “Начальный шаблон”, который мы создавали в прошлых уроках.","type":"unstyled","key":"j6pl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":16,"style":"BOLD"},{"length":30,"offset":84,"style":"ITALIC"},{"length":28,"offset":154,"style":"ITALIC"}],"text":"Теперь создадим ресурс Галерея, присвоим ему только что созданный шаблон, псевдоним gallery, галочка “опубликован” и перейдём в настройки, снимем галочку “использовать HTML-редактор”, следующее содержание:","type":"unstyled","key":"9p6fq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"rfqf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"bhfip"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"[[!pdoPage? ","type":"blockquote","key":"44gfp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"&element=`Gallery` ","type":"blockquote","key":"e12hn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"&limit=`3` ","type":"blockquote","key":"aomic"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"&dir=`DESC` ","type":"blockquote","key":"b0jpj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"&album=`albumImages ` ","type":"blockquote","key":"5fg3e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"&ajaxMode=`button` ","type":"blockquote","key":"2ep50"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"&thumbTpl=`gallery-output-tpl` ","type":"blockquote","key":"a6nih"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"&totalVar=`gallery.total` ","type":"blockquote","key":"62f99"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"&thumbWidth=`8000` ","type":"blockquote","key":"bve9j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"&thumbHeight=`8000` ","type":"blockquote","key":"3kjsc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"&imageWidth=`8000` ","type":"blockquote","key":"7r04r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"&imageHeight=`8000` ","type":"blockquote","key":"gai0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"&ajax=`1` ","type":"blockquote","key":"a9a4f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"]] ","type":"blockquote","key":"551f7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"9iln2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"[[!+page.nav]] ","type":"blockquote","key":"c0j6c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"5m04o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3ia5g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":30,"style":"BOLD"},{"length":14,"offset":164,"style":"BOLD"}],"text":"Стоит заметить, мы используем pdoPage как инструмент вывода, а не стандартный, предлагаемый нам самим дополнением. Это делается для того, чтобы у нас работала наша AJAX пагинация, которую мы добавили в прошлом видео-уроке.","type":"unstyled","key":"be0hd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":43,"style":"BOLD"},{"length":11,"offset":68,"style":"BOLD"},{"length":18,"offset":111,"style":"BOLD"}],"text":"Мы установили лимит картинок на страницу – 3, используемый альбом – albumImages, и шаблонирующий чанк вывода - gallery-output-tpl.","type":"unstyled","key":"fufkn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создание альбома и чанка вывода","type":"header-two","key":"99r14"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":25,"style":"BOLD"},{"length":7,"offset":55,"style":"BOLD"},{"length":7,"offset":65,"style":"BOLD"}],"text":"Создадим сам альбом: имя albumImages, галочки напротив активен и видимый. Загрузим в него 9 картинок, чтобы хватило на три страницы.","type":"unstyled","key":"bnd80"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":36,"style":"BOLD"}],"text":"Далее мы создаём шаблонирующий чанк gallery-output-tpl, категория Gallery, следующее содержание:","type":"unstyled","key":"d0md3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

$\"[[+name]]\"$

","type":"blockquote","key":"9f066"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Так как мы выводим элементы альбома как список, отредактируем ресурс, обернув pdoPage в ul.","type":"unstyled","key":"52t0e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":72,"style":"BOLD"},{"length":7,"offset":122,"style":"ITALIC"}],"text":"Не забудем тот факт, что мы не подключили скрипт, обеспечивающий работу AJAX пагинации к данной странице, перейдём в чанк scripts и исправим это.","type":"unstyled","key":"fda3i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавим страницу в навигацию сайта","type":"header-two","key":"7nuil"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Отлично, сейчас у нас всё должно выводиться и листаться как нужно. Давайте сейчас добавим страницу Галерея в навигацию на нашем сайте.","type":"unstyled","key":"4r2km"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Верхняя навигация","type":"header-three","key":"9hn5o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":17,"style":"BOLD"}],"text":"Редактируем чанк header, в нём лежим наша навигация:","type":"unstyled","key":"5qsm3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Галерея

","type":"blockquote","key":"1iitu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Наведём чистоту","type":"header-three","key":"6jnep"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Хорошо, теперь перенесём лишнее из содержания ресурса в его шаблон.","type":"unstyled","key":"7tbk3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В ресурсе Галерея оставляем только:","type":"unstyled","key":"43i7m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"[[!pdoPage? ","type":"blockquote","key":"1vhhl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"&element=`Gallery` ","type":"blockquote","key":"d39th"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"&limit=`3` ","type":"blockquote","key":"7qanl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"&dir=`DESC` ","type":"blockquote","key":"bn24s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"&album=`albumImages` ","type":"blockquote","key":"a0al3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"&ajaxMode=`button` ","type":"blockquote","key":"3kriv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"&thumbTpl=`gallery-output-tpl` ","type":"blockquote","key":"40tvh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"&totalVar=`gallery.total` ","type":"blockquote","key":"v5c6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"&thumbWidth=`8000` ","type":"blockquote","key":"fsoip"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"&thumbHeight=`8000` ","type":"blockquote","key":"9hl9v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"&imageWidth=`8000` ","type":"blockquote","key":"3uimh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"&imageHeight=`8000` ","type":"blockquote","key":"581l6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"&ajax=`1` ","type":"blockquote","key":"e6eep"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"]]","type":"blockquote","key":"ag5b3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"1d2tl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Остальное переносим в шаблон:","type":"unstyled","key":"593so"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"… ","type":"blockquote","key":"78pkm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"8g6va"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"fr5ta"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"1m7r2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"[[*content]] ","type":"blockquote","key":"f46lh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"3st8q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"3h7fq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"[[!+page.nav]] ","type":"blockquote","key":"fqarm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"7pl1f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"…","type":"blockquote","key":"5v59f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Хлебные крошки","type":"header-three","key":"bpjph"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":37,"style":"BOLD"},{"length":12,"offset":56,"style":"BOLD"},{"length":4,"offset":117,"style":"BOLD"}],"text":"Не забудем добавить к нашей странице “хлебные крошки” и h1 заголовок, эти элементы присутствуют, например, в шаблоне Блог – просто скопируем их.","type":"unstyled","key":"2f351"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":23,"style":"BOLD"}],"text":"Теперь перейдём в чанк “navig-top” и дополним имеющийся код.","type":"unstyled","key":"ffpke"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":57,"style":"ITALIC"}],"text":"На этом этапе у нас все выводится и пагинация работает с AJAX.","type":"unstyled","key":"fl2e4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавим возможность увеличивать и листать","type":"header-two","key":"ctttc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь мы добавим возможность увеличивать изображения и листать их.","type":"unstyled","key":"4rvt1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Скачаем скрипт","type":"header-three","key":"93ogn"},{"data":{},"depth":0,"entityRanges":[{"key":8,"length":11,"offset":34}],"inlineStyleRanges":[],"text":"Мы воспользуемся lightbox jqueru, скачаем его.","type":"unstyled","key":"d1qju"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Закинем скрипт на хостинг","type":"header-three","key":"fsc0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":30,"offset":30,"style":"ITALIC"},{"length":28,"offset":62,"style":"ITALIC"},{"length":46,"offset":93,"style":"ITALIC"}],"text":"Закинем файлы на наш хостинг, lightbox.min.css – в папку css, lightbox.min.js – в папку js и содержимое папки Images закинем в папку images.","type":"unstyled","key":"emts5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подключим скрипт","type":"header-three","key":"1hagt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":112,"style":"BOLD"}],"text":"Хорошо, теперь подключим этот стиль и скрипт к нашей странице Галерея. Для этого мы внесем следующий код в чанк head:","type":"unstyled","key":"8o5sc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"[[*id:is=`17`:then=` ","type":"blockquote","key":"6062v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"cnk2o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"`]]","type":"blockquote","key":"bpenu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"90rl0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":23,"style":"BOLD"}],"text":"И следующий код в чанк scripts:","type":"unstyled","key":"a8f5p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"[[*id:is=`17`:then=` ","type":"blockquote","key":"94rjv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"b89ac"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"`]]","type":"blockquote","key":"dpg7v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"7phct"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":53,"style":"BOLD"}],"text":"Стоит заметить, что для работы скрипта требуется сам jqueru, у нас на сайте он уже подключён.","type":"unstyled","key":"e2pbk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Внесем изменения в чанк вывода","type":"header-three","key":"cuha"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":114,"style":"BOLD"}],"text":"Хорошо, нам осталось только дать скрипту понять, с чем ему нужно работать – отредактируем чанк вывода изображений gallery-output-tpl.","type":"unstyled","key":"2cm7v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"f5fo5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"ba9vj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" $\"[[+name]]\"$ ","type":"blockquote","key":"b5lfl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"9pgn9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"94v1p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"cq9pd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На этом этапе увеличение изображений уже работает и мы также можем их листать влево – вправо.","type":"unstyled","key":"8p7uk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"А как быть, если нам нужно сделать вместо изображений видео?","type":"unstyled","key":"93emm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Адаптируем галерею под видео","type":"header-two","key":"250kh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":29,"offset":93,"style":"ITALIC"}],"text":"Перейдём в нашу галерею и сменим, например, вторую и девятую картинки на видео. Для этого мы в URL вставим ссылку на видео, в метках укажем, что это video.","type":"unstyled","key":"aintl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":30,"style":"BOLD"}],"text":"Теперь перейдём в чанк вывода gallery-output-tpl и научим его различать фото и видео элементы, выводя их в разных шаблонах.","type":"unstyled","key":"7ah1j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":39,"style":"ITALIC"}],"text":"В этом нам поможет условие, если метка video – выводи как видео, иначе выводи как картинку.","type":"unstyled","key":"12b00"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Код будет выглядеть следующим образом:","type":"unstyled","key":"eiviv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"13rvi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"[[+tags:is=`video`:then=` ","type":"blockquote","key":"cqt9b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"egciv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"`:else=` ","type":"blockquote","key":"2ufki"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"4neu1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" $\"[[+name]]\"$ ","type":"blockquote","key":"7g8u8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"blockquote","key":"71fh8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"`]] ","type":"blockquote","key":"7gein"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"c8eqr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"24b24"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поздравляю, вы добавили галерею с фото и видео материалами к сайту на MODx Revo. В следующем ролике мы добавим поиск по сайту.","type":"unstyled","key":"53uri"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Заключение","type":"header-two","key":"2nqcs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Работать с MODx очень удобно и мы убедились в этом на практике, наш ролик по этой теме на YouTube занимает всего 8 минут. Мы и дальше будем продолжать делиться с вами полезной информацией, разумеется, её аналоги можно было найти в интернете и ранее, но мы постараемся сэкономить ваше время, чтобы вы могли уделить больше времени самой разработке.","type":"unstyled","key":"b9126"},{"data":{},"depth":0,"entityRanges":[{"key":9,"length":12,"offset":10}],"inlineStyleRanges":[],"text":"Вам нужно создать сайт или обновить его? - Не теряйте времени, обращайтесь к профессионалам!","type":"unstyled","key":"51ufg"},{"data":{},"depth":0,"entityRanges":[{"key":10,"length":17,"offset":10}],"inlineStyleRanges":[],"text":"Источник: Веб студия WITECH","type":"blockquote","key":"4b9s5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"pKFAFuhHj3wwn4Duj3EX"}],"entityMap":{"0":{"data":{"href":"https://youtu.be/4a_XfIO_M8A","url":"https://youtu.be/4a_XfIO_M8A"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://www.youtube.com/playlist?list=PLSVlsynQyg_tTzp8bsY2V0cKOLwTu5jGh","url":"https://www.youtube.com/playlist?list=PLSVlsynQyg_tTzp8bsY2V0cKOLwTu5jGh"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://lokeshdhakar.com/projects/lightbox2","url":"https://lokeshdhakar.com/projects/lightbox2"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://youtu.be/OWIr7DV2JqI","url":"https://youtu.be/OWIr7DV2JqI"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"href":"https://modx.com/download","url":"https://modx.com/download"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"href":"https://notepad-plus-plus.org/","url":"https://notepad-plus-plus.org/"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"href":"https://filezilla.ru/","url":"https://filezilla.ru/"},"mutability":"MUTABLE","type":"LINK"},"7":{"data":{"href":"http://timeweb.com/ru/services/hosting?utm_source=cj26301&utm_medium=timeweb&utm_campaign=timeweb-bring-a-friend","url":"http://timeweb.com/ru/services/hosting?utm_source=cj26301&utm_medium=timeweb&utm_campaign=timeweb-bring-a-friend"},"mutability":"MUTABLE","type":"LINK"},"8":{"data":{"href":"https://lokeshdhakar.com/projects/lightbox2","url":"https://lokeshdhakar.com/projects/lightbox2"},"mutability":"MUTABLE","type":"LINK"},"9":{"data":{"href":"https://witech.su/services/","url":"https://witech.su/services/"},"mutability":"MUTABLE","type":"LINK"},"10":{"data":{"url":"https://witech.su"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}