Автоматический вывод списка радиостанций (плагин)

Akimu

Web Designer
Сообщения
178
Реакции
30
Баллы
28
Автоматическое формирование добавленных вами в базу радиостанций на отдельной страницы

Заходим в админпанель/Главное меню и добавляем новую страницу с названием "Радиостанции" и url "/page/radiolist".

В templates/Ваш шаблон/pages/ создаем radiolist.tpl с содержимым:
Код:
{include
   file="header.tpl"
   page_meta_title='Радиостанции слушать онлайн'
   page_meta_description='Список популярных радиостанций.'
   page_meta_keywords=''
 }
<div class="radiolist">
{getRadiolist}
{foreach $radiolist as $radio}
<a href="/pages/{$radio.url}/" class="pajax-link radiolist__item" >
<img src="{$radio.poster}" alt="{$radio.name} слушать онлайн">
<h3 class="radiolist__title">{$radio.name}</h3>
</a>
{/foreach}
</div>

{include file="footer.tpl"}
Доступно использование:

$radio.rid - ID радиостанции
$radio.name - название радиостанции
$radio.poster - постер радиостанции
$radio.url - url радиостанции (/europa-plus к примеру)
$radio.text - описание радиостанции

В файл с вашим css добавляем (правим под себя):
Код:
.radiolist{display: block;position: relative;padding: 20px 0;}
.radiolist__item{width: 49%;position: relative;float: left;margin-right: 1%;}
.radiolist__item:nth-child(2n) {margin-right: 0;}
.radiolist__item img{max-width: 100%;min-height: 280px;}
Далее скачиваем и заливаем файл с архива.
 

Вложения

Hell1g

Клиент
Сообщения
13
Реакции
3
Баллы
3
Может кто сможет помочь, постеры радио идут столбиком, а хотелось бы на всю страницу. Есть варианты как это можно исправить?
 

Вложения

MSE-Script

Developer
Команда форума
Сообщения
762
Реакции
277
Баллы
63
@Hell1g, Универсальный код, для выстраивания элементов в строку (не проверялся).
HTML:
<div class="radio-box">
    <div class="radio-box__item">
      <!-- Элемент списка радио -->
    </div>
</div>
CSS:
.radio-box{
    display: flex;
    flex-wrap: wrap;
}

.radio-box {
    max-width: 100px;
}
 

Hell1g

Клиент
Сообщения
13
Реакции
3
Баллы
3
@Hell1g, Универсальный код, для выстраивания элементов в строку (не проверялся).
HTML:
<div class="radio-box">
    <div class="radio-box__item">
      <!-- Элемент списка радио -->
    </div>
</div>
CSS:
.radio-box{
    display: flex;
    flex-wrap: wrap;
}

.radio-box {
    max-width: 100px;
}
А что с html делать? Обернуть им этот скрипт?

Код:
<div class="radiolist">
{getRadiolist}
{foreach $radiolist as $radio}
<a href="/pages/{$radio.url}/" class="pajax-link radiolist__item" >
<img src="{$radio.poster}" alt="{$radio.name} слушать онлайн">
<h3 class="radiolist__title">{$radio.name}</h3>
</a>
{/foreach}
</div>
 

MSE-Script

Developer
Команда форума
Сообщения
762
Реакции
277
Баллы
63
@Hell1g, Замените ваш код на этот:
PHP:
<div class="radiolist radio-box">
    {getRadiolist}
    {foreach $radiolist as $radio}
        <a href="/radio/{$radio.url}/" class="pajax-link radiolist__item radio-box__item">
            <img src="{$radio.poster}" alt="{$radio.name} слушать онлайн">
            <h3 class="radiolist__title">{$radio.name}</h3>
        </a>
    {/foreach}
</div>
 

Hell1g

Клиент
Сообщения
13
Реакции
3
Баллы
3
@Hell1g, Замените ваш код на этот:
PHP:
<div class="radiolist radio-box">
    {getRadiolist}
    {foreach $radiolist as $radio}
        <a href="/radio/{$radio.url}/" class="pajax-link radiolist__item radio-box__item">
            <img src="{$radio.poster}" alt="{$radio.name} слушать онлайн">
            <h3 class="radiolist__title">{$radio.name}</h3>
        </a>
    {/foreach}
</div>
Заменил и радио как было по вертикали так и осталось, но весь текст на сайте стал жирный:D Откатил, но ответа не последовало, хз что делаю не так....
 

MSE-Script

Developer
Команда форума
Сообщения
762
Реакции
277
Баллы
63
@Hell1g, Скорее всего случайно дропнули лишний тэг. Выложите сюда код файла шаблона целиком, чтобы видеть куда именно вставляете код.
 

Hell1g

Клиент
Сообщения
13
Реакции
3
Баллы
3
@Hell1g, Скорее всего случайно дропнули лишний тэг. Выложите сюда код файла шаблона целиком, чтобы видеть куда именно вставляете код.
Код:
{strip}
{include
   file="modules/header.tpl"
   page_meta_title='Слушать радио онлайн бесплатно'
   page_meta_description='Здесь Вы сможете слушать радио онлайн бесплатно.'
   page_meta_keywords='radio, радио онлайн'
 }

