Перейти к публикации

octopus

новички
  • Публикации

    3
  • Зарегистрирован

  • Посещение

Сообщения, опубликованные пользователем octopus

  1. Добрый день! Сразу скажу я новичок и только учусь.  Пытаюсь вывести категории в блоках 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>

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

×
×
  • Создать...