Esiste un plugin per avere un'icona accanto a una categoria?

Supporto
1

Ciao, mi stavo chiedendo se ci fosse un plugin di qualche tipo che permettesse di avere un’icona accanto a una categoria simile a questa? So che ce n’è uno ma non ricordo il nome.

image
image493×287 18.2 KB

2

Ciao @Glow :wave:

Non c’è bisogno di un plugin o di un componente tema. Vai alle Impostazioni della Categoria tramite la chiave inglese nell’angolo in alto a destra di ogni categoria per cui desideri un’icona immagine e vai alla scheda “immagini” e lì puoi caricare immagini che appariranno come nella tua schermata. Quella che desideri è la prima “Category Image Logo”. Nota che apparirà anche in cima alla pagina della Categoria.

1 Mi Piace
3

Grazie! C’è un modo per renderlo più piccolo? È piuttosto sovradimensionato

image
image1138×429 32.5 KB

4

Nel file common.css di un tema o di un componente del tema, puoi fare così:

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

Basta cambiare il valore di width con quello che desideri. Puoi anche usare percentuali invece di pixel. Spero questo aiuti :slight_smile:

1 Mi Piace
5

hmm, sono abbastanza sicuro che ci sia ancora un plugin dato che ricordo di averne usato uno, perché questo sembra piuttosto strano quando lo ridimensiono e non sembra esattamente come nell’immagine, ma non riesco a ricordare il nome.

image
image1184×412 14.9 KB

6

puoi usare CSS per personalizzare ulteriormente l’immagine e il suo posizionamento.

c’è anche questo, ma non sono sicuro che sia quello che vuoi.

2 Mi Piace
7

Questo è un codice che ho scritto prima…


: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 Mi Piace