<div class="cols fx-row">

      {* Sidebar *}
      {include file="modules/sidebar.tpl"}

      {* Колонка с контентом *}
      <div class="col-main fx-1">

         {* Topline *}
         {include file="modules/topline.tpl"}

         {* Основной контент *}
         <main class="content pajax-content">


<div class="radiolist radio-box">
    {getRadiolist}
    {foreach $radiolist as $radio}
        <a href="/radio/{$radio.url}/" class="pajax-link radiolist__item radio-box__item">
            <img src="{$radio.poster}" alt="{$radio.name} слушать онлайн">
            <h3 class="radiolist__title">{$radio.name}</h3>
        </a>
    {/foreach}
</div>


      </div>

</div>

{include file="modules/footer.tpl"}
{strip}
 

MSE-Script

Developer
Команда форума
Сообщения
762
Реакции
277
Баллы
63
@Hell1g, Как минимум, не вижу у вас закрывающего тега </main>.
 

MSE-Script

Developer
Команда форума
Сообщения
762
Реакции
277
Баллы
63
@Hell1g, Значит у вас какие-то стили шаблона перебивают нужные.

Попробуйте еще так:
HTML:
<div class="radio-box">
    {getRadiolist}
    {foreach $radiolist as $radio}
        <a href="/radio/{$radio.url}/" class="pajax-link radio-box__item">
            <img src="{$radio.poster}" alt="{$radio.name} слушать онлайн">
            <h3 class="radiolist__title">{$radio.name}</h3>
        </a>
    {/foreach}
</div>
Не забудте добавить стили в ваш CSS файл:
CSS:
.radio-box {
    display: flex;
    flex-wrap: wrap;
}

.radio-box__item {
   max-width: 97px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
   margin: 5px;
}
 

Hell1g

Клиент
Сообщения
13
Реакции
3
Баллы
3
@MSE-Script, Еще раз огромное спасибо за помощь.

Выкладываю обработанный скрипт и css, может кому пригодиться. А так же скрин того, что получилось:)

HTML:
<div class="radio-box">
    {getRadiolist}
    {foreach $radiolist as $radio}
        <a href="/radio/{$radio.url}/" class="pajax-link radio-box__item">
            <img src="{$radio.poster}" alt="{$radio.name} слушать онлайн">
            <h3 class="radiolist__title"></h3>
        </a>
    {/foreach}
</div>
CSS:
.radio-box {
         display: flex;
         flex-wrap: wrap;
        }

        .radio-box__item {
         max-width: 97px;
         box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
         margin: 5px;
        }
 

Вложения

Coilfenix

Активист
Сообщения
84
Реакции
30
Баллы
18
@MSE-Script, Еще раз огромное спасибо за помощь.

Выкладываю обработанный скрипт и css, может кому пригодиться. А так же скрин того, что получилось:)

HTML:
<div class="radio-box">
    {getRadiolist}
    {foreach $radiolist as $radio}
        <a href="/radio/{$radio.url}/" class="pajax-link radio-box__item">
            <img src="{$radio.poster}" alt="{$radio.name} слушать онлайн">
            <h3 class="radiolist__title"></h3>
        </a>
    {/foreach}
</div>
CSS:
.radio-box {
         display: flex;
         flex-wrap: wrap;
        }

        .radio-box__item {
         max-width: 97px;
         box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
         margin: 5px;
        }
Парочку правок:
<h3 class="radiolist__title"></h3> Лишнее, если ты не выводишь название радио под картинками, а если выводишь, то правильнее: <h3 class="radiolist__title">{$radio.name}</h3>

<img src="{$radio.poster}" alt="{$radio.name} слушать онлайн"> вместо alt нужно писать title, чтобы при на ведении на постер с радио выводилось его название возле мышки: <img src="{$radio.poster}" title="{$radio.name} слушать онлайн">

А так забрал себе;)
 

Hell1g

Клиент
Сообщения
13
Реакции
3
Баллы
3
Парочку правок:
<h3 class="radiolist__title"></h3> Лишнее, если ты не выводишь название радио под картинками, а если выводишь, то правильнее: <h3 class="radiolist__title">{$radio.name}</h3>

<img src="{$radio.poster}" alt="{$radio.name} слушать онлайн"> вместо alt нужно писать title, чтобы при на ведении на постер с радио выводилось его название возле мышки: <img src="{$radio.poster}" title="{$radio.name} слушать онлайн">

А так забрал себе;)
Про наведение на постер это ты четко дополнил, а я думал зачем написано "слушать онлайн" если оно нигде не фигурируется :)
 

veenrok

Клиент
Сообщения
13
Реакции
2
Баллы
3
Fatal error: Uncaught --> Smarty: Unable to load template 'file:header.tpl' in 'pages/radiolist.tpl' <-- thrown in /var/www/www-root/data/www/site.org/vendor/smarty/smarty/libs/sysplugins/smarty_internal_template.php on line 195
Такая ошибка на странице списка радио
 

veenrok

Клиент
Сообщения
13
Реакции
2
Баллы
3
Плагин устарел, кто не то переделывал ?
 
Сверху