Вывод ресурсов из категорий в журнальном виде (Magazine)

Версия MODX: Все

Приветствую!
Появилась идея вывода новостей в таком виде:
Вывод статей в журнальном виде

Настроил HTML и CSS на своем сайте на этой странице: best-tv-goods.ru/magazine-home.html
Вывод статей на моем сайте

Код HTML:

<div class="block-box">
	<div class="block-box-title">Lastest News</div>
	<div class="block-box-1">
		<ul>
			<li class="block-box-first">
				<div class="block-box-img">
					<a href="http://2code.info/demo/themes/logger/news/lorem-quis-bibendum-auctor-nisi-elit/" title="lorem quis bibendum auctor, nisi elit" rel="bookmark">
					<i class="fa fa-image"></i>
					<img alt="lorem quis bibendum auctor, nisi elit" width="345" height="165" src="http://2code.info/demo/themes/logger/news/wp-content/uploads/2014/04/8839498454_35ab48f554_h-345x165.jpg">										</a>
				</div>

				<div class="block-box-content">
					<a href="http://2code.info/demo/themes/logger/news/lorem-quis-bibendum-auctor-nisi-elit/" title="lorem quis bibendum auctor, nisi elit" rel="bookmark">lorem quis bibendum auctor, nisi </a>
					<span><i class="fa fa-user"></i>by : <a href="http://2code.info/demo/themes/logger/news/author/logger/" title="Posts by logger" rel="author">logger</a></span>
					<span><i class="fa fa-clock-o"></i>April 29, 2014</span>
					<div class="clearfix"></div>
					<p>Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus ...</p>
					<a class="button-default post-more" href="http://2code.info/demo/themes/logger/news/lorem-quis-bibendum-auctor-nisi-elit/" title="lorem quis bibendum auctor, nisi elit" rel="bookmark">Continue Reading</a>
				</div>
			</li>
			
			<li>
				<div class="block-box-img">
					<a href="http://2code.info/demo/themes/logger/news/lorem-ipsum-proin-gravida-nibh/" title="Lorem Ipsum, Proin gravida nibh" rel="bookmark">
					<i class="fa fa-image"></i>
					<img alt="Lorem Ipsum, Proin gravida nibh" width="130" height="70" src="http://2code.info/demo/themes/logger/news/wp-content/uploads/2014/04/8788868839_b69ee29188_h-130x70.jpg">										</a>
				</div>
				<div class="block-box-content">
					<a href="http://2code.info/demo/themes/logger/news/lorem-ipsum-proin-gravida-nibh/" title="Lorem Ipsum, Proin gravida nibh" rel="bookmark">Lorem Ipsum, Proin gravida nibh</a>
					<span><i class="fa fa-user"></i>by : <a href="http://2code.info/demo/themes/logger/news/author/logger/" title="Posts by logger" rel="author">logger</a></span>
					<span><i class="fa fa-clock-o"></i>April 29, 2014</span>
				</div>
			</li>
			<li>
				<div class="block-box-img">
					<a href="http://2code.info/demo/themes/logger/news/reviews-bottom-and-full-width/" title="Reviews Bottom and Full Width" rel="bookmark">
					<i class="fa fa-image"></i>
					<img alt="Reviews Bottom and Full Width" width="130" height="70" src="http://2code.info/demo/themes/logger/news/wp-content/uploads/2014/04/10096339524_6947f9b28c_h-130x70.jpg">										</a>
				</div>
				<div class="block-box-content">
					<a href="http://2code.info/demo/themes/logger/news/reviews-bottom-and-full-width/" title="Reviews Bottom and Full Width" rel="bookmark">Reviews Bottom and Full Width</a>
					<span><i class="fa fa-user"></i>by : <a href="http://2code.info/demo/themes/logger/news/author/logger/" title="Posts by logger" rel="author">logger</a></span>
					<span><i class="fa fa-clock-o"></i>April 29, 2014</span>
				</div>
			</li>
			<li>
				<div class="block-box-img">
					<a href="http://2code.info/demo/themes/logger/news/reviews-top-and-half-width/" title="Reviews Top and Half Width" rel="bookmark">
					<i class="fa fa-image"></i>
					<img alt="Reviews Top and Half Width" width="130" height="70" src="http://2code.info/demo/themes/logger/news/wp-content/uploads/2014/04/11772269993_00c1ae7005_h-130x70.jpg">										</a>
				</div>
				<div class="block-box-content">
					<a href="http://2code.info/demo/themes/logger/news/reviews-top-and-half-width/" title="Reviews Top and Half Width" rel="bookmark">Reviews Top and Half Width</a>
					<span><i class="fa fa-user"></i>by : <a href="http://2code.info/demo/themes/logger/news/author/logger/" title="Posts by logger" rel="author">logger</a></span>
					<span><i class="fa fa-clock-o"></i>April 29, 2014</span>
				</div>
			</li>
		</ul>
		<div class="clearfix"></div>
	</div>
