Como altero a altura da imagem do cabeçalho no Twenty Seventeen?

Como altero a altura da imagem do cabeçalho (especificada na seção Mídia do cabeçalho) no Tema Vinte e dezessete?

Especificamente, quero alterá-lo na página inicial, porque aqui ele preenche quase a página inteira. Eu quero que seja muito mais curto. A maneira como aparece em outras páginas, como a página Sobre interna, tem uma boa altura; portanto, se eu pudesse imitar isso na página inicial, ficaria satisfeito. Embora saber como fazer um controle preciso seria ótimo.

Eu encontrei (parte) do código css que controla a altura em wp-content/themes/twentyseventeen/style.css.

Existe um código que se aplica quando a barra de administração não está visível (usuário anônimo típico) atualmente na linha 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 código que se aplica quando a barra de administração está visível (por exemplo, você está logado) atualmente na linha 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, em seguida, o código que se aplica ao celular atualmente na linha 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 essas três seções do css no style.css do meu tema filho e modificando o heightatributo, fui capaz de ajustar a altura da imagem do cabeçalho na página inicial. I definir a altura a 30vh, calc(30vh - 32px), e 30vh, respectivamente em cada secção. Eu deixei o primeiro height: 1200pxsozinho.

Observe que o elemento height está definido no 100vhtamanho da altura em relação à altura da janela de exibição. Então 100vh é 100% da janela de visualização, enquanto 50vh é 50% da janela de visualização.

Uma coisa estranha é que, na página inicial, o zoom e a posição da imagem do cabeçalho são diferentes dos das outras páginas.

Não tenho certeza se esta é a melhor maneira. Estou aberto a melhores opções, mas até agora está funcionando em um nível básico.

Basta editar o tema no painel e adicionar a seguinte definição de CSS na seção de temas "custom css":

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

De um comentário que fiz na resposta do @ Usuário (esse é um nome legal);) Eu pensei em tentar.

Estou editando o arquivo de tema diretamente porque estou trabalhando em um contêiner de janela de encaixe descartável, é mais uma prova de conceito. A adaptação a um tema infantil precisará de alguns ajustes.

Na content/themes/twentyseventeen/style.cssárea entre 3680 ~ 3670ish é onde está a imagem do cabeçalho.

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

Alterar o tamanho (e a ordem) é bom o suficiente para obter a visualização desconectada:

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

Eu deixei o vhe o %para cobrir as bases onde max-heightnão é alcançado, mas depois defino o max-heightque você procura.

Há uma ressalva em tudo isso:

É a parte superior dos pixels. Portanto, a menos que você tenha uma boa parte da imagem nessa área ... Parece ruim (muitas cabeças cortadas)

mais a seguir (quando eu resolver)

Você pode alterá-lo cortando a imagem. no WordPress, há uma opção como personalizador. Você precisa seguir as etapas abaixo para cortar a imagem.

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

Você pode usar o Firebug (ou consultar o código fonte da página) para encontrar o CSS usado para exibir a imagem do cabeçalho. Em seguida, adicione o CSS para fazer a alteração. O CSS exato que você usa depende do tema.

O Firebug permite alterar temporariamente o CSS para obtê-lo da maneira que você deseja e depois copiar esse novo CSS na página CSS do tema (se houver essa opção).

Se não houver uma opção 'CSS personalizado' no seu tema, a melhor maneira é criar um tema filho (muitos tutoriais) e adicionar seu css personalizado à página styles.css desse tema filho. (Nunca mude o tema principal; suas alterações serão substituídas na próxima atualização do tema.)

Abordei isso configurando primeiro um tema filho (etapa recomendada pelo WP). Em seguida, no arquivo style.css do tema filho, adicionei o css abaixo. A primeira seção controla a altura da imagem na primeira página; a segunda seção controla a altura do espaço para a imagem na primeira página. Ambos têm que corresponder para que isso funcione. Comentei algumas linhas que interferiam na minha imagem de altura fixa. Agora, meu cabeçalho na página inicial é exatamente o mesmo que em todas as outras 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;
}