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

Akimu

Web Designer
Сообщения
175
Реакции
29
Баллы
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
Команда форума
Сообщения
861
Реакции
307
Баллы
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
Команда форума
Сообщения
861
Реакции
307
Баллы
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
Команда форума
Сообщения
861
Реакции
307
Баллы
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
Команда форума
Сообщения
861
Реакции
307
Баллы
63
@Hell1g, Как минимум, не вижу у вас закрывающего тега </main>.
 

MSE-Script

Developer
Команда форума
Сообщения
861
Реакции
307
Баллы
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

Новичок
Клиент
Сообщения
19
Реакции
7
Баллы
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

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

Rus

Активист
Клиент
Сообщения
161
Реакции
14
Баллы
18
Да тут уже все устарело, а разраб по ходу забил на форум, очень много информации не актуальной под версию 3.5
 

ushkom

Активист
Клиент
Сообщения
125
Реакции
10
Баллы
18
Кто силен, оптимизируйте пожалуйста плагин под 3.5
Спасибо
 

ushkom

Активист
Клиент
Сообщения
125
Реакции
10
Баллы
18
Никто не может подправить модуль, или желания нет?
 
Сверху