</div>

Код выше нужно каким-то образом воткнуть в pdoTools в один из его компонентов (pdoResources, pdoPage) только я не знаю в какой именно.

По коду выше можно увидеть, что вывод статей реализован с помощью списков, при чем первый пункт списка имеет класс «block-box-first», он выводит самую большую картинку с аннотацией статьи. И остальные списки идут без классов, они выводятся справа по 3 шт. в столбик.

Как сделать так, чтобы pdoTools скушал такой код? Какие нужно настройки прописать или может чанки создать? Чтобы первый пункт списка был с классом, а остальные выводились без классов.

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

Заранее благодарен всем откликнувшимся!

Александр
13.10.15 в 14:10

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

Михаил 10.10.2015 14:23 #

Из документации:
&tplFirst — Имя чанка для первого ресурса в результатах.
Либо внутри чанка проверять номер итерации и добавлять класс.
[[!If? &subject=`[[+idx]]` &operator=`==` &operand=`1` &then=`block-box-first`]]
Комментарий был изменён 10.10.2015 в 14:25

Александр 10.10.2015 15:14 #

Спасибо за ответ, Михаил!
Не совсем понял, как с этим справиться))

Я вчера сделал такой набросок, создал чанк и поместил его в шаблон:

[[pdoResources?
	&limit=`5`
	&parents=`5`
	&includeTVs=`image`
	&hideContainers=`1`
	&includeContent=`1`
	&tplWrapper=`@INLINE 
	<ul>
        	 [[+output]]
	</ul>`
	&tplFirst=`@INLINE 
	<li class="block-box-first">
    	<div class="block-box-img">
    		<a href="[[++site_url]][[~[[+id]]]]" title="lorem quis bibendum auctor, nisi elit" rel="bookmark">
    		<i class="fa fa-image"></i>
    		<img alt="lorem quis bibendum auctor, nisi elit" width="345" height="165" src="[[+tv.image:phpthumbon=`w=345&h=165&zc=1`]]">										</a>
    	</div>	
        
		<div class="block-box-content">
			<a href="http://2code.info/demo/themes/logger/news/lorem-quis-bibendum-auctor-nisi-elit/" title="lorem quis bibendum auctor, nisi elit" rel="bookmark">lorem quis bibendum auctor, nisi </a>
			<span><i class="fa fa-user"></i>by : <a href="http://2code.info/demo/themes/logger/news/author/logger/" title="Posts by logger" rel="author">logger</a></span>
			<span><i class="fa fa-clock-o"></i>April 29, 2014</span>
			<div class="clearfix"></div>
			<p>Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus ...</p>
			<a class="button-default post-more" href="http://2code.info/demo/themes/logger/news/lorem-quis-bibendum-auctor-nisi-elit/" title="lorem quis bibendum auctor, nisi elit" rel="bookmark">Continue Reading</a>
		</div>	
	
	</li>`
	&tplLast=`<li>
	
	    <div class="block-box-img">
			<a href="http://2code.info/demo/themes/logger/news/lorem-ipsum-proin-gravida-nibh/" title="Lorem Ipsum, Proin gravida nibh" rel="bookmark">
			<i class="fa fa-image"></i>
			<img alt="Lorem Ipsum, Proin gravida nibh" width="130" height="70" src="http://2code.info/demo/themes/logger/news/wp-content/uploads/2014/04/8788868839_b69ee29188_h-130x70.jpg">										</a>
		</div>
		<div class="block-box-content">
			<a href="http://2code.info/demo/themes/logger/news/lorem-ipsum-proin-gravida-nibh/" title="Lorem Ipsum, Proin gravida nibh" rel="bookmark">Lorem Ipsum, Proin gravida nibh</a>
			<span><i class="fa fa-user"></i>by : <a href="http://2code.info/demo/themes/logger/news/author/logger/" title="Posts by logger" rel="author">logger</a></span>
			<span><i class="fa fa-clock-o"></i>April 29, 2014</span>
		</div>
	
	</li>`
]]

