Делаем уникальный вывод новостей - Isotope, Metro, Masonry

Вопросы
Итак ребята, хочу сделать свой сайт на Лайвстрите более уникальным. Давайте разберемся как можно подключить Isotope, Metro, Masonry вывод новостей на главной, а именно вывод блоками по методу описанному чуть ниже:

isotope.metafizzy.co/v1/demos/layout-modes.html



Давайте вместе подумаем как это реализовать, спасибо всем кто участвует в данной дискуссии.


Конечная цела, хочу реализовать уникальный вывод новостей, как на www.the-village.ru


Этот вопрос уже поднимался мною тут:
livestreet.ru/blog/paidorders/16856.html

Полезные ссылки:
habrahabr.ru/post/157279/
habrahabr.ru/sandbox/62655/
github.com/metafizzy/isotope
masonry.desandro.com

37 комментариев

avatar
Касательно Бутсрапа и Masonry есть у меня в блоге пара топиков — их вместе соединить осталось…
Для Изотопа и любого другого шаблона не думаю, что сильные различия будут. В любом случае, принцип сможете понять, а там проще будет.
avatar
Почитал Ваши топики на блоге касательно этйо темы. Не совсем все понял(
avatar
Что конкретно не поняли?
avatar
Подключать как понял)
avatar
Разные размеры топиков можно задать через css, прописав нужные классы в .tpl:

<div class="item {if $smarty.foreach.nTopicCycle.iteration % 2 == 0}even{/if}{else}{if $smarty.foreach.nTopicCycle.iteration % 3 == 0}third{/if}">


Соответственно, можно делать практически любой вид отображения топиков на главной странице.
avatar
yadi.sk/d/PfRzlUDObS6pP
avatar
спасибо за дельный совет.Сейчас на тестовом домене конкретно попробую как это реализовать
avatar
Ведает ли кто как можно реализовать «переключалку» выводов с сохранением в куки?
Например у нас 3 шаблона: topic_list.tpl (стандарт), topic_list_tile.tpl и topic_list_onlyheader.tpl и нужно между ними переключаться. Думал о skiswither-е, но наверное не совсем логично переключать весь скин ради одного шаблона.
avatar
Если посмотреть разметку The village, то станет видно, что у них просто три колонки на сайте.
avatar
поподробнее про колонки
avatar
Ребята, вопрос ещё открыт, я думаю много людей хочет кастомизировать вывод новостей на главную, помогите!

Давайте заплюсуем тему и выведем на главную страницу её)
avatar
Подключил изотоп, поиграться, но понял, что с превьюхами надо что-то другое делать. Как вариант, при написании поста админу/пользователю давать выбор какой размер превью будет нарезаться (чек бокс или еще че). Иначе, они все будут одно размера и их будет различать только заголовок поста или превиев текста.
avatar
Можно еще в списке топиков условие прописать на вывод определенных топиков разными размерами.
avatar
Сделать The Village так просто, при помощи масонри или изотопа, не получиться. При таком разнообразии миниатюр и неконтролируемом размещении постов в ленте переодически могут появляться пустые области.
avatar
а какие способы решения данной задачи Вы предложите?
avatar
Да я и сам не знаю, как решить такую задачую. Склоняюсь к мнению, что без контроля публикаций и каких-то доработок движка ничего не получиться.
avatar
Поясните, пожалуйста, если возможно. Я версткой не занимаюсь, поэтому сам оценить не могу. Я вижу квадраты. Разных размеров, но квадраты. В чем же заключается сложность?
avatar
Да так на пальцах и без иллюстраций может и не объясню толком, но попробую.

Вся проблема в количестве разнотипных миниатюр. Давайте посчитаем, чем богат The Village: огромная миниатюра с название топика на ней, большая миниатюра с названием топика под ней, мелкая миниатюра с превью топика слева и мелкая миниатюра персонального блога с авой пользователя и без превью. Итого — четыре типа миниатюр. И их расположение постоянно меняется на странице.

Как разделить топики в нашем случае? И сделать все на уровне шаблона?

Сделать разделение на коллективные и персональные — не проблема. Прописать при выводе списка топиков третий, пятый, десятый топики вывести большими миниатюрами — тоже не проблема. А что будет если персональный топик переместиться на место большой миниатюры?

Лучшее, что мы можем сделать шаблоном — это привязать каждый тип к своему месту, т.е. на листе бумаги прикинуть расположение плитки, так чтобы все хорошо ложилось и в списке топиков конкретно прописать — для первого элемента использовать одну миниатюру, для второго — другую и так далее. В такой схеме несколько нюансов: все страницы и всегда будут выглядеть одинаково (я про расположение элементов), сама сетка забивается под определенное количество элементов, т.е. поменять из конфига 10 топиков на страницу на 12 так просто не получится, и главное — каждую миниатюру необходимо прорабатывать для всех размеров — к примеру, при добавлении топика запись из личного блога смещается на место большой миниатюры, соответственно ее необходимо изменить к такому виду. Плюс еще могут быть нюансы при разной высоте миниатюр, а она будет разной, т.к. длинны заголовков отличаются.

