Вывод категорий на отдельную страницу.

[octopus 0]

Добрый день! Сразу скажу я новичок и только учусь.  Пытаюсь вывести категории в блоках 350 на 200 допусти. В этом блоке название категории ,картинка и количество публикаций.

Но все что я получаю 

Скриншоты через изображения по ссылки не приниматься

https://ibb.co/PwXwws7
https://ibb.co/41kTM3s

Я пробывал один блок вывести

<div class="category-block">
  <div class="category-name">{category_name}</div>
  <div class="category-count">{category_news_count} публикаций</div>
  <div class="category-icon"><img src="{category_icon}" alt="{category_name}" /></div>
</div>

<style>
  .category-block {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 10px;
    width: 250px;
    height: 150px;
    margin-right: 10px;
    margin-bottom: 10px;
    display: inline-block;
  }

  .category-name {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
  }

  .category-count {
    font-size: 14px;
    margin-bottom: 5px;
  }

  .category-icon img {
    max-width: 40px;
    height: auto;
  }
</style>

{php}
$category_id = 1; // ID категории, которую нужно вывести
$category_info = dle_category($category_id);

if ($category_info) {
  $category_name = $category_info['name'];
  $category_news_count = $category_info['news_num'];
  $category_icon = $category_info['icon'];

  echo '<div class="category-wrapper">';
  echo '<div class="category-block">';
  echo '<div class="category-name">' . $category_name . '</div>';
  echo '<div class="category-count">' . $category_news_count . ' публикаций</div>';
  echo '<div class="category-icon"><img src="' . $category_icon . '" alt="' . $category_name . '" /></div>';
  echo '</div>';
  echo '</div>';
}
{/php}

 Пробывал все категории 

<div class="categories">
  <div class="row">
    [item]
    <div class="col-md-3">
      <div class="category-block">
        <div class="category-name">{name}</div>
        <div class="category-count">{news-count} публикаций</div>
        <div class="category-icon"><img src="{icon}" alt="{name}" /></div>
      </div>
    </div>
    [/item]
  </div>
</div>

<style>
  .categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: -10px;
  }

  .col-md-3 {
    flex-basis: 25%;
    max-width: 25%;
    padding: 10px;
  }

  .category-block {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 10px;
  }

  .category-name {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
  }

  .category-count {
    font-size: 14px;
    margin-bottom: 5px;
  }

  .category-icon img {
    max-width: 40px;
    height: auto;
  }
</style>

{catmenu}

еще вариант 

<div class="category-block">
  <div class="category-name">{category_name}</div>
  <div class="category-count">{category_news_count} публикаций</div>
  <div class="category-icon"><img src="{category_icon}" alt="{category_name}" /></div>
</div>


<div class="categories">
  <div class="row">
    {catmenu}
    <div class="col-md-3">
      {include file="category_item.tpl" category_name="{name}" category_news_count="{news-count}" category_icon="{icon}"}
    </div>
    {/catmenu}
  </div>
</div>

<style>
  .categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: -10px;
  }

  .col-md-3 {
    flex-basis: 25%;
    max-width: 25%;
    padding: 10px;
  }

  .category-block {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 10px;
  }

  .category-name {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
  }

  .category-count {
    font-size: 14px;
    margin-bottom: 5px;
  }

  .category-icon img {
    max-width: 40px;
    height: auto;
  }
</style>

Вариантов масса перепробовал.. Результат на скриншотах. Подскажите пожалуйста, может пример есть у кого.

[igorek-art 33]

А зачем такие танцы с бубнами? Уже ведь давно в DLE есть файлик categorymenu.tpl и файлик menu.tpl и в шаблон main.tpl в нужное место вставляется {include file="modules/menu.tpl"} типа такого и тебе там выводятся и категории и количество..