Cum modific înălțimea imaginii din antet în Twenty Seventeen?

Am găsit (o parte) din codul CSS care controlează înălțimea în wp-content/themes/twentyseventeen/style.css.

Există cod care se aplică când bara de administrare nu este vizibilă (utilizator anonim tipic), momentan la linia 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;
}

Și cod care se aplică când bara de administrare este vizibilă (de ex. ești autentificat), momentan la linia 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);
}

Și apoi cod care se aplică pe dispozitive mobile, momentan la linia 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%;
}

Copiind aceste trei secțiuni de CSS în style.css-ul temei mele copil și modificând atributul height, am reușit să ajustez înălțimea pentru imaginea de antet pe pagina principală. Am setat înălțimea la 30vh, calc(30vh - 32px) și respectiv 30vh în fiecare secțiune. Am lăsat primul height: 1200px neschimbat.

Rețineți că elementul de înălțime este setat la 100vh, care dimensionează înălțimea relativ la înălțimea viewport-ului. Deci 100vh înseamnă 100% din înălțimea viewport-ului, în timp ce 50vh înseamnă 50% din înălțimea viewport-ului.

Un lucru ciudat este că pe pagina principală, zoom-ul și poziția imaginii de antet sunt diferite față de alte pagini.

Nu sunt sigur dacă aceasta este cea mai bună metodă. Sunt deschis la opțiuni mai bune, dar până acum funcționează la un nivel de bază.

Doar editează tema din panoul de control și adaugă următoarea definiție CSS în secțiunea temei "CSS personalizat":

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

Dintr-un comentariu pe care l-am făcut la răspunsul lui @User (care e un nume mișto) ;) m-am gândit să încerc și eu.

Editez fișierul temei direct pentru că lucrez într-un container docker pe care îl pot arunca, e mai mult o dovadă a conceptului. Adaptarea la un child theme va necesita niște ajustări.

În content/themes/twentyseventeen/style.css în zona dintre 3680~3670 (aproximativ) se află stilul pentru imaginea din header.

Codul original:

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

Modificarea dimensiunii (și ordinea) este suficientă pentru a obține vizualizarea fără autentificare:

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

Am lăsat vh și % pentru a acoperi cazurile în care max-height nu este atins, dar am setat max-height la valoarea dorită.

Există o problemă la toate astea:

Este secțiunea de sus a imaginii. Deci dacă nu ai o porțiune frumoasă a imaginii în acea zonă... Arată groaznic (multe capete tăiate)

Mai multe detalii urmează (când le rezolv)

Furat de pe acest site

Acest CSS suplimentar/personalizat a funcționat pentru mine:

/*Ecran de calculator*/
@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;*/
    }
}

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

/* Ecran de calculator cu utilizator autentificat și bara de admin afișată în 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);
    }
}

Puteți seta înălțimea dorită pentru atributele 'height'.

Puteți modifica imaginea prin decupare. În WordPress, există o opțiune în personalizator. Trebuie să urmați pașii de mai jos pentru a decupa imaginea.

    1) Accesați Aspect->Personalizare
    2) Media antet
    3) Adăugați o imagine nouă și apoi decupați acea imagine în funcție de nevoile dvs. și ați terminat.

Puteți folosi Firebug (sau să vizualizați codul sursă al paginii) pentru a găsi CSS-ul folosit pentru afișarea imaginii din antet. Apoi adăugați CSS-ul pentru a face modificarea. CSS-ul exact pe care îl utilizați depinde de tema aleasă.

Firebug vă permite să modificați temporar CSS-ul pentru a obține aspectul dorit, apoi să copiați noul CSS în pagina CSS a temei (dacă această opțiune există).

Dacă nu există o opțiune de 'CSS personalizat' în tema dumneavoastră, atunci cea mai bună metodă este să creați o temă copil (există multe tutoriale pe acest subiect) și să adăugați CSS-ul personalizat în pagina styles.css a temei copil. (Niciodată nu modificați tema părinte; modificările vor fi suprascrise la următoarea actualizare a temei.)

Am abordat acest lucru mai întâi prin crearea unei teme copil (pas recomandat de WordPress). Apoi, în fișierul style.css al temei copil, am adăugat codul CSS de mai jos. Prima secțiune controlează înălțimea imaginii de pe pagina principală; a doua secțiune controlează înălțimea spațiului destinat imaginii de pe pagina principală. Ambele trebuie să corespundă pentru ca această soluție să funcționeze. Am comentat câteva linii care interferează cu înălțimea fixă a imaginii mele. Acum antetul de pe pagina principală este exact la fel ca pe celelalte pagini.

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

Am descoperit că aceasta mi-a rezolvat problema, unde proprietatea object-position mi-a permis să mut imaginea la stânga și la dreapta/sus și jos.

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