Появилась идея вывода новостей в таком виде:
Настроил 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 скушал такой код? Какие нужно настройки прописать или может чанки создать? Чтобы первый пункт списка был с классом, а остальные выводились без классов.
Вчера просидел целый вечер с этим пазлом и кроме ошибок в статье ничего увидел))
Заранее благодарен всем откликнувшимся!
Михаил 10.10.2015 14:23 #
&tplFirst — Имя чанка для первого ресурса в результатах.
Либо внутри чанка проверять номер итерации и добавлять класс.
[[!If? &subject=`[[+idx]]` &operator=`==` &operand=`1` &then=`block-box-first`]]
Александр 10.10.2015 15:14 #
Не совсем понял, как с этим справиться))
Я вчера сделал такой набросок, создал чанк и поместил его в шаблон:
С этим вариантом вылазят ошибки. Где-то не так что-то делаю.
Михаил, можете поделиться рабочим исходником, как бы сделали Вы?
Не прошу Вас писать полностью весь код, мне будет достаточно увидеть, какие части кода в какие параметры компонента заносить.
Спасибо большое!
Павел Романов 10.10.2015 16:55 #
Ставите dateAgo.
Делаете два чанка. Первый "first-item":
Второй "tpl-item":
Вызов:
Александр 10.10.2015 17:15 #
Как приятно, что есть такие отзывчивые люди, как Вы!
Как Вас отблагодарить?))
Павел Романов 10.10.2015 17:22 #
Александр 11.10.2015 12:20 #
Вид блока со статьями остался такой же:
Верстка теперь такая
Первый чанк «first-item.magazine»:
Здесь все хорошо, так как выводится всего один результат.
Второй чанк «tpl-item.magazine»:
Проблема именно в нем, так как результаты по логике должны выводится в списке
- ...
, а выводятся путем дублирования всего кода из чанка и ломается верстка.Вызов:
Павел, что-то можете посоветовать в этом случае? Какие могут быть решения?
Заранее благодарю!
Алексей Смирнов 12.10.2015 20:47 #
Александр 13.10.2015 11:59 #
Алексей Смирнов 13.10.2015 12:19 #
Александр 13.10.2015 14:32 #
Алексей Смирнов 13.10.2015 14:39 #
Обновляли страницу CTRL+F5?
Александр 13.10.2015 15:20 #
На скрине: take.ms/WZIY9 видно, что размножаются блоки и в каждом из них дублируется список с одним пунктом на один ресурс, это и есть поломанный вариант.
вместо этих блоков должен выводится ненумерованный список с пунктами в таком формате
То есть нужно как-то настроить pdoResource, чтобы он выводил результат в сам список, минуя дублирования блоков обвертки.
Алексей Смирнов 13.10.2015 16:14 #
Попробуйте следующий вариант:
И исправить шаблон для последующих чанков (мелких) tpl-item.magazine:
Если у вас будет до 4..5 элементов выводиться то можно, как я выше написал.
Если больше и будут какие-то нюансы, то сделать 2 снипета на странице вывода с разными чанками и TPL-ками.
Александр 13.10.2015 17:14 #
Александр 13.10.2015 17:36 #
Это происходит так, когда несколько раз подряд вставляется код на одной и той же странице. Подхватывается родитель, который указан в самом первом вызове снипета.
Алексей Смирнов 13.10.2015 17:53 #
как вы вызываете эти 3 блока с элементами?
Александр 13.10.2015 18:04 #
Алексей Смирнов 13.10.2015 18:07 #
toSeparatePlaceholders — Сохранение в плейсхолдеры с нумерацией.
Вам нужно поменять имена их. чтобы в каждом блоке они отличались.
Т.е. в первом: my_item_
во втором прописать my_item2_
в третьем my_item3_
Надеюсь, мысль понятна?
Александр 13.10.2015 18:23 #
Огромная благодарность Вам!
Алексей Смирнов 13.10.2015 18:37 #
Олег 18.09.2019 08:19 #