С этим вариантом вылазят ошибки. Где-то не так что-то делаю.
Михаил, можете поделиться рабочим исходником, как бы сделали Вы?
Не прошу Вас писать полностью весь код, мне будет достаточно увидеть, какие части кода в какие параметры компонента заносить.

Спасибо большое!

Павел Романов 10.10.2015 16:55 #

Не нужно все пихать в вызов — так и запутаться несложно ))
Ставите dateAgo.
Делаете два чанка. Первый "first-item":

<li class="block-box-first">
	<div class="block-box-img">
		<a href="[[+uri]]" title="[[+pagetitle]]" rel="bookmark">
		 <i class="fa fa-image"></i>
		 <img alt="[[+pagetitle]]" width="345" height="165" src="[[+tv.image]]" />
		</a>
	</div>
	 <div class="block-box-content">
		 <a href="[[+uri]]" title="[[+pagetitle]]">[[+pagetitle]]</a>
		<span><i class="fa fa-user"></i>by : [[+createdby:userinfo=`fullname`]]</span>
		<span><i class="fa fa-clock-o"></i>[[+publishedon:dateAgo=`{"dateFormat":"j F Y"}`]]</span>
		<div class="clearfix"></div>
		<p>[[+content:ellipsis=`300`]]</p>
		<a class="button-default post-more" href="[[+uri]]" rel="bookmark">Continue Reading</a>
	</div>	
</li>

Второй "tpl-item":

<li>
	<div class="block-box-img">
		<a href="[[+uri]]" title="[[+pagetitle]]" rel="bookmark">
		<i class="fa fa-image"></i>
		<img alt="[[+pagetitle]]" width="130" height="70" src="[[+tv.image]]" />
		</a>
	</div>
	<div class="block-box-content">
		<a href="[[+uri]]" title="[[+pagetitle]]" rel="bookmark">[[+pagetitle]]</a>
		<span><i class="fa fa-user"></i>by : [[+createdby:userinfo=`fullname`]]</span>
		<span><i class="fa fa-clock-o"></i> [[+publishedon:dateAgo=`{"dateFormat":"j F Y"}`]]</span>
	</div>
</li>

Вызов:

[[pdoResources?
&limit=`4`
&parents=`5`
&includeTVs=`image`
&hideContainers=`1`
&includeContent=`1`
&tplWrapper=`@INLINE <ul>[[+output]]</ul>`
&tplFirst=`first-item`
&tpl=`tpl-item`
&sortby=`publishedon`
]]

Комментарий был изменён 10.10.2015 в 16:56

Александр 10.10.2015 17:15 #

Павел, все получилось!!! Я безумно благодарен Вам! :)
Как приятно, что есть такие отзывчивые люди, как Вы!
Как Вас отблагодарить?))
1. Павел Романов 10.10.2015 17:22 #
  
  Не за что ))

Александр 11.10.2015 12:20 #
Заменил верстку, первый вариант не подошел и встретился с другой проблемой ))

