Come modificare l'altezza dell'immagine dell'header in Twenty Seventeen?

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

C'è del codice che viene applicato 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 codice che viene applicato quando la barra di amministrazione è visibile (ad esempio sei loggato) 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 poi codice che viene applicato su mobile attualmente alla riga 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 file style.css del mio child theme e modificando l'attributo height sono riuscito a regolare l'altezza per l'immagine di intestazione nella home page. Ho impostato l'altezza a 30vh, calc(30vh - 32px), e 30vh rispettivamente in ogni sezione. Ho lasciato invariato il primo height: 1200px.

Nota che l'elemento height è impostato a 100vh che dimensiona l'altezza relativa all'altezza del viewport. Quindi 100vh è il 100% del viewport mentre 50vh è il 50% del viewport.

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

Non sono sicuro che questo sia il modo migliore. Sono aperto a opzioni migliori ma finora funziona a un livello basilare.

Modifica semplicemente il tema dalla dashboard e aggiungi la seguente definizione CSS nella sezione "CSS personalizzato" del tema:

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

Da un commento che ho fatto nella risposta di @User (che è un nome figo) ;) ho pensato di provarci.

Sto modificando direttamente il file del tema perché sto lavorando in un container docker temporaneo, è più una prova di concetto. Adattarlo a un child theme richiederà qualche modifica.

In content/themes/twentyseventeen/style.css nell'area tra le righe 3680~3670 circa si trova l'immagine dell'header.

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;
}

Modificando le dimensioni (e l'ordine) è sufficiente per ottenere la visualizzazione quando si è disconnessi:

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

Ho lasciato il vh e il % per coprire i casi in cui non viene raggiunta la max-height, ma ho impostato la max-height al valore desiderato.

C'è una avvertenza in tutto questo:

È la sezione più alta di pixel. Quindi a meno che non abbiate una bella porzione di immagine in quell'area... Sembrerà brutto (molte teste tagliate)

altro seguirà (quando lo risolverò)

Preso da questo sito

Questo CSS aggiuntivo/personalizzato ha funzionato per me:

/*Schermo del computer */
@media screen and (min-width: 48em) {
    .twentyseventeen-front-page.has-header-image .custom-header-image {
    /*height: 1200px;*/
    /*height: 100vh;*/
    height: 50vh;
    /*max-height: 100%;*/
    /*overflow: hidden;*/
    }
}

/* Schermo mobile*/
.has-header-image.twentyseventeen-front-page .custom-header {
    /*display: table;*/
    /*height: 300px;*/
    /*height: 75vh;*/
    height: 50vh;
    /*width: 100%;*/
}

/* Schermo del computer con utente loggato e barra di amministrazione visibile in front end*/
@media screen and (min-width: 48em) {
    .admin-bar.twentyseventeen-front-page.has-header-image .custom-header-image {
    /*height: calc(100vh - 32px);*/
    height: calc(50vh - 32px);
    }
}

Puoi impostare l'altezza desiderata negli attributi 'height'.

Puoi modificarla ritagliando l'immagine. In WordPress, c'è un'opzione chiamata personalizzatore. Devi seguire i passaggi seguenti per ritagliare l'immagine.

    1) Vai su Aspetto->Personalizza
    2) Media intestazione
    3) Aggiungi una nuova immagine e poi ritagliala secondo le tue esigenze e il gioco è fatto.

Potresti usare Firebug (o guardare il codice sorgente della pagina) per trovare il CSS utilizzato per visualizzare l'immagine dell'header. Poi aggiungi il CSS per apportare la modifica. Il CSS esatto che utilizzerai dipende dal tema.

Firebug ti permette di modificare temporaneamente il CSS per ottenere l'effetto desiderato, poi puoi copiare quel nuovo CSS nella pagina CSS del tema (se questa opzione è disponibile).

Se non c'è un'opzione 'CSS personalizzato' nel tuo tema, il modo migliore è creare un child theme (ci sono molti tutorial su come farlo), e aggiungere il tuo CSS personalizzato nel file styles.css del child theme. (Non modificare mai il tema genitore; le tue modifiche verranno sovrascritte al prossimo aggiornamento del tema.)

Ho affrontato questo problema prima configurando un child theme (passaggio raccomandato da WP). Poi nel file style.css del child theme, ho aggiunto il CSS qui sotto. La prima sezione controlla l'altezza dell'immagine nella pagina principale; la seconda sezione controlla l'altezza dello spazio per l'immagine nella pagina principale. Entrambe devono corrispondere per far funzionare il tutto. Ho commentato alcune righe che interferivano con la mia immagine a altezza fissa. Ora l'header nella home page è esattamente lo stesso 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;
}

Ho scoperto che questa soluzione ha risolto il mio problema, dove la proprietà object-position mi ha permesso di spostare l'immagine a sinistra e a destra/su e giù.

img.wp-image-70 {
  max-height:250px;
    object-position: 0 10%;
    object-fit: cover;
}