Comment modifier la hauteur de l'image d'en-tête dans Twenty Seventeen?

Comment puis-je modifier la hauteur de l'image d'en-tête (spécifiée dans la section Médias d'en-tête) dans le thème Twenty Seventeen?

Plus précisément, je veux le changer sur la page d'accueil car ici, il remplit presque toute la page. Je veux que ce soit beaucoup plus court. La façon dont il apparaît sur d'autres pages, comme la page À propos intégrée, a une bonne hauteur, donc si je pouvais imiter cela sur la page d'accueil, je serais satisfait. Bien que savoir comment effectuer un contrôle précis serait formidable.

J'ai trouvé (une partie) du code CSS qui contrôle la hauteur wp-content/themes/twentyseventeen/style.css.

Il y a du code qui s'applique lorsque la barre d'administration n'est pas visible (utilisateur anonyme typique) actuellement à la ligne 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;
}

Et le code qui s'applique lorsque la barre d'administration est visible (par exemple, vous êtes connecté) actuellement à la ligne 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);
}

Et puis le code qui s'applique sur mobile actuellement à la ligne 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%;
}

En copiant ces trois sections de CSS dans le style.css de mon thème enfant et en modifiant l' heightattribut, j'ai pu modifier la hauteur de l'image d'en-tête sur la page d'accueil. Je régler la hauteur 30vh, calc(30vh - 32px)et 30vhrespectivement dans chaque section. J'ai laissé le premier height: 1200pxseul.

Notez que l'élément de hauteur est défini à 100vhquelle taille la hauteur par rapport à la hauteur de la fenêtre. 100vh représente donc 100% de la fenêtre d'affichage tandis que 50vh représente 50% de la fenêtre d'affichage.

Une chose étrange est que sur la page d'accueil, le zoom et la position de l'image d'en-tête sont différents de ceux des autres pages.

Je ne sais pas si c'est la meilleure façon. Je suis ouvert à de meilleures options, mais jusqu'à présent, cela fonctionne à un niveau de base.

Modifiez simplement le thème à partir du tableau de bord et ajoutez la définition CSS suivante dans la section de thème "css personnalisé":

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

D'après un commentaire que j'ai fait dans la réponse de @ User (c'est un nom sympa);) J'ai pensé que j'allais essayer.

Je modifie le fichier de thème directement parce que je travaille dans un conteneur docker jetable, c'est plus une preuve de concept. L'adapter à un thème enfant nécessitera quelques ajustements.

Dans content/themes/twentyseventeen/style.cssla zone entre 3680 ~ 3670ish se trouve l'image d'en-tête.

code d'origine:

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

La modification de la taille (et de l'ordre) est suffisante pour obtenir la vue déconnectée:

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

J'ai laissé le vhet le %pour couvrir les bases où il max-heightn'est pas atteint, mais max-heightje règle ensuite le sur ce que vous recherchez.

Il y a une mise en garde à tout cela:

C'est la toute première section de pixels. Donc, à moins que vous n'ayez une belle portion d'image dans cette zone ... Ça a l'air merdique (beaucoup de têtes coupées)

plus à suivre (quand je le trie)

Vous pouvez le modifier en recadrant l'image. dans WordPress, il existe une option de personnalisation. Vous devez suivre les étapes ci-dessous pour recadrer l'image.

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

Vous pouvez utiliser Firebug (ou regarder le code source de la page) pour trouver le CSS utilisé pour afficher l'image d'en-tête. Ajoutez ensuite le CSS pour effectuer le changement. Le CSS exact que vous utilisez dépend du thème.

Firebug vous permet de changer temporairement le CSS pour l'obtenir comme vous le souhaitez, puis copiez ce nouveau CSS dans la page CSS du thème (s'il a cette option).

S'il n'y a pas d'option `` CSS personnalisée '' dans votre thème, la meilleure façon est de créer un thème enfant (beaucoup de tutoriels à ce sujet) et d'ajouter votre CSS personnalisé dans la page styles.css de ce thème enfant. (Ne modifiez jamais le thème parent; vos modifications seront écrasées lors de la prochaine mise à jour du thème.)

J'ai abordé cela en créant d'abord un thème enfant (étape recommandée par WP). Puis dans le fichier style.css du thème enfant, j'ai ajouté le css ci-dessous. La première section contrôle la hauteur de l'image sur la première page; la deuxième section contrôle la hauteur de l'espace pour l'image sur la première page. Les deux doivent correspondre pour que cela fonctionne. J'ai commenté certaines lignes qui interféraient avec mon image à hauteur fixe. Maintenant, mon en-tête sur la page d'accueil est exactement le même que sur toutes les autres pages.

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