Forums / National / Russian / Вывод новостей в 3 колонки ...

Доброго времени суток Котоновцы. До этого был на WP и все устраивало случайно попробывал Cotonti и не могу оторватся ХЗ почему ). Ближе к делу подскажите кто знает как выводить новости на главной по 3 в ряду с миниатюрой картинки. 

А сам единичный блок новости должен содержаьб следующее:

Количество просмотров и комментариев забыл нарисовать ... 

Добавлено 14 часов спустя:

Хочу вывести картинку из админ панели по средствам создания доп поля :

1. Создаем экстраполе : 
название: newsimg
описание: newsimg

Добавить

2. в шаблон новости indexnews.tpl втавляем код типа где хотим видеть вывод:

Вывод поля: {PAGE_ROW_NEWSIMG};

3. Добавляем поле в шаблоны page.edit.tpl 

            <div class="col-md-6">
              <div class="form-group">
                <label>Произвольное поле</label>

{PAGEEDIT_FORM_NEWSIMG}

              </div>
            </div>

4.  Добавляем поле в шаблоны page.add.tpl 

            <div class="col-md-6">
              <div class="form-group">
                <label>Превью картинки:</label>

{PAGEADD_FORM_NEWSIMG}

              </div>
            </div>

Внимание обязательно учитываем регистр {PAGEADD_FORM_NEWSIMG} так как {PAGEADD_FORM_newsimg} работать не будет

Продолжение следует (теперь надо вывести картинку с определенными параметрами)

Добавлено 51 минута спустя:

И так выводить поле я научился теперь надо было мне вывести картинку (превью новости), как же это сделать если в "типе поля" нет img файла. Я сделал так:

1. В админ панели в типе экстраполя я поставил file (Теперь могу загружать изображение) 

2. Теперь мне надо было вывести этот загружаемый файл картинкой, а не как он выводился текстом в виде (news1.jpg) Поступил следующим образом 

<img alt="{PAGE_ROW_SHORTTITLE} - где задаем автоматом alt картинки из названия самой новости" src="../datas/exflds/{PAGE_ROW_NEWSIMG}"> и выводим картинку так как путь куда загружается изображение ../datas/exflds мы добавляем сам файл и оборачиваем это все в теги картинки 

Вот полностью кусок кода :

<img alt="{PAGE_ROW_SHORTTITLE}" src="../datas/exflds/{PAGE_ROW_NEWSIMG}">

А вто что получилось в сыром варианте: 

Теперь это все надо отшлифовать и оптимизировать ... Продолжение следует 

Добавлено 3 часа спустя:

И тут Остапа понесло ... 

Люблю посмотреть качественное кино, и как то дела  себе онлайн кинотеатр на WP за пол года до 5-7 тыс поситителей разогнал и все бы ни чего если одна алчная хост компания не задрала продление домена в 10 раз ну я и отправил их на три икса. Делал все с нуля не по учебнику и гайдам а сам первопроходцем пошел вышло красиво, долго мучался с оптимизацие изображений там система клоны картинок делает что в разы нагружает место на сервере, да и на загрузку сайта влияет вобщем были свои подводные камни. Вот вчера ночью и думаю а не реализовать ли мне на "конти" видео платформу под онлайн кинотеатр... Посмотрим что получится благо сервер с фильмами гиганский от куда я их беру, одному муторно конечно оптимизировать для яндекс тексты но оно того стоит так что если у кого есть желание присоеденится милости прошу ...

Добавлено 4 минуты спустя:

Нравится мне эта вкусная " Конти" есть где развернуться

#44063 DOS-info:  Хочу вывести картинку из админ панели по средствам создания доп поля :

Добавлено 51 минута спустя:

И так выводить поле я научился теперь надо было мне вывести картинку (превью новости), как же это сделать если в "типе поля" нет img файла.

Для загрузки изображений (и не только) можно установить плагин attacher.

Добавлено 10 минут спустя:

#44063 DOS-info:

подскажите кто знает как выводить новости на главной по 3 в ряду с миниатюрой картинки. 

Элементарно выводится, лучше всего для этого подойдет css grid. Я для плагина highslide вывод изображений в галерее сделал в 4 колонки, аналогичные свойства можно применить к выводу на главной, изменив под свои задумки.

Вот пример реализации в 3 колонки, в зависимости от размера экрана адаптируется в 3, 2 и 1 колонки. Можно в демке перетаскивать размер окна влево- вправо, и будет видно поведение блоков.

#44068 DOS-info:  Они все равно выводятся одна под другой !!! 

А не с боку друг от друга 

По caniuse.com  поддержка браузерами css grid уже больше 85%.

#44070 DOS-info:

У нас за вывод новости отвечает {INDEX_NEWS}, мы в шаблоне index.tpl вставляем (как пример) :

      <div class="grid-container">

    <div class="item">
{INDEX_NEWS}
    </div>
    </div>

 

При чем тут это ?

Вышеприведенный пример - это вывод содержимого в 3 колонки, а не вывод именно в вашем шаблоне. Код шаблона может быть каким угодно, и тогда естественно ничего не будет работать просто копипастом.

