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

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

Hay código que se aplica cuando la barra de administración no es 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 código que se aplica cuando la barra de administración es visible (por ejemplo, cuando has 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 código que se aplica en 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%;
}

Copiando estas tres secciones de CSS en el style.css de mi tema hijo y modificando el atributo height pude ajustar la altura de la imagen de cabecera en la página de inicio. Establecí la altura en 30vh, calc(30vh - 32px), y 30vh respectivamente en cada sección. Dejé el primer height: 1200px sin cambios.

Nota: el elemento height está configurado en 100vh que dimensiona la altura relativa a la altura del viewport. Así que 100vh es el 100% del viewport mientras que 50vh es el 50% del viewport.

Algo extraño es que en la página de inicio el zoom y la posición de la imagen de cabecera es diferente que en otras páginas.

No estoy seguro si esta es la mejor manera. Estoy abierto a mejores opciones pero por ahora está funcionando a un nivel básico.

Solo edita el tema desde el panel de control y agrega la siguiente definición CSS en la sección del tema "CSS personalizado":

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

De un comentario que hice en la respuesta de @User (qué nombre tan genial) ;) pensé en intentarlo.

Estoy editando el archivo del tema directamente porque estoy trabajando en un contenedor Docker desechable, es más una prueba de concepto. Adaptarlo a un tema hijo requerirá algunos ajustes.

En content/themes/twentyseventeen/style.css en el área entre 3680~3670 aproximadamente 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 suficiente para lograr la vista cuando no se ha iniciado sesión:

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

He dejado el vh y el % para cubrir esos casos donde no se alcanza el max-height, pero luego establezco el max-height a lo que deseas.

Hay una advertencia en todo esto:

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

más por venir (cuando lo resuelva)

Tomado de este sitio

Este CSS adicional/personalizado funcionó para mí:

/* Pantalla de computadora */
@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;*/
    }
}

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

/* Pantalla de computadora con usuario conectado y barra de administración visible en el 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);
    }
}

Puedes establecer la altura deseada en los atributos 'height'.

Puedes cambiarlo recortando la imagen. En WordPress, hay una opción en el personalizador. Debes seguir los siguientes pasos para recortar la imagen:

    1) Ve a Apariencia -> Personalizar
    2) Medios del encabezado
    3) Añade una nueva imagen y luego recórtala según tus necesidades y listo.

Podrías usar Firebug (o mirar el código fuente de la página) para encontrar el CSS que se utiliza para mostrar la imagen del encabezado. Luego añade el CSS para realizar el cambio. El CSS exacto que uses dependerá del tema que estés utilizando.

Firebug te permite cambiar el CSS temporalmente para ajustarlo a tu gusto, luego puedes copiar ese nuevo CSS en la página de CSS del tema (si es que tiene esa opción).

Si tu tema no tiene una opción de 'CSS personalizado', la mejor manera es crear un tema hijo (hay muchos tutoriales sobre esto) y añadir tu CSS personalizado en el archivo styles.css del tema hijo. (Nunca modifiques el tema padre; tus cambios se sobrescribirán en la próxima actualización del tema).

Abordé esto configurando primero un tema hijo (paso recomendado por WP). Luego, en el archivo style.css del tema hijo, agregué el CSS a continuación. La primera sección controla la altura de la imagen en la página de inicio; la segunda sección controla la altura del espacio para la imagen en la página de inicio. Ambas deben coincidir para que esto funcione. Comenté algunas líneas que interferían con mi imagen de altura fija. Ahora mi cabecera en la página de inicio es exactamente igual 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;
}

Encontré que esto resolvió mi problema, donde la propiedad object-position me permitió mover la imagen izquierda y derecha/arriba y abajo.

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