Altezze immagini categorie / Comprensione generale delle variabili del tema

Supporto
1

Ciao a tutti,

mentre stavo sperimentando alcune modifiche al tema, ho notato questo frammento di codice SCSS

@supports (--custom: property) {
  .category-logo.aspect-image {
    --max-height: 150px;
    max-height: var(--max-height);
    max-width: 60%;
    height: auto;
    width: calc(var(--max-height) * var(--aspect-ratio));

  }
}

Mi chiedo se esista un modo corretto (se esiste) per modificare la variabile max-height qui.

2

Non sono sicuro di cosa tu stia cercando di ottenere, ma se vuoi semplicemente ingrandire o rimpicciolire il logo, ecco qualcosa per iniziare.

Il logo della categoria viene utilizzato in diversi punti di default: nella pagina delle categorie e nelle pagine specifiche delle categorie.

Se vuoi modificare le dimensioni del logo in entrambi questi luoghi, puoi utilizzare questo codice:

@supports (--custom: property) {
  .category-logo.aspect-image {
    --max-height: 200px; // cambia 200 con l'altezza desiderata
  }
}

Una volta modificata la variabile --max-height, la larghezza dovrebbe adattarsi automaticamente.

Se desideri qualcosa di più specifico, come cambiare le dimensioni del logo solo nella pagina delle categorie, controlla l’impostazione del sito desktop_category_page_style sul tuo sito e fammi sapere qual è il valore impostato.

Se vuoi che la modifica avvenga solo su desktop, aggiungi il CSS sopra alla scheda CSS desktop del tuo tema. Se vuoi che avvenga solo su mobile, aggiungilo alla scheda CSS mobile. Se vuoi che avvenga sia su mobile che su desktop, aggiungilo alla scheda CSS comune.

3

Hmm, ho provato a cambiare --max-height come hai suggerito e mentre quella parte si aggiorna nell’ispettore, l’immagine rimane della stessa dimensione.

Ho notato nell’ispettore che il valore di --aspect-ratio non sembra essere impostato (non c’è un link cliccabile in Chrome al valore) e non riesco a capire dove possa essere impostato. Ho cercato nel codice di Discourse GitHub ma ancora non riesco a trovarlo.

Hai qualche idea su come posso trovare dove viene impostato --aspect-ratio o quale valore dovrei impostare per esso?

Modifica: trovato il problema, l’altezza veniva impostata dal componente tema Discourse Category Headers theme component

.category-header-widget .category-logo.aspect-image,
.category-header-widget .category-logo.aspect-image>img {
    float: left;
    margin: 0 0.5em 0.25em 0;
    max-height: 150px;
}

Quindi ho semplicemente sovrascritto max-height nel mio tema.

category-header-widget .category-logo.aspect-image,
.category-header-widget .category-logo.aspect-image>img  {
	max-height: 80px;
}

Modifica #2: il tuo suggerimento ha funzionato per le icone delle categorie nella pagina delle categorie, quindi grazie!