Фото категорий и подкатегорий [3] Есть решение

Итак, уже третья тема. Пока слишком тупенький, чтобы справиться самому. Купил плагин "Логотип категории". Он просто добавляет фото в категории 

Надо, чтобы фото было вместо кнопок наверху. 

Т.е фото Варвары, Везуывия, Вулкана и т.д были видны в категории "Дровяные печи для бани" и т.д

5 ответов

  • 1
    Pavel Skok 18 мая 2021 12:39 #

    + гиперссылка на категории, конечно же

    • +2
      replicant replicant 18 мая 2021 12:49 #

      В прошлой теме я публиковал кусок кода, который вам нужен для этой задачи. Вот этот кусок, но с модификацией, чтобы ваши картинки стали кликабельными.

      Просто вставьте в шаблон category.html в той части, где у вас цикл вывода названий подкатегорий, посмотрите, а результат подгоните по месту

      {if $category.subcategories}
          {foreach $category.subcategories as $sc}
              <a href="{$sc.url}"><img src="{shopCategoryImagesPlugin::getCategoryImageUrl($sc.id)}"></a>
          {/foreach}
      {/if}

      Сама применяемая переменная зависит от того, какой эскиз будете выводить. Там в плагине можно генерировать разные размеры одного изображения и выводить разыми переменными. Например для маленьких изображений генеруется в

      shopCategoryImagesPlugin::getCategoryLittleThumbUrl

      Документация есть в настройках самого плагина в админке. Настройки размеров эскизов для генерации там же.

      Само изображение можно вообще выводить в виде бекграунда с эффектами типа opacity или фильтрами насыщенности, а поверх накладывать название подкатегории. Скажем при наведении бекграунд приобретает цвет или теряет часть прозрачности. Будет прикольно.

      • +1
        Pavel Skok Pavel Skok 18 мая 2021 13:45 #

        Все гуд, огромное спасибо за помощь. Еще мини вопрос. Как сделать, чтобы кнопки и фото были вместе? Потому что фото мне не быстро добавить, а кнопки пропали. На время чтобы хотя бы кнопки у сабкатегорий, у которых нет фото, остались

        • +1
          replicant replicant 18 мая 2021 14:05 #

          Надо отрабатывать условие отсутствия URL изображения примерно таким образом внутри цикла перебора подкатегорий

          {if $category.subcategories}
          <ul>
              {foreach $category.subcategories as $sc}
              {if !empty(shopCategoryImagesPlugin::getCategoryImageUrl($sc.id))}
                 <li><a href="{$sc.url}"><img src="{shopCategoryImagesPlugin::getCategoryImageUrl($sc.id)}"></a></li>
              {else}
                  <li><button><a href="{$sc.url}">{$sc.name|escape}</a></button></li>
              {/if}
              {/foreach}
          </ul>
          {/if}

          А вообще все эти вложенные сущности типа <li><button><a>...</a></button></li>, как в вашем коде, можно заменить одним <a>...</a> с определенным набором нужных свойств и не надо будет открывать <ul> и вообще элементов меньше, зависимостей от свойств разных классов в css меньше, верстка проще.

      • +1
        Pavel Skok Pavel Skok 18 мая 2021 13:52 #

        Вот код обычной кнопки

Добавить ответ

Чтобы добавить комментарий, зарегистрируйтесь или войдите