Вот, кстати, скрин сегодняшнего The Village для примера белых пятен:



Что-то много нагородил, надеюсь, хотя бы немного суть проблемы передал. :)
Да, это все — всего лишь мое мнение, возможно есть элегантное и простое решение, а я его просто не вижу.
avatar
Ваша мысль мне понятна. Кстати с пробелами выглядит не очень))) Виллидж видимо тоже не до конца продуман)
avatar
Выдавать размеры блоков по рейтингу самого топика, еще и стимул хорошо писать будет?
avatar
Тогда же сколько првеью придется делать…
avatar
В чем проблема, гдет 4, их и так делать, можно маштабировать, но не так получится.
avatar
Предположим… делаем три вида миниатюр: мелкий для топиков с рейтингом до 5, средний — для рейтинга 5-10 и крупный для рейтинга >10. Красивой хаотичности никак не получиться, когда один за одним будут следовать однотипные топики, а такие ситуации будут часто. Взгляните, к примеру, на оценки на главной ЛС сейчас…
avatar
Смотрите, конечно выставление рейтинга зависит от активности сайта, и наверняка вмешательство админа в рейтинг будет необходимо, особенно в выводе большого блока. Но все же на уровне шаблона это реально.

если -* или 0 маленькая
если 1 маленькая
если 3 больше среднего
если 2 средняя
если 4 больше среднего
если 5 средняя
если 9 больше среднего
если 10+ большая

Можно как выше говорили, но такой вариант не очень точно, может получится плохой пост в большой миниатюре, за то сетка будет ровной.
avatar
Вот только с погинацией могут возникнуть проблемы, т.к. количество постов меняется постоянно, соответственно может быть две большие миниатюры на страницу.
avatar
Десять различных миниатюр делать? Админином минусовать или плюсовать посты ради поддержания сетки?

В таком варианте, по-моему, самая большая вероятность появления дыр в сетке.
avatar
Вполне, надо пробовать. Зачем 10, всего 4 миниатюры. Минусовать или плюсовать да, придется, даже если будет контроль сетки «Галкой» на php вмешательство требует, только в этом случае движей больше.
avatar
Ну, влиять на сетку оценкой — это никуда не годиться, вся суть ЛС потеряется и пользователи спасибо не скажут. А если на несколько единиц потребуется рейтинг изменить? Доп. плагины? А если потом подкинут оценок топику другие пользователи? Постоянный контроль? А что с остальными страницами? Что будет на второй, третьей, в блогах?
avatar
Не, не, контролировать придется только большую миниатюру, остальные выстроятся автоматом, более менее корректно. Можно ее например выдавать интерацией на 2, все равно топики в ленте обновляются, даже если туда неоченский пост попадет он от туда уйдет.
avatar
Несколько единиц через Mysql ток, но не быстро это.
avatar
Попробуйте. :)
avatar
Отвечу в эту ветку, что бы комментарий не потерялся.

Смотрите, вы в своих прошлых комментариях почти нашли правильное решение:
1) Нужно для каждого топика создавать все виды превью.
2) Если топик набирает много комментов, или большой рейтинг — то пытаемся выводить этот топик с большой превьюшкой.
3) Если существует несколько топиков, с большим рейтингом или количеством комментариев, то добавляем их в одномерный массив, и при каждом обновлении странички с помощью случайного генератора определяем какой именно пост выйдет с большой превьюшкой.
4) Да, нужно заранее прорисовать сетку, иначе ничего вообще не получится. Разнообразие вывода топиков мы будем получать благодаря случайной выборке из массива топиков.
5) Для такого вывода нужно отказаться от вывода топиков по дате в порядке убывания. Просто нужно будет задавать в конфиге что «последние 10 топиков выводятся на 1 странице», и выводить их в хаотичном порядке.
6) Для всяких «спецпроектов» и «эксклюзивов» предусмотреть возможность приоритетного вывода большой превью.
7) Чтобы страница каждый раз создавалась чуть по другому, нужно добавить все варианты верстки в одномерный массив, и при генерации страницы доставать случайную верстку.
8) Чтобы не делать 10 вариантов верстки достаточно сделать один, а потом «отзеркалить» его в разных вариантах. Ну или сделать ОГРОМНЫЙ макет, и поделить его на сектора одного размера.


Надеюсь я смог помочь. :-)
avatar
Собственно, вы пришли к такому же мнению, что и я:

Склоняюсь к мнению, что без контроля публикаций и каких-то доработок движка ничего не получиться.

Ну а пути реализации могут быть разными, факт — одним шаблоном здесь вряд ли обойдется.
avatar
Чисты пхп. Результат:


отображение проходит по массиву:
$size = array( array('featured','featured'), array('small','small','featured'), array('featured','small','small'),  array('small','small','featured') ) ;

элементы можно менять как угодно. Тут надо придумать как добавить большое превью на 2 сектора, и мини статью из персонального блога.
avatar
Ребята, вопрос остается открытым
avatar
Наткнулся ещё на одну интересную статейку
habrahabr.ru/post/157279/
avatar
Или вот скрипт masonry.desandro.com/
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.