Вывод статей (ресурсов) в MODx Revo.

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

Как это сделать вы сможете посмотреть в видео данного урока. Заметили иконки у ресурсов? Хотите сделать также? Тогда читайте статью “Как сделать иконку шаблона MODX Revo”.

Далее откройте ресурс “Тестовая статья” в браузере. Заметили странность? Вроде мы закачали все файлы шаблона, интегрировали шаблон, а верстка не отображается… Хм… Чтобы избавиться от данного бага нам необходимо в чанке “meta”, который мы создали на прошлом уроке дописать вот такую строчку:

<base href="[[++site_url]]" />

Теперь, когда вы откроете страничку “Тестовая статья” в браузере, то мы увидим, что у нас частично пропал header, так как на внутренних страницах он немного другой. Поэтому создадим чанк “headerInner” и разместим в нем код шапки внутренних страниц. Также не забудьте, что нужно поменять вызов чанка во всех шаблонах, кроме главной. Также советую убрать в чанк сайдбар с поиском и категориями. Я его убрал в чанк “blogSidebar”.

Теперь у нас все готово. Если вы откроете страницу блога в браузере, вы увидите, что посты могут быть разного типа. В нашем курсе, мы будем делать только посты с картинкой и текстовые.

Для того, чтобы прикрепить картинку к статье, нам нужно создать TV-поле, которое позволит нам это сделать. Для этого кликаем на вторую кнопку на панели элементов, заполняем следующее:

  • Имя – image
  • Подпись – изображение
  • Описание – не меньше 1100x602px
  • Категория – элементы страниц
  • Параметры ввода – изображение
  • Параметры вывода – по умолчанию
  • Доступно для шаблонов – Пост

Теперь мы можем прикрепить картинку к посту. Что мы и сделаем: перейдите в админке на ресурс “Тестовая статья” и на вкладке дополнительные поля прикрепите картинку (ее сначала нужно загрузить на сервер, см. видео). Думаю, вы поймете за что отвечает подпись, описание и категория.

Что ж отлично! Теперь в шаблоне “Пост” нам необходимо сделать вызов картинки и контента статьи.

Сколько же непонятных тегов! То, что я сделал, подробно я объясню на видео, вам нужно знать, что я воспользовался модификаторами ввода-вывода и вам нужно поставить компонент “phpthumbof” из официального репозитория.

После всех махинации, мы увидим следующее:

А в админке я еще добавил следующее:

Вроде пока все просто. Теперь на странице категории мы сделаем вывод наших статей. Там уже будут работать все ссылки. Для того, чтобы нам это сделать, нам необходимо создать чанк-шаблон (для такого рода чанков я обычно создаю категорию “tpl”). У меня он пока получился следующий (postTpl, здесь код не полный, см. на тестовом сайте):

<div class="post format-image">
  <div class="date-wrapper">
	<div class="date">
	  <span class="month">[[+publishedon:date=`%b`]]</span>
	  <span class="day">[[+publishedon:date=`%d`]]</span>
	</div>
  </div>
  <div class="format-wrapper">
	<a href="[[~[[+id]]]]"><i class="fa fa-image"></i></a>
  </div>
  <div class="post-content">
	<div class="post-media">
	  <img src="[[+tv.image]]" alt="[[+pagetitle:htmlent]]">
	</div>
	<h2 class="post-title">[[+pagetitle]]</h2>
	<ul class="meta">
	  <li>Posted By : Admin</li>
	  <li><a href="#">OffTopic</a>, <a href="#">Announcements</a></li>
	  <li><a href="#">3 Comments</a></li>
	</ul>
	<p>[[+introtext]]</p>
	<a href="[[~[[+id]]]]" class="le-button huge">Подробнее</a>
  </div>
</div>

Так как вывод мы будем делать с помощью сниппета pdoResources, то теги MODx у нас не со звездочкой, а со знаком “+”. Советую вам подробно почитать про:

После прочтения данных статей, вам все станет более менее ясно. А мы тем временем переходим к выводу наших статей. На странице у нас находится пагинация (разбивка на страницы), следовательно выводить посты мы будем с помощью сниппета-обертки “pdoPage” (документацию к нему вы найдете выше). Данный сниппет необходимо вызвать в шаблоне “Блог”, привожу код шаблона, который получился у меня (здесь код не полный, см. на тестовом сайте):

