Come posso modificare l'altezza dell'immagine dell'intestazione in Twenty Seventeen?

Come posso modificare l'altezza dell'immagine dell'intestazione (specificata nella sezione Supporti intestazione) nel Tema ventisette diciassette?

In particolare, voglio cambiarlo nella home page perché qui riempie quasi l'intera pagina. Voglio che sia molto più breve. Il modo in cui appare su altre pagine come la pagina Informazioni integrata ha una buona altezza, quindi se potessi imitare quello sulla home page sarei soddisfatto. Sapere come fare un controllo preciso sarebbe fantastico.

Ho trovato (parte) del codice CSS che controlla l'altezza in wp-content/themes/twentyseventeen/style.css.

Esiste un codice che si applica quando la barra di amministrazione non è visibile (tipico utente anonimo) attualmente alla riga 3629

.twentyseventeen-front-page.has-header-image .custom-header-media,
.twentyseventeen-front-page.has-header-video .custom-header-media,
.home.blog.has-header-image .custom-header-media,
.home.blog.has-header-video .custom-header-media {
  height: 1200px;
  height: 100vh;
  max-height: 100%;
  overflow: hidden;
}

E il codice che si applica quando la barra di amministrazione è visibile (ad esempio, sei connesso) attualmente alla riga 3646

.admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media,
.admin-bar.twentyseventeen-front-page.has-header-video .custom-header-media,
.admin-bar.home.blog.has-header-image .custom-header-media,
.admin-bar.home.blog.has-header-video .custom-header-media {
  height: calc(100vh - 32px);
}

E quindi il codice che si applica al cellulare attualmente alla linea 1638:

.has-header-image.twentyseventeen-front-page .custom-header,
.has-header-video.twentyseventeen-front-page .custom-header,
.has-header-image.home.blog .custom-header,
.has-header-video.home.blog .custom-header {
        display: table;
        height: 300px;
        height: 75vh;
        width: 100%;
}

Copiando queste tre sezioni di CSS nel style.css di my child theme e modificando l' heightattributo sono stato in grado di modificare l'altezza dell'immagine dell'intestazione nella home page. Ho impostato l'altezza 30vh, calc(30vh - 32px)e 30vhrispettivamente in ciascuna sezione. Ho lasciato il primo height: 1200pxda solo.

Si noti che l'elemento altezza è impostato su 100vhquali dimensioni l'altezza rispetto all'altezza della finestra. Quindi 100VH è il 100% della finestra mentre 50VH è il 50% della finestra.

Una cosa strana è che sulla home page lo zoom e la posizione dell'immagine dell'intestazione sono diversi rispetto ad altre pagine.

Non sono sicuro se questo è il modo migliore. Sono aperto a opzioni migliori ma finora funziona a un livello base.

Basta modificare il tema dalla dashboard e aggiungere la seguente definizione CSS nella sezione del tema "css personalizzati":

.has-header-image.home.blog .custom-header {
    height: 26vh;
}

Da un commento che ho fatto nella risposta di @ User (è un bel nome);) Ho pensato di provarlo.

Sto modificando direttamente il file del tema perché sto lavorando in un contenitore docker usa e getta, è più una prova del concetto. L'adattamento a un tema figlio richiederà alcune modifiche.

Nell'area content/themes/twentyseventeen/style.csscompresa tra 3680 ~ 3670ish si trova l'immagine dell'intestazione.

codice originale:

.twentyseventeen-front-page.has-header-image .custom-header-media,
.twentyseventeen-front-page.has-header-video .custom-header-media,
.home.blog.has-header-image .custom-header-media,
.home.blog.has-header-video .custom-header-media {
  height: 1200px;
  height: 100vh;
  max-height: 100%;
  overflow: hidden;
}

La modifica delle dimensioni (e dell'ordine) è abbastanza buona per ottenere la vista disconnessa:

  height: 100vh;    
  height: 100%; 
  max-height: 500px;

Ho lasciato il vhe il %per coprire quelle basi dove max-heightnon è stato raggiunto, ma poi ho impostato max-heightquello che stai cercando.

C'è un avvertimento in tutto questo:

È la parte superiore dei pixel. Quindi, a meno che tu non abbia una buona porzione di immagine in quell'area ... Sembra schifoso (molte teste tagliate)

altro da seguire (quando lo risolvo)

Puoi cambiarlo ritagliando l'immagine. in WordPress, c'è un'opzione come personalizzatore. È necessario seguire i passaggi seguenti per ritagliare l'immagine.

    1) Go appearance->customize
    2) Header media
    3) add a new image and then crop that image as per your needs and you go.

Puoi usare Firebug (o guardare il codice sorgente della pagina) per trovare il CSS usato per visualizzare l'immagine dell'intestazione. Quindi aggiungere il CSS per apportare la modifica. L'esatto CSS che usi dipende dal tema.

Firebug ti consente di modificare temporaneamente il CSS per ottenerlo come desideri, quindi copiare quel nuovo CSS nella pagina CSS del tema (se ha quell'opzione).

Se non c'è un'opzione 'CSS personalizzato' nel tuo tema, il modo migliore è creare un tema figlio (molti tutorial su quello) e aggiungere i tuoi CSS personalizzati nella pagina styles.css di quel tema figlio. (Non modificare mai il tema principale; le modifiche verranno sovrascritte al prossimo aggiornamento del tema.)

Mi sono avvicinato a questo impostando innanzitutto un tema figlio (passaggio consigliato da WP). Quindi nel file style.css del tema figlio, ho aggiunto i css seguenti. La prima sezione controlla l'altezza dell'immagine in prima pagina; la seconda sezione controlla l'altezza dello spazio per l'immagine in prima pagina. Entrambi devono combaciare perché questo funzioni. Ho commentato alcune righe che interferivano con la mia immagine ad altezza fissa. Ora la mia intestazione sulla home page è esattamente la stessa di tutte le altre pagine.

.has-header-image .custom-header-media img, 
.has-header-video .custom-header-media video, 
.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
    /* height: 100%; */
    height: 400px;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    top: 0;
    -ms-transform: none;
    -moz-transform: none;
    -webkit-transform: none;
    transform: none;
    width: 100%;
}
.twentyseventeen-front-page.has-header-image .custom-header-media, 
.twentyseventeen-front-page.has-header-video .custom-header-media, 
.home.blog.has-header-image .custom-header-media, 
.home.blog.has-header-video .custom-header-media {
    height: 400px;
    /* height: 100vh; */
    /* max-height: 100%; */
    overflow: hidden;
}