Existe-t-il un plugin pour avoir une icône à côté d'une catégorie ?

Soutien
1

Salut, je me demande s’il existe un plugin qui permet d’avoir une icône à côté d’une catégorie, un peu comme ceci ? Je sais qu’il y en a un mais je ne me souviens plus du nom.

image
image493×287 18.2 KB

2

Salut @Glow :wave:

Pas besoin de plugin ou de composant de thème. Allez dans les paramètres de la catégorie via la clé à molette d’administration dans le coin supérieur droit de chaque catégorie pour laquelle vous souhaitez une icône d’image et allez dans l’onglet “images” où vous pouvez télécharger des images pour qu’elles apparaissent comme dans votre capture d’écran. Celle que vous voulez est la première, “Category Image Logo”. Notez qu’elle apparaîtra également en haut de la page de la catégorie.

1 « J'aime »
3

Merci ! et y a-t-il un moyen de le rendre plus petit ? Il est assez surdimensionné

image
image1138×429 32.5 KB

4

Dans le fichier common.css d’un thème ou d’un composant de thème, vous pouvez faire ceci :

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

Changez simplement la valeur de width comme vous le souhaitez. Vous pouvez aussi utiliser des pourcentages au lieu de pixels. J’espère que cela vous aide :slight_smile:

1 « J'aime »
5

Hmm, je suis à peu près sûr qu’il existe toujours un plugin car je me souviens en avoir utilisé un, car cela semble assez étrange lorsque je le réduis, et ne ressemble pas exactement à l’image, mais je ne me souviens pas du nom.

image
image1184×412 14.9 KB

6

vous pouvez utiliser CSS pour personnaliser davantage l’image et son placement.

il y a aussi celui-ci mais je ne suis pas sûr que ce soit ce que vous voulez.

2 « J'aime »
7

Ceci est un code que j’ai écrit auparavant…


: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);
}
2 « J'aime »