Вид блока со статьями остался такой же:

Верстка теперь такая

Первый чанк «first-item.magazine»:
Здесь все хорошо, так как выводится всего один результат.
```
<div class="big_post col-lg-6 col-md-6 col-sm-6 col-xs-6">
	<div class="block_img_post">
		<img alt="[[+pagetitle]]" src="[[+tv.image:phpthumbon=`w=345&h=165`]]">
	</div>

	<div class="inner_big_post">
		<div class="title_post">
			<a href="[[+uri]]" title="[[+pagetitle]]" rel="bookmark"><h4>[[+pagetitle]]</h4></a>
		</div>

		<div class="big_post_content">
			<p>[[+introtext:ellipsis=`300`]]</p>
		</div>

		<div class="post_date">
			<em><i class="fa fa-clock-o"></i>  <a href="[[+uri]]">[[+publishedon:dateAgo=`{"dateFormat":"j F Y"}`]]</a></em>
		</div>
	</div>
</div>
```
Второй чанк «tpl-item.magazine»:
Проблема именно в нем, так как результаты по логике должны выводится в списке
- ...
, а выводятся путем дублирования всего кода из чанка и ломается верстка.
```
<div class="small_list_post col-lg-6 col-md-6 col-sm-6 col-xs-6">
    <ul>
		<li class="small_post clearfix">
			<div class="img_small_post">
				<img alt="[[+pagetitle]]" src="[[+tv.image:phpthumbon=`w=130&h=70`]]">
			</div>
			<div class="small_post_content">
				<div class="title_small_post">
					<a href="[[+uri]]" title="[[+pagetitle]]" rel="bookmark"><h5>[[+pagetitle]]</h5></a>
				</div>
				<div class="post_date"><em><i class="fa fa-clock-o"></i>  [[+publishedon:dateAgo=`{"dateFormat":"j F Y"}`]]</em></div>
			</div>
		</li>
	<ul>
</div>
```
Вызов:
```
    [[pdoResources?
        &limit=`5`
        &parents=`16`
        &includeTVs=`image`
        &hideContainers=`1`
        &includeContent=`1`
        &tplWrapper=`@INLINE <div class="block_inner row">[[+output]]</div>`
        &tplFirst=`first-item.magazine`
        &tpl=`tpl-item.magazine`
        &sortby=`publishedon`
    ]]
```
Павел, что-то можете посоветовать в этом случае? Какие могут быть решения?
Заранее благодарю!
1. Алексей Смирнов 12.10.2015 20:47 #
  У вас не закрыт тег
  <ul>
  внизу… нужно
  </ul>
  Комментарий был изменён 12.10.2015 в 20:48
  1. Александр 13.10.2015 11:59 #
    
    Спасибо, Алекс) Однако это не помогло исправить ситуацию))
    1. Алексей Смирнов 13.10.2015 12:19 #
      
      А можно как-то увидеть что выводится? т.к. сложно понять что не так.
      1. Александр 13.10.2015 14:32 #
        
        Да, конечно, Алекс! Чет изображения перестали выводится из облака… Вот ссылочка на ресурс: best-tv-goods.ru/magazine-home.html
Алексей Смирнов 13.10.2015 14:39 #

