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

12345>>>

Вывод новостей три колонки с миниатюрой изображения

DOS-info
#1 2019-02-12 18:21

Доброго времени суток Котоновцы. До этого был на 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 часа спустя:

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

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

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

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

Когда вы научитесь забывать о своем Эго, в пользу обмена идеями это будет начало настоящего прогресса

Bu konu DOS-info tarafından düzenlendi(2019-02-13 13:52, 5 yıllar önce)
kushelbek
#2 2019-02-13 14:25

так новости в три колонки вывел? =)

Roffun
#3 2019-02-13 14:58
#44063 DOS-info:  Хочу вывести картинку из админ панели по средствам создания доп поля :
Добавлено 51 минута спустя:

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

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

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

#44063 DOS-info:

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

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

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

Улетел на другую планету, а там почты нету.. https://www.cotonti.com/forums/45298?m=posts

Bu konu Roffun tarafından düzenlendi(2021-01-27 13:55, 3 yıllar önce)
DOS-info
#4 2019-02-13 16:50
#44064 kushelbek:

так новости в три колонки вывел? =)

Нет пока 

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

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

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

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

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

#44063 DOS-info:

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

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

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

Они все равно выводятся одна под другой !!! 

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

 

Когда вы научитесь забывать о своем Эго, в пользу обмена идеями это будет начало настоящего прогресса

Bu konu DOS-info tarafından düzenlendi(2019-02-13 17:04, 5 yıllar önce)
Roffun
#5 2019-02-13 17:11
#44068 DOS-info:  Они все равно выводятся одна под другой !!! 

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

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

Улетел на другую планету, а там почты нету.. https://www.cotonti.com/forums/45298?m=posts
DOS-info
#6 2019-02-13 17:14
#44069 Roffun:
#44068 DOS-info:  Они все равно выводятся одна под другой !!! 

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

 

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

      <div class="grid-container">

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

 

Добавлено 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>

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

Когда вы научитесь забывать о своем Эго, в пользу обмена идеями это будет начало настоящего прогресса

Bu konu DOS-info tarafından düzenlendi(2019-02-13 17:19, 5 yıllar önce)
Roffun
#7 2019-02-13 17:20
#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 -->

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

Улетел на другую планету, а там почты нету.. https://www.cotonti.com/forums/45298?m=posts
DOS-info
#8 2019-02-13 17:20

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

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

Когда вы научитесь забывать о своем Эго, в пользу обмена идеями это будет начало настоящего прогресса
Roffun
#9 2019-02-13 17:27
#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 --> добавить

<div class="container-fluid">
<div class="row">

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

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

Улетел на другую планету, а там почты нету.. https://www.cotonti.com/forums/45298?m=posts
DOS-info
#10 2019-02-13 17:32

Я наверно коряво спрашиваю сейчас нарисую !!! Что хочу получить ...

Разумеется новости разные все должнывыводится это на главной 

 

Когда вы научитесь забывать о своем Эго, в пользу обмена идеями это будет начало настоящего прогресса
Roffun
#11 2019-02-13 17:34
<!-- 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, вам будет проще с ней реализовать.

Улетел на другую планету, а там почты нету.. https://www.cotonti.com/forums/45298?m=posts

Bu konu Roffun tarafından düzenlendi(2019-02-13 17:43, 5 yıllar önce)
DOS-info
#12 2019-02-13 17:46

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

Когда вы научитесь забывать о своем Эго, в пользу обмена идеями это будет начало настоящего прогресса
Roffun
#13 2019-02-13 17:50
#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) {

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

Улетел на другую планету, а там почты нету.. https://www.cotonti.com/forums/45298?m=posts

Bu konu Roffun tarafından düzenlendi(2019-02-13 18:30, 5 yıllar önce)
DOS-info
#14 2019-02-14 03:31

Roffun дай бог здоровья !!!  It's beautiful.

Когда вы научитесь забывать о своем Эго, в пользу обмена идеями это будет начало настоящего прогресса Жан Фреско

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

Впечатления от page_enum

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

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

Встал в ступор казалось бы с простой задачей : Нужно при наведении на картинку выводить другую (типа кнопки "Play") по верх основной. 

<div class="imgnewsmini">
                            <a href='{PAGE_ROW_URL}'><img alt="{PAGE_ROW_SHORTTITLE}" src="../datas/exflds/{PAGE_ROW_NEWSIMG}" class="img-thumbnail"/></div>

Ба во дела ... Ни как не получается 

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

)))) надо перерыв сделать ... 

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

.imgnewsmini:hover {
    border: 1px solid black;
    background-image: url(путь к картинки);
    z-index: 2;
    position: relative;
}

Не работает 

Когда вы научитесь забывать о своем Эго, в пользу обмена идеями это будет начало настоящего прогресса

Bu konu DOS-info tarafından düzenlendi(2019-02-14 11:11, 5 yıllar önce)
Roffun
#15 2019-02-14 11:15
#44078 DOS-info:  1. Появиась большая садержка перед тем, как я вношу изменения в IDE (атом) и отображением на сайте ... ctr+f5 не помогает ...

 

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

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

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

Улетел на другую планету, а там почты нету.. https://www.cotonti.com/forums/45298?m=posts

12345>>>