Форуми / National / Russian / Вывод новостей в 3 колонки ...

12345>>>

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

DOS-info
#1 12.02.2019 18:21

Members
Thanked: 2 рази

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

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

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

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

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

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

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

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

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

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

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

Відредаговано: DOS-info (13.02.2019 13:52, 6 років тому)
kushelbek
#2 13.02.2019 14:25

Members
Thanked: 16 раз

так новости в три колонки вывел? =)
Roffun
#3 13.02.2019 14:58

Contributors
Thanked: 175 раз

#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

Відредаговано: Roffun (27.01.2021 13:55, 4 року тому)
DOS-info
#4 13.02.2019 16:50

Members
Thanked: 2 рази

#44064 kushelbek:

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

Нет пока 

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

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

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

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

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

#44063 DOS-info:

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

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

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

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

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

 

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

Відредаговано: DOS-info (13.02.2019 17:04, 6 років тому)
Roffun
#5 13.02.2019 17:11

Contributors
Thanked: 175 раз

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

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

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

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

Members
Thanked: 2 рази

#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>

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

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

Відредаговано: DOS-info (13.02.2019 17:19, 6 років тому)
Roffun
#7 13.02.2019 17:20

Contributors
Thanked: 175 раз

#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 13.02.2019 17:20

Members
Thanked: 2 рази

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

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

Когда вы научитесь забывать о своем Эго, в пользу обмена идеями это будет начало настоящего прогресса
Roffun
#9 13.02.2019 17:27

Contributors
Thanked: 175 раз

#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 13.02.2019 17:32

Members
Thanked: 2 рази

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

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

 

Когда вы научитесь забывать о своем Эго, в пользу обмена идеями это будет начало настоящего прогресса
Roffun
#11 13.02.2019 17:34

Contributors
Thanked: 175 раз

<!-- 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

Відредаговано: Roffun (13.02.2019 17:43, 6 років тому)
DOS-info
#12 13.02.2019 17:46

Members
Thanked: 2 рази

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

Когда вы научитесь забывать о своем Эго, в пользу обмена идеями это будет начало настоящего прогресса
Roffun
#13 13.02.2019 17:50

Contributors
Thanked: 175 раз

#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

Відредаговано: Roffun (13.02.2019 18:30, 6 років тому)
DOS-info
#14 14.02.2019 03:31

Members
Thanked: 2 рази

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;
}

Не работает 

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

Відредаговано: DOS-info (14.02.2019 11:11, 6 років тому)
Roffun
#15 14.02.2019 11:15

Contributors
Thanked: 175 раз

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

 

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

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

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

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

12345>>>