у меня ничего не ломается.
Обновляли страницу CTRL+F5?
Александр 13.10.2015 15:20 #
Алекс, Вы не правильно поняли суть))
На скрине: take.ms/WZIY9 видно, что размножаются блоки и в каждом из них дублируется список с одним пунктом на один ресурс, это и есть поломанный вариант.
```
<div class="small_list_post col-lg-6 col-md-6 col-sm-6 col-xs-6"></div>
<div class="small_list_post col-lg-6 col-md-6 col-sm-6 col-xs-6"></div>
<div class="small_list_post col-lg-6 col-md-6 col-sm-6 col-xs-6"></div>
<div class="small_list_post col-lg-6 col-md-6 col-sm-6 col-xs-6"></div>
```
вместо этих блоков должен выводится ненумерованный список с пунктами в таком формате
```
<div class="small_list_post col-lg-6 col-md-6 col-sm-6 col-xs-6">
	<ul>
		<li class="small_post clearfix">
			<div class="img_small_post">
				<img src="img/news/featured-slider/2.jpg" alt="Consectetur adipisicing elit">
			</div>
			<div class="small_post_content">
				<div class="title_small_post">
					<a href="#"><h5> velit esse cillum dolore eu fugiat nulla pariatur</h5></a>
				</div>
				<div class="post_date"><em><a href="#">July 01, 2014</a></em></div>
			</div>
		</li>
	</ul>
</div>
```
То есть нужно как-то настроить pdoResource, чтобы он выводил результат в сам список, минуя дублирования блоков обвертки.
1. Алексей Смирнов 13.10.2015 16:14 #
  А… дык конечно будут дублироваться.
  Попробуйте следующий вариант:
  
  [[pdoResources? &limit=`5` &parents=`16` &includeTVs=`image` &hideContainers=`1` &includeContent=`1` &tplWrapper=`` &tplFirst=`first-item.magazine` &tpl=`tpl-item.magazine` &sortby=`publishedon` &toSeparatePlaceholders=`my_item_` ]] <div class="block_inner row"> [[+my_item_0]] <div class="small_list_post col-lg-6 col-md-6 col-sm-6 col-xs-6"> <ul> [[+my_item_1:notempty=`[[+my_item_1]]`]] [[+my_item_2:notempty=`[[+my_item_2]]`]] [[+my_item_3:notempty=`[[+my_item_3]]`]] [[+my_item_4:notempty=`[[+my_item_4]]`]] </ul> </div> </div>
  
  И исправить шаблон для последующих чанков (мелких) tpl-item.magazine:
  
  <li class="small_post clearfix"> <div class="img_small_post"> <img alt="[[+pagetitle]]" src="[[+tv.image:phpthumbon=`w=130&h=70`]]"> </div> <div class="small_post_content"> <div class="title_small_post"> <a href="[[+uri]]" title="[[+pagetitle]]" rel="bookmark"><h5>[[+pagetitle]]</h5></a> </div> <div class="post_date"><em><i class="fa fa-clock-o"></i> [[+publishedon:dateAgo=`{"dateFormat":"j F Y"}`]]</em></div> </div> </li>
  
  Если у вас будет до 4..5 элементов выводиться то можно, как я выше написал.
  Если больше и будут какие-то нюансы, то сделать 2 снипета на странице вывода с разными чанками и TPL-ками.
  Комментарий был изменён 13.10.2015 в 16:20
  1. Александр 13.10.2015 17:14 #
    
    Алекс, Вы очень сильно помогли в решении этого вопроса! Все заработало, как нужно. Я искренне благодарен Вам а также Романову Павлу за его содействие в самом начале! Вы отличные специалисты. Буду знать теперь к кому обращаться за платными услугами по MODX!
  2. Александр 13.10.2015 17:36 #
    
    Только что заметил, что если указываешь другого родителя в pdoResources, например "&parents=`5`", то все равно выводятся все ресурсы из родителя под идентификатором «16». Дублирую ссылку — best-tv-goods.ru/magazine-home.html
    Это происходит так, когда несколько раз подряд вставляется код на одной и той же странице. Подхватывается родитель, который указан в самом первом вызове снипета.
    Комментарий был изменён 13.10.2015 в 17:49
Алексей Смирнов 13.10.2015 17:53 #

А как вы логически строите страницу? т.е. в 3х местах вызываете для ВСЕХ товаров, для медицины, для ухода (это 3 разных ID)?<br />
как вы вызываете эти 3 блока с элементами?
Комментарий был изменён 13.10.2015 в 17:54

Александр 13.10.2015 18:04 #

Вот такой вывод:

