Стиль списка для типов контента

+7
750

По мотивам этой темы.

На днях представлю большое количество разнообразных списков для типов контента — ну а пока выкладываю на общий суд один из стилей, который можно скачать в прикрепленном файле к этому посту. Дэмо смотреть тут

Изображение

Начиная с версии 2.15.1 InstantCms поддерживает пользовательские настройки для списков (если они предусмотрены в шаблоне). В данном шаблоне предусмотрены следующие настройки:

  1. {"cols": "2"} - количество колонок списка
  2. {"datepost": "true"} - Показывать дату в верхнем правом углу. Принимает значение true или false
  3. {"dbg": "#E30000"} - Фон лейбла с датой публикации
  4. {"random": "true"} - Включить рандомные цвета для тегов. Принимает значение true или false
  5. {"preset": "big"} - Пресет поля с изображением

Список будет работать и на версиях ниже 2.15.1

Предусмотрены настройки для приватных записей списка контента, а также для записей, имеющих в записи отмеченный чекбокс is_vip.

Данный стиль представлен больше для ознакомления и подойдет для версий 2.14 а также для шаблонов, у которых подключен bootstrap.

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

Демо смотреть тут.

Как установить:

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

  1. {"random":"true", "dbg": "#125DB9", "preset": "big", "cols": "2", "datepost": "true"}
Прикреплённый файл:
Скачать 6 Кбскачан 24 раза
+1
Алексей Т Алексей Т 18 дней назад #

То что надо и долго ждем

+1
Nikolay Nikolay 18 дней назад #

Хороший виджет!!! Есть вопрос как вместо (дней назад) втулить название категории?

+2
Make Make 18 дней назад #

Это не виджет. Название категории — никак. Запись может принадлежать не одной категории. В полноценном релизе будет возможность назначать поля для различных элементов в списке. 

+2
Nikolay Nikolay 18 дней назад #

Вот бы тогда ещё виджет типо такого.

+2
Make Make 18 дней назад #
+5
Fuze Fuze 18 дней назад #

Позанудствую) исключительно, чтобы всем стало лучше

  • Почему есть инлайн стили, если подключается grids.css?
  • Почему grids.css подключается так, а не через addTplCSS, где не надо указывать шаблон и работает наследование?
  • $list_opt['random'] == true. Если опции $list_opt['random'] нет, будет нотис. И что за странное сравнение, если надо точно true, то почему не три равно? почему не вот так: if(!empty($list_opt['random'])){… }
  • А если будут другие поля для показа в списке, что делаем?) Правильно, слушаем в комментах, что не работает))
  • Наконец, почему не SCSS и не все те переменные бутстрапа типа отступов, цветов и т.п.

И да. Я поддерживаю тех, кто говорил, что количество — не качество. Моё предложение — сделать для начала один новый стиль списка. По уму. Со своей стороны, я могу помочь ответами на вопросы, если таковые будут: тут в комментах или в темах на форуме. Да, это сложно, не быстро. Зато, говорят, респектуют за качество)

Всегда включайте показ всех ошибок и предупреждений PHP при разработке.

Да, и ещё можно юзать общепринятые методологии, например БЭМ. Я пытался, но времени на всё не хватило, каюсь, поленился)

+2
Make Make 18 дней назад #

Спасибо, все учту. Это пока не тянет на супер качество, собственно поэтому и выложил, чтобы собрать feedback

+2
Fuze Fuze 18 дней назад #

собственно поэтому и выложил, чтобы собрать feedback

Всё что знал, рассказал 🙂

0
Make Make 18 дней назад #

Вот с полями, которые пользователь отмечает для показа в списке, совсем не знаю, как лучше. Перебирать массив fields — это правильно. Но как быть, если поле нужно показать в определенной позиции, например сразу после заголовка посредством bootstrap элемента badges. Привязываться к селектору поля? Например класс поля может содержать top-right, тогда в списке можно прописать, что если у поля есть какой-то из нужных классов, то показать его -> вооон там. В общем, вопросов на самом деле много, буду занудствовать на форуме

+1
Fuze Fuze 18 дней назад #

Но как быть, если поле нужно показать в определенной позиции, например сразу после заголовка посредством bootstrap элемента badges.

Порядок вывода настраивается в админке же. По факту из нестандартного, это поле изображения для бэкграунда, его кстати тоже можно взять $item['fields'] и за ансетить потом, чтобы при переборе не вывелось. Остальные элементы — привязывать к родительскому элементу списка (можно же назвать как угодно, уникально) и от него уже строить правила CSS, например:

  1. <div class="content-item content-item__mysuperstyle">
  2. <div class="field ft_caption">Заголовок</div>
  3. </div>
  1. .content-item__mysuperstyle .ft_caption {
  2. // пишем свои стили
  3. }
  4.  

посредством bootstrap элемента badges

Так нам ведь необязательно присваивать классы, хотя возможность присваивать классы контейнерам полей есть с прошлой версии. В стилях написали стиль как badges для нужного вам элемента и вуаля. Тем более, используя SCSS это вообще на раз два.

0
Make Make 18 дней назад #

Ну вот, ещё + в базу знаний. Спасибо) 

+3
Fuze Fuze 18 дней назад #

Да, кстати, с иконками переключения стилей списков я попробую что-то решить в опциях, а то ради одной строчки править целый файл как то не очень.