И  {INDEX_NEWS} не выводит именно так как хочется, он выводит содержимое файла indexnews.tpl, в котором есть конструкция:

<!-- BEGIN: PAGE_ROW --> *** <!-- END: PAGE_ROW -->

Вот внутри неё и выводится повторяющееся содержимое, то есть каждая краткая статья.

#44070 DOS-info:

Добавлено 5 минут спустя:

<div class="container-fluid">
<div class="row">
<div class="col-md-4">
{INDEX_NEWS}
</div>
<div class="col-md-4">
{INDEX_NEWS}
</div>
<div class="col-md-4">
{INDEX_NEWS}
</div>
</div>
</div>

Вот примерно так только новости должны быть разные ...

1. Это если бутстрап подключен. 

2.  {INDEX_NEWS} - выводится один раз на странице, он выдает в цикле содержимое, а вы его дублируете.

Добавлено 4 минуты спустя:

#44072 DOS-info:

Добавлено 2 минуты спустя:

Я пониманию что {INDEX_NEWS} выводит шаблон indexnews.tpl, ... indexnews.tpl мы создаем шаблон как выглядит новость, а как вывести новости как я на картинке выше указал не пойму ... 

Нужно в файле indexnews.tpl добавить код, например после:  <!-- BEGIN: MAIN --> перед  <!-- BEGIN: PAGE_ROW --> добавить

 сразу после <!-- BEGIN: PAGE_ROW --> добавить <divclass="col-md-4">

и соответственно закрывающие внизу также добавить

<!-- BEGIN: MAIN -->
<div class="container-fluid">
<div class="row">
<!-- BEGIN: PAGE_ROW --> 
<divclass="col-md-4">
********
</div>
<!-- END: PAGE_ROW -->
</div>
</div>
	<p class="paging">{PAGE_PAGEPREV}{PAGE_PAGENAV}{PAGE_PAGENEXT}</p>
<!-- END: MAIN -->

Такая конструкция должна быть в indexnews.tpl

Добавлено 8 минут спустя:

Почитайте про блоки в Cotonti.

Кстати, не обязательно выводить через indexnews, можно использовать функцию page_enum, вам будет проще с ней реализовать.

#44076 DOS-info:

функцию page_enum Эм не затруднит ссылку скинуть на нее ? что это за функция. Завтра с утра начну ковырять опять что то все они в ряд идут а не с боку  

cot_page_enum

Откройте файл /modules/page/tpl/page.enum.tpl

Скопируйте его в свой шаблон, предварительно создав в нем папку modules, в ней папку page (внутрь неё скопируйте).

Переименуйте его, добавив точку и своё имя, например page.enum.index.tpl.

Откройте в редакторе, и сделайте содержимое примерно таким:

<!-- BEGIN: MAIN -->
<div class="container-fluid">
	<div class="row">
		<!-- BEGIN: PAGE_ROW -->
		<div class="col-md-4">
			<h3>
				<!-- IF {PHP.usr.isadmin} -->[ {PAGE_ROW_ADMIN_EDIT} ] &nbsp;
				<!-- ENDIF --><a href="{PAGE_ROW_URL}" title="{PAGE_ROW_SHORTTITLE}">{PAGE_ROW_SHORTTITLE}</a></h3>
			<!-- IF {PAGE_ROW_DESC} -->
			<p class="small">{PAGE_ROW_DESC}</p><!-- ENDIF -->

			<div class="clear desc">
				<strong>{PHP.L.Filedunder}:</strong> {PAGE_ROW_CATPATH}
			</div>

			<div class="textbox">
				{PAGE_ROW_TEXT_CUT}
				<!-- IF {PAGE_ROW_TEXT_IS_CUT} -->{PAGE_ROW_MORE}
				<!-- ENDIF -->
			</div>
		</div>
		<!-- END: PAGE_ROW -->
	</div>
</div>
<!-- END: MAIN -->

В файле index.tpl  в нужном месте выводите:

 {PHP|cot_page_enum('',12,'index','page_date DESC','',true,true,true,'system,archive','',360)}

Должен появиться блок с контентом.

После уже оформляете, правите внутри файла page.enum.index.tpl как хотите.

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

Добавлено 26 минут спустя:

p.s.

Если используете бутстрап 4, учитывайте что:

@media (min-width: 768px) {
****
  .col-md-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
****

Этот класс сделает новости в 3 колонки только если ширина блока будет 768px и больше. Если ширина будет 767px и ниже, они будут в 1 колонку.

В таком случае больше подойдет класс:

.col-sm-4

так как он по умолчанию идет:

@media (min-width: 576px) {

Я бутстрапом не пользуюсь, это так, навскидку. Решение без бутстрапа я привел выше.

#44078 DOS-info:  1. Появиась большая садержка перед тем, как я вношу изменения в IDE (атом) и отображением на сайте ... ctr+f5 не помогает ...

 

Вообще-то это называется кеширование:

{PHP|cot_page_enum('',12,'index','page_date DESC','',true,true,true,'system,archive','',360)}

Последний параметр замените на 0 чтобы отключить его.