<div class="block_posts">
	<div class="block-box-title">Все обзоры</div>
	

        [[pdoResources?
            &limit=`5`
            &parents=`16`
            &includeTVs=`image`
            &hideContainers=`1`
            &includeContent=`1`
            &tplWrapper=``
            &tplFirst=`first-item.magazine`
            &tpl=`tpl-item.magazine`
            &sortby=`publishedon`
            &toSeparatePlaceholders=`my_item_`
        ]]
    
    <div class="block_inner row">
        [[+my_item_0]]
    
        <div class="small_list_post col-lg-6 col-md-6 col-sm-6 col-xs-6">
            <ul>
            [[+my_item_1:notempty=`[[+my_item_1]]`]]
            [[+my_item_2:notempty=`[[+my_item_2]]`]]
            [[+my_item_3:notempty=`[[+my_item_3]]`]]
            [[+my_item_4:notempty=`[[+my_item_4]]`]]
            </ul>
        </div>
    </div>

		<div class="clearfix"></div>
	
</div>



<div class="block_posts">
	<div class="block-box-title">Здоровье и медицина</div>
	

        [[pdoResources?
            &parents=`5`
            &limit=`5`
            &includeTVs=`image`
            &hideContainers=`1`
            &includeContent=`1`
            &tplWrapper=``
            &tplFirst=`first-item.magazine`
            &tpl=`tpl-item.magazine`
            &sortby=`publishedon`
            &toSeparatePlaceholders=`my_item_`
        ]]
    
    <div class="block_inner row">
        [[+my_item_0]]
    
        <div class="small_list_post col-lg-6 col-md-6 col-sm-6 col-xs-6">
            <ul>
            [[+my_item_1:notempty=`[[+my_item_1]]`]]
            [[+my_item_2:notempty=`[[+my_item_2]]`]]
            [[+my_item_3:notempty=`[[+my_item_3]]`]]
            [[+my_item_4:notempty=`[[+my_item_4]]`]]
            </ul>
        </div>
    </div>

		<div class="clearfix"></div>
	
</div>

<div class="block_posts">
	<div class="block-box-title">Товары для красоты и уходу за собой</div>
	

        [[pdoResources?
            &limit=`5`
            &parents=`2`
            &includeTVs=`image`
            &hideContainers=`1`
            &includeContent=`1`
            &tplWrapper=``
            &tplFirst=`first-item.magazine`
            &tpl=`tpl-item.magazine`
            &sortby=`publishedon`
            &toSeparatePlaceholders=`my_item_`
        ]]
    
    <div class="block_inner row">
        [[+my_item_0]]
    
        <div class="small_list_post col-lg-6 col-md-6 col-sm-6 col-xs-6">
            <ul>
            [[+my_item_1:notempty=`[[+my_item_1]]`]]
            [[+my_item_2:notempty=`[[+my_item_2]]`]]
            [[+my_item_3:notempty=`[[+my_item_3]]`]]
            [[+my_item_4:notempty=`[[+my_item_4]]`]]
            </ul>
        </div>
    </div>

		<div class="clearfix"></div>
	
</div>

Алексей Смирнов 13.10.2015 18:07 #

А, ну ясно. Смотрите<br />
toSeparatePlaceholders — Сохранение в плейсхолдеры с нумерацией.
Вам нужно поменять имена их. чтобы в каждом блоке они отличались.
Т.е. в первом: my_item_
во втором прописать my_item2_
в третьем my_item3_
Надеюсь, мысль понятна?
Александр 13.10.2015 18:23 #

Алекс, супер!)) Теперь уж точно заработало как надо!)))
Огромная благодарность Вам!
Алексей Смирнов 13.10.2015 18:37 #

Пожалуйста. Успехов!
Олег 18.09.2019 08:19 #

Во, искал решение. Хочу отредачить у себя на сайте, внедрю видосы на автоматы с выводом https://adultmultclub.com/moneyslot/. Будет нормально работать.

Для добавления комментариев вы должны авторизоваться или зарегистрироваться.