UdnlxPortfolio - ModX создаем страницу галерею

Для начала закачаем все наши фото в раздел "Файлы" в папку "img".

Далее создаем Новый документ "Наши работы" в админке ModX, в настройках ему ставим "Контейнер". Добавляем в него первый элемент "Работа001".

Переходим в "Шаблоны" и добавляем два новых:

- "Шаблон страницы наши работы" с содержанием.

Шаблон (символ "((" заменяем на две квадратные скобки)

<!DOCTYPE html>
<html lang="ru">
    <base href="/" />
    
(($HEAD))

<body>

(($HEADER))





	<div class="container-page-001 overlay-black">
		<div class="container-page-001-content">
		    <p class="container-page-001__title">((*pagetitle))</p>
		    <nav aria-label="breadcrumb">
            (($BREADCRUMBS))
            </nav> 
		</div>
	</div>





    ((*content:is=``:then=``:else=`
    <div class="container-page-002">
		<div class="container-page-002-content">
		    ((*content))
		</div>
	</div>
	`))
	
	
	
	
	
    <div class="container-page-003">
		<div class="container-page-003-content">
            <div class="container-page-003__items">
                ((!pdoResources?
    		    &parents=`14` 
    		    &depth=`0` 
    		    &limit=`0`
    		    &sortby=`{"createdon":"ASC"}`
    		    &includeTVs=`img_work` 
    		    &tpl=`galery_item_tpl`))
            </div>
		</div>
	</div>
	
	
	
	
	
(($FOOTER))

(($SCRIPT))

</body>
</html>

- и пустой шаблон "Элемент галереи Наши работы".

Переходим в "Элементы" - "Дополнительные поля" и добавляем новую TV "img_work" с подписью "Изображение", тип ввода "Изображение", параметры вывода "По умолчанию" и прицепляем эту TV к шаблону "Элемент галереи Наши работы".

Далее переходим на "Ресурсы" и странице "Наши работы" устанавливаем шаблон "Шаблон страницы наши работы", а первому элементу "Элемент галереи Наши работы", сохраняем и появившемуся полю "Дополнительные поля" - "Изображение" устанавливаем первую картинку.

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

Переходим в "Элементы" - "Чанки" и в чанке HEAD добавляем строку "<link rel="stylesheet" href="assets/css/jquery.fancybox.css">" для загрузки css галереи.

В чанке SCRIPT добавляем строки.

SCRIPT

<script src="assets/js/jquery.fancybox.js"></script>
<script>
$('[data-fancybox="gallery"]').fancybox({
    loop: false,
    autoFocus: true,
    backFocus: false,
    infobar: true
});
</script>

Далее скачиваем два файла и закачиваем их в наш проект в папки "css" и "js" соответственно.

Создаем чанк "galery_item_tpl", он может быть двух видов, когда сделать картинку бэкграундом и когда непосредственно изображением:

Картинка background (символ "((" заменяем на две квадратные скобки)

<a href="((+tv.img_work))" data-fancybox="gallery">
    <div class="container-page-003__items-image" style="background-image: url(((+tv.img_work)));">
    </div>
</a>

Картинка img (символ "((" заменяем на две квадратные скобки)

<a href="((+tv.image_galery))" data-fancybox="gallery">
<img class="container-page-003__items-img" src="((+tv.image_galery))" alt="((+description))">
</a>

И последний шаг, это добавим стилей для нашей галереи.

css при background

.container-page-003 {
    background-color: #ffffff;
    flex-grow: 1;}
.container-page-003-content {
    width: 1200px;
    margin: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    line-height: 1.2;}
.container-page-003__items {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;}
.container-page-003__items-image {
    margin: 10px;
    width: 350px;
    height: 300px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;}
.container-page-003__items-image img.container-page-003__items-image-img {
    width: 100%;
    height: auto;}



@media (max-width: 1200px) {
.container-page-003-content {
    width: 100%;}}

@media (max-width: 400px) {
.container-page-003__items-image {
    margin: 10px;
    width: 300px;
    height: 300px;}}

css при img

.container-page-003 {
    background-color: #ffffff;
    flex-grow: 1;}
.container-page-003-content {
    width: 1200px;
    margin: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    line-height: 1.2;}
.container-page-003-content p {
    margin: 0 0 7px 0;
    color: #000000;
    font-size: 16px;
    line-height: 1;
    text-align: justify;}
.container-page-003__items {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;}
.container-page-003__items-itm {
    display: flex;
    padding: 10px 0 10px 0;}
.container-page-003__items a {
    text-decoration: none;}
.container-page-003__items img.container-page-003__items-img {
    width: 290px;
    height: auto;
    padding: 10px;
    transition: 0.5s;}
.container-page-003__items img.container-page-003__items-img:hover {
    box-shadow: 0 0 7px #00000045;
    transition: 0.5s;}



@media (max-width: 1200px) {
.container-page-003-content {
    width: 100%;}
    
.container-page-003__items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;}}

 @media (max-width: 768px) {
.container-page-003__items-itm {
    display: flex;
    flex-direction: column;}}

На этом все, наша страница с галереей сделана.