¿Cómo cambio la altura de la imagen del encabezado en Twenty Seventeen?

¿Cómo cambio la altura de la imagen del encabezado (especificada en la sección Medios del encabezado) en el tema Veinte diecisiete?

Específicamente quiero cambiarlo en la página de inicio porque aquí llena casi toda la página. Quiero que sea mucho más corto. La forma en que aparece en otras páginas, como la página Acerca de incorporada, tiene una buena altura, por lo que si pudiera imitar eso en la página de inicio, estaría satisfecho. Aunque saber cómo hacer un control preciso sería genial.

Encontré (parte) del código CSS que controla la altura wp-content/themes/twentyseventeen/style.css.

Hay un código que se aplica cuando la barra de administración no está visible (usuario anónimo típico) actualmente en la línea 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;
}

Y el código que se aplica cuando la barra de administración está visible (por ejemplo, ha iniciado sesión) actualmente en la línea 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);
}

Y luego el código que se aplica en dispositivos móviles actualmente en la línea 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%;
}

Al copiar estas tres secciones de css en style.css del tema de mi hijo y modificar el heightatributo pude ajustar la altura de la imagen del encabezado en la página de inicio. I fijar la altura a 30vh, calc(30vh - 32px)y 30vhrespectivamente en cada sección. Dejé el primero height: 1200pxsolo.

Tenga en cuenta que el elemento de altura se establece en los 100vhtamaños de la altura en relación con la altura de la ventana gráfica. Entonces 100vh es el 100% de la ventana gráfica mientras que 50vh es el 50% de la ventana gráfica.

Una cosa extraña es que en la página de inicio el zoom y la posición de la imagen del encabezado son diferentes que en otras páginas.

No estoy seguro si esta es la mejor manera. Estoy abierto a mejores opciones, pero hasta ahora funciona a un nivel básico.

Simplemente edite el tema desde el tablero y agregue la siguiente definición de CSS en la sección de tema "CSS personalizado":

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

De un comentario que hice en la respuesta de @ User (ese es un nombre genial);) Pensé que lo probaría.

Estoy editando el archivo de tema directamente porque estoy trabajando en un contenedor acoplable desechable, es más una prueba de concepto. Adaptarlo a un tema secundario necesitará algunos ajustes.

En content/themes/twentyseventeen/style.cssel área entre 3680 ~ 3670ish es donde se encuentra la imagen del encabezado.

código 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;
}

Cambiar el tamaño (y el orden) es lo suficientemente bueno para lograr la vista desconectada:

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

He dejado el vhy el %para cubrir esas bases donde max-heightno se alcanza, pero luego configuré max-heightlo que buscas.

Hay una advertencia para todo esto:

Es la sección superior de píxeles. Entonces, a menos que tenga una buena porción de imagen en esa área ... Se ve horrible (muchas cabezas cortadas)

más para seguir (cuando lo resuelva)

Puedes cambiarlo recortando la imagen. En WordPress, hay una opción como personalizador. Debe seguir los pasos a continuación para recortar la imagen.

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

Puede usar Firebug (o mirar el código fuente de la página) para encontrar el CSS utilizado para mostrar la imagen del encabezado. Luego agregue el CSS para hacer el cambio. El CSS exacto que usa depende del tema.

Firebug le permite cambiar el CSS temporalmente para obtenerlo como desea, luego copie ese nuevo CSS en la página CSS del tema (si tiene esa opción).

Si no hay una opción de 'CSS personalizado' en su tema, la mejor manera es crear un tema secundario (muchos tutoriales sobre eso) y agregar su CSS personalizado en la página styles.css de ese tema secundario. (Nunca cambie el tema principal; sus cambios se sobrescribirán en la próxima actualización del tema).

Me acerqué a esto configurando primero un tema secundario (paso recomendado por WP). Luego, en el archivo style.css del tema secundario, agregué el css a continuación. La primera sección controla la altura de la imagen en la portada; la segunda sección controla la altura del espacio para la imagen en la portada. Ambos tienen que coincidir para que esto funcione. Comenté algunas líneas que interferían con mi imagen de altura fija. Ahora mi encabezado en la página de inicio es exactamente el mismo que en todas las demás páginas.

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