Есть ли какой-то плагин, чтобы добавить иконку рядом с категорией?

Поддержка
1

Привет! Я хотел бы узнать, существует ли какой-то плагин, который позволяет добавлять иконку рядом с категорией, как, например, здесь? Я знаю, что такой плагин есть, но не помню его названия.

image
image493×287 18.2 KB

2

Привет, @Glow :wave:

Плагин или компонент темы не нужны. Перейдите в настройки категории через гаечный ключ администратора в правом верхнем углу каждой категории, для которой вы хотите добавить иконку изображения, и откройте вкладку «Изображения». Там вы можете загрузить изображения, которые будут отображаться, как на вашем скриншоте. Тот, который вам нужен, — это первый: «Логотип изображения категории». Обратите внимание, что он также будет отображаться в верхней части страницы категории.

3

Спасибо! И есть ли способ сделать это меньше? Это довольно крупно

image
image1138×429 32.5 KB

4

В общем CSS темы или компонента темы вы можете сделать следующее:

.category-logo.aspect-image {
    width: 100px;
}

Просто измените значение ширины на то, которое вам нужно. Также можно использовать проценты вместо пикселей. Надеюсь, это поможет :slight_smile:

5

хм, я почти уверен, что всё ещё существует плагин, так как я помню, что использовал что-то подобное, потому что это выглядит довольно странно при уменьшении масштаба и не совсем похоже на картинку, но я не могу вспомнить название.

image
image1184×412 14.9 KB

6

Вы можете использовать CSS для дальнейшей настройки изображения и его расположения.

Также есть вот это, но я не уверен, что это то, что вам нужно.

7

Это код, который я написал ранее…


:root {
    --category-logo-width: 70px;
    --category-spacing: 0px;
}

.desktop-view table.category-list .category-logo.aspect-image {
    width: var(--category-logo-width);
    height: calc(var(--category-logo-width) - 45px);
    margin: 0 5px 0 0;
    padding: 0;
    transform: translatey(-35px);
}
table.category-list .category-logo.aspect-image img{
    width: var(--category-logo-width);
    height: var(--category-logo-width);
}
.desktop-view .has-logo .category-text-title {
    margin-left: calc(var(--category-logo-width) + 5px); 
}
.mobile-view .category-title-link {
    display: flex;
}
.mobile-view .category-logo.aspect-image {
    margin: 0 5px 0 0;
    margin-top: 0 !important;
    padding: 0;
    order: -1
}
.mobile-view .category-text-title {
    margin: auto 0;
}


.desktop-view td.category {
    margin: var(--category-spacing);
}
.desktop-view table.category-list {
    border-collapse: separate;
    border-spacing: 0 var(--category-spacing);
}
.desktop-view table.category-list tr {
    margin: var(--category-spacing);
}