<html lang="ru">
  <head>
	[[$meta]]
  </head>  
  <body>
	<div class="wrapper">
	  [[$headerInner]]
	  <main id="blog" class="inner-bottom-xs">
		<div class="container">
		  <div class="row">
			<div class="col-md-9">
			  <div class="posts sidemeta">
				[[!pdoPage?
				&element=`pdoResources`
				&parents=`[[*id]]`
				&tpl=`postTpl`
				&includeTVs=`image`
				&hideContainers=`1`
				&limit=`10`
				]]
			  </div><!-- /.posts -->
			  <hr/>
			  [[!+page.nav]]
			</div>			
			<div class="col-md-3">
			  [[$blogSidebar]]
			</div>
		  </div>		  
		</div>
	  </main>
	  [[$footer]]
	</div>
	[[$scripts]]
  </body>
</html>

Подробно про все эти параметры я вам расскажу в видео. Также вы можете прочитать про них в официальной документации (благо она на русском). И я вас поздравляю! Наш шаблон блога больше не поменяется (если, конечно, не найдутся какие-нибудь баги). Он у нас получился универсальный и подойдет для любой категории блога, что очень даже неплохо. Не правда ли?

На этом все! Ждите следующего урока.

Вывод статей (ресурсов) в MODx Revo.

0 Число голосов: 13
4
5
1
13