+1
Алексей Т Алексей Т 18 дней назад #

Спасибо! Така как список ТК это почти пол дизайна самого сайта и очень не хватает разных стилей под типовые решения. Каталог, витрина магазина, домино сетка и так далее. Что то типа конструктора :)

0
Make Make 18 дней назад #

Алексей, ты всё грезишь конструкторами))) Поверь, когда начнешь редактировать руками, ты влюбиштся в это, и никаких конструкторов не нужно) 

+1
Fuze Fuze 18 дней назад #

Что то типа конструктора :)

Это я не умею)

+2
Panda58dev Panda58dev 18 дней назад #

Почему никто не любит кнопку «подробнее», что за дань metro-интерфейсу?))
(все стили не смотрел)

0
Make Make 18 дней назад #

На самом деле ее все любят, и я в том числе. Подробнее же сделать ну совсем не проблема, как-то так например

  1. <a class = "btn btn-primary" href = "<?php echo href_to($ctype['name'], $item['slug'].'.html'); ?>">Подробнее</a>

Можно сделать как раз таки опцию для списка — с включением кнопки. В-общем, сегодня на всю ночь закрываюсь в гараже с разными документациями 😀

+3
RSN RSN 18 дней назад #

Наконец нашелся человек занявшийся этим вопросом))

Три года я пытался обратить внимание разработчиков (писал и в комментариях и на форумах), что в каталоге почти не осталось нормальных рабочих слайдеров, актуальных, современных, стилей списков, виджетов для вывода списков контента...

С последними двумя (виджетами и списками) немного начало что то появляться) хотя конечно этого мало. 

Make, так держать!!!))… (желательно не забрасывать)))

+1
Make Make 18 дней назад #

Ну пока не рожу что-то более-менее рабочее, за другое не сажусь.OneBlock только обновлю щас 😬

+1
Алексей Т Алексей Т 18 дней назад #

Ребята смотрите, а почему бы не вынести настройки как в виджете список контента и поля которые надо выводить из настроек. Хорошее дело. Еще раз повторюсь, список контента это пол дела вида шаблона. Иногда я даже ставил магазин от Провиза что бы у меня список контента выглядел как по типу магаза))) 😬

+1
Fuze Fuze 18 дней назад #

А это что?

Изображение

+1
Алексей Т Алексей Т 18 дней назад #

Ну так то вы правы- тогда верстальщики Вам открыт путь для создания списков для ТК. Я вот тут начал накидывать свои мысли 

+2
Fuze Fuze 18 дней назад #

Первый и третий список делается штатно. Первый делается одной опцией — обтекание поля изображение. Третий — это стиль плитка.

Для второго надо лишь подкинуть пару стилей, даже файлы tpl править не надо.

+1
Make Make 18 дней назад #

Не, это практические тоже самое, что уже есть. Когда-то я вдохновился стилями от студии ThemeWay — они делали мега крутые вещи, но по каким-то причинам уже давно профили на маркетплейсах удалены. Если найду на старом ноуте, покажу — там из простого списка люди делали такой вид, как будто журнал листаешь. Очень круто. Поэтому и хочется сделать что-то удивительно яркое, цепляющее и нестандартное. Да, списки, плитки, таблицы — это уже классика, но на всех почти cms стандартно шаблонный стиль для контента — нет изюминки, фичи, которая бы цепанула раз и навсегда. Короче постараюсь сделать чтобы было круто, современно и креативно. И чтобы Fuze не краснел за код 😁

+2
Fuze Fuze 18 дней назад #

И чтобы Fuze не краснел за код

Пффф, подержите моё пиво. Что мне краснеть за чужой код, я за свой то не краснею 😂

0
Алексей Т Алексей Т 18 дней назад #

+1
Make Make 18 дней назад #

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

0
Make Make 18 дней назад #

Как-то на форуме поднимали эту тему, но так и не пришли к более менее рабочему решению

0
Loadырь Loadырь 18 дней назад #

Есть же поле «Категории контента» в списке полей в 2.15.1 github.com/instantsoft/icms2/blob/master/system/fields/category.php

0
Make Make 18 дней назад #

Да, точно, я его еще даже ни раз не попытался использовать) Спасибо, посмотрю

+1
Алексей Т Алексей Т 18 дней назад #

Оно появилось в крайнем обновлении. И вообще Инстант стал намного лучше с этими обновлениями. Быстрее и современней.

+2
Fuze Fuze 18 дней назад #

я его еще даже ни раз не попытался использовать) Спасибо, посмотрю

Начните с демо. Или в чистой установке оно добавлено для типа контента «Новости».

0
Casser Casser 18 дней назад #

Вот этот интересней вариант, более современный

Алексей Т Алексей Т 18 дней назад #
Комментарий удален
0
Эндрю Ua Эндрю Ua 13 дней назад #

не знаю как у кого но у меня на последней версии Инстант, полный треш, просто взрыв на странице, все разлетелось по частям… Изображение

Еще от автора

Виджет "Настраиваемый контент"
Виджет, который позволит выводить объявления или любой другой тип (афиша, события, каталог).
Большое обновление OneBlock + новогодние скидки
Большое обновление OneBlock до версии 1.3 + большие новогодние скидки с 20 декабря по 7 января
Анимированные SVG-волны для разделения секций в шаблоне Modern. Виджет
Любителям анимации посвящается...
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.