Комментарии ()

  1. Константин 20 марта 2017, 11:00 # 0
    Почему-то в разделе Новости компании есть изображение, а когда проваливаешься в саму статью изображение пропадает
    1. Петропавловский Артем 20 марта 2017, 14:30 # 0
      Вывести можно так в шаблоне статьи:
      <img src="[[*image]]" alt="[[*pagetitle:htmlent]]">
      1. Константин 20 марта 2017, 14:36(Комментарий был изменён) # 0
        В демо доступе на сайт такой строки нет, тем не менее изображение выводится. И еще два момента. 1.Что это за Коммент и как сделать что бы около этого слова выводилось кол-во комментарием?2.Не корректно выводится дата.
        1. Петропавловский Артем 20 марта 2017, 14:41(Комментарий был изменён) # 0
          Количество комментариев — Как вывести количество комментариев Tickets, а дата некорректно выводится нужно сделать следующее: Чанк вывода pdoResources — [[+publishedon:date=`%b`]]Шаблон — [[+publishedon:strtotime:date=`%b`]]
          1. Константин 21 марта 2017, 07:50(Комментарий был изменён) # 0
            Вывод изображения исправил а дата по прежнему не корректно выводится
            1. Александр 31 декабря 2018, 09:28 # 0
              [[+publishedon:date=`%b`]] здесь буква некорректно прописана — надо `%d`
            2. Константин 21 марта 2017, 08:02 # 0
              После сохранения шаблона «статья», и обновления страницы дата появляется, но при последующем обновлении снова слетает
              1. Петропавловский Артем 21 марта 2017, 08:49 # 0
                хм… не должно, возможно, что-то в окружении не так (например, расширения PHP какого-то не хватает).
              2. Андрей 03 марта 2019, 12:29(Комментарий был изменён) # 0
                подскажите пожалуйста, а куда это надо прописывать? что бы дата корректно отображалась.
        2. Арт 20 марта 2017, 19:50 # 0
          Здравствуйте! У меня БД слетела. А делать все заново не хочется. Можно ли как то из FTP через папки вытащить файлы созданные шаблонов и чанков??
          1. Петропавловский Артем 21 марта 2017, 08:49 # 0
            Достать из файлов БД не получится
          2. Арт 20 марта 2017, 21:12 # 0
            Еще, можете скинуть код который вы пишите в шаблоне статьи и комментариях, а то сколько вбиваю, что-то да не работает…
            1. Петропавловский Артем 21 марта 2017, 08:50 # 0
              Весь код есть на тестовом сайте, доступ найдете в этой статье Интернет-магазин на MODx Revo
            2. Андрей 29 марта 2017, 17:18 # 0
              Подскажите пожалуйста, пытаюсь посадить галлерею с помощью TV полей и MIGX. Проблема в том, что к картинкам нужно ещё добавить подпись через «alt».<img alt=«Подпись „ src=“images/big/tile1.jpg» data-image=«images/big/tile1.jpg» style=«display:none»>Как выводить картинки примерно понятно, а можно ли ещё и подпись к каждой фотографии через TV делать?
              1. Сергей 20 мая 2017, 00:39 # 0
                Артём, стоит задача вывести последние статьи в слайдер, причём в каждом слайде по 2 статьи. Всего 3 слайда, 6 статей (точнее — анонсов статей). Слайдер — обычная бутстраповская карусель. Как это можно реализовать?
                1. Сергей 20 мая 2017, 01:42 # 0
                  Вот, пришла идейка, но не уверен, что сработает. Выводим через pdoResources с лимитом в 2 отдельно в каждый слайд, причём во втором слайде указываем параметр &offset=`2`, а в третьем &offset=`4`, и для всех слайдов &sortdir=`DESC`. Интересно, по документации &offset — пропуск результатов с начала, а вместе с &sortdir=`DESC` будет работать как пропуск результатов с конца? Жаль, что проверить сейчас не могу.
                2. Соломон 07 июня 2017, 12:17 # 0
                  Артем, подскажите, пожалуйста, а можно ли вывести теги в карточке товара MiniShop2? В других местах теги отлично выводятся. И в Каталоге, и в разделе каталога, и в поиске по тегам — товар находится и теги отображаются. А вот в самой карточке товара выводится вот такое «Теги: Array ( [0] => tags [1] => Тег_товара [2] => default [3] => [4] => autotag ) ». Уже всю голову сломал)) Не могу найти ответ. Заранее спасибо
                  1. Петропавловский Артем 07 июня 2017, 12:38 # 0
                    Если вы используете теги miniShop2 то вам поможет вывести их следующая конструкция:
                    [[!msOptions?name=`tags`&tplOuter=`@INLINE <p><strong>Tags:</strong> [[+rows]]</p>`&tplRow=`@INLINE <a href="search.html?tag=[[+value]]">[[+value]]</a> `]]
                    1. Соломон 07 июня 2017, 13:41 # 0
                      К сожалению не помогает. Вставил этот код в шаблоне Товар вместо [[!tolinks? &items=`[[*tags]]` &tpl=`tagRowTpl` &target=`12` ]]. Выводится выпадающий список: tags Тег_товара_1, Тег_товара_2 default autotag. Извиняюсь, если туплю))
                  2. Михаил 08 июня 2017, 03:26 # 0
                    Артем, спасибо за труд!пара вопросов:1. как в шаблоне MODX писать(и можно ли) параметры в квадратных скобках [ ], которые не должны быть обработаны парсером, например этот код
                    <a rel="prettyPhoto[gallery1]" ...><img src"..."></a>
                    галереи2. как обрабатывать (делать миниатюры phpthumbof, оборачивать кодом от галерей к примеру) картинки, вставляемые из админки в визуальном редакторе материала, а не с помощью дополнительного поля (т.е. картинки, которые находятся в [[*content]]) спасибо!
                    1. Павел 14 июня 2017, 16:52(Комментарий был изменён) # 0
                      Добрый день, проблема состоит в следующем, есть структура:каталог-->подкаталог--->постПроблема в том что при открытии каталога списком выводится все, подкаталоги и посты, а необходимо что бы выводились только подкаталоги и перейдя в них уже видеть список постов.Вывожу через GetPage
                      [[!getPage@pagi?
                      &elementClass=`modSnippet` 
                      &element=`getResources`
                      &tpl=`post`
                      &includeTVs=`1`
                      &processTVs=`1`
                      &parents=`[[*id]]`
                      &limit=`5`
                      ]]
                      1. Василий 25 октября 2017, 16:25 # 0
                        Одно непонятно, почему при выводе товаров на 3-м уровне при вызове [[!+pageCount]]
                        [[!pdoPage?
                            &parents=`[[*id]]`
                        выводит общее кол-во всех категории и подкатегорий?Надо сделать то, что умеет getPage, а именно На этой странице [[!+pageCount]] результатов. вопрос как это сделать в pdoPage?
                        1. Василий 07 ноября 2017, 19:12 # 0
                          Очень бы хотелось, чтобы эту функцию включили в pdoPage.
                          Есть ли способ, как расширить этот pageCount вручную для pdoPage?
                        2. Кирилл 29 декабря 2017, 12:50(Комментарий был изменён) # 0
                          Почему-то не работает. Загрузил 4 разных фотографии. 2 из них при вставке в статью выдают ошибку 500, а с двумя другими страница статьи загружается, но без фотографии. Как такое может быть? Вероятно результат зависит от размера исходного файла или соотношения сторон?
                          1. Кирилл 29 декабря 2017, 13:57(Комментарий был изменён) # 0
                            Убрал проверку на empty, которую автор делал в видео. Теперь страница статьи с двумя из 4-х фотографий загружается нормально, с картинками нужного размера, а с двумя другими по прежнему выдает ошибку 500. Сравнил фотографии — ни от размера файла, ни от соотношения сторон это не зависит. От чего тогда?
                            1. Кирилл 29 декабря 2017, 16:00 # 0
                              При удалении из кода :phpthumbof='w=889&h=450&zc=1&q=100' перестала вылазить ошибка 500 для двух оставшихся фотографий. Может быть он не нужен вообще? Посоветуйте что делать, пожалуйста.
                            2. Дмитрий 15 апреля 2020, 04:14(Комментарий был изменён) # 0
                              У меня вместо месяца выводятся несколько вопросов в ромбиках, как я понимаю это проблемы скодировкой, подскажите пожалуйста как изменить
                              1. Anastasiya 13 мая 2020, 18:44(Комментарий был изменён) # 0
                                Добрый вечер! Все показывает все ок, НО нажимаешь на след страницу и выкидывает на главную вместо блога… может я что-то где-то не увидела и не добавила?
                                <div class="col-md-12">
                                                                <div class="htc__loadmore__btn">
                                                                    [[!+page.nav]]
                                                                </div>
                                                            </div>
                                                            <div class="blog__wrap blog--page clearfix" id="pdopage">
                                                                [[!pdoPage?
                                				&element=`pdoResources`
                                				&parents=`[[*id]]`
                                				&tpl=`blogSP`
                                				&includeTVs=`imageBlog`
                                				&hideContainers=`1`
                                				&limit=`6`
                                				&tplPageWrapper=`@INLINE <ul class="pagination blog-pagination">[[+prev]][[+pages]][[+next]]</ul>`
                                				]]
                                                            </div>
                                                        </div>
                                1. Петропавловский Артем 15 мая 2020, 09:08 # 0
                                  Смотрите лог ошибок в браузере.
                                2. Виталий 21 мая 2020, 17:31(Комментарий был изменён) # 0
                                  <tr>
                                  				                <td>
                                  				                [[*ArticleImg1:!empty='<div class = "article">
                                  	                                <img class="NewsImg" src="[[*ArticleImg1]]" alt="[[*pagetitle]]">
                                                                  </div>']]
                                                                  </td>
                                                              </tr>
                                                              <tr>
                                                                  <td>
                                                                  <div class = "article">
                                  	                               <img class="NewsImg" src="[[*ArticleImg2]]" style="margin-top:10px; height:150px;Width:200px;border:1px solid #000;border-radius:5px; float:left;object-fit:cover;">
                                                                  </div>
                                                                  </td>
                                                              </tr>
                                                              <tr>
                                                                  <td>
                                                                  <div class = "article">
                                  	                               <img class="NewsImg" src="[[*ArticleImg3]]" style="margin-top:10px; height:150px;Width:200px;border:1px solid #000;border-radius:5px; float:left;object-fit:cover;">	               
                                  		                        </div>
                                  		                        </td>
                                  		                    </tr>
                                  Добрый день!Не выводится первая картинка вообще если использую [[*ArticleImg1:!empty...]]И не работает phpthumbof вообще приходится использовать стилиПочему так?тумбоф установил и он показан в менюшке слеваЗаранее спасибо за ответ
                                  1. TESTER 22 июня 2020, 11:16 # 0
                                    Добрый день как с помощью pdoTools из 10 категорий вывести последние новости по одному
                                    1. Петропавловский Артем 22 июня 2020, 12:20 # 0
                                      Можете сделать так: вывести сначала категории (глубина 1), в чанке категории сделать еще один вызов pdoResources с лимитом 1.
                                      1. TESTER 24 июня 2020, 04:13 # 0
                                        Артем можно пример у меня выводит только 1 новость из 1 категории 10 раз
                                        [[pdoResources?
                                            &parents=`2,3,4,5,8`
                                            &depth=`1`
                                            &tpl=`@INLINE 
                                                [[pdoResources?
                                                    &limit=`1`
                                                    &tpl=`@INLINE {$uri} <br/>`
                                                ]]
                                            `
                                        ]]

                                    Наши клиенты

                                    Многие компании уже доверяют нам. Будьте в их числе!

                                    Хотите реализовать проект?

                                    Контакты

                                    Напишите нам - мы расскажем вам много интересного!


                                    Пермь, ул. Крупской 34, офис 510