How do I change the header image height in Twenty Seventeen?

Question

How do I change the height of the header image (specified in the Header Media section) in the Twenty Seventeen Theme?

Specifically I want to change it on the home page because here it fills up nearly the entire page. I want it to be much shorter. The way it appears on other pages such as the built-in About page has a good height so if I could mimic that on the home page I would be satisfied. Although knowing how to do precise control would be great.

Answer 1

I found (part) of the css code that controls the height in wp-content/themes/twentyseventeen/style.css.

There is code that applies when the admin bar is not visible (typical anonymous user) currently at line 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;
}

And code that applies when the admin bar is visible (e.g. you are logged in) currently at line 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);
}

And then code that applies on mobile currently at line 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%;
}

By copying these three sections of css into my child theme's style.css and modifying the height attribute I was able to tweak the height for the header image on the home page. I set the height to 30vh, calc(30vh - 32px), and 30vh respectively in each section. I left the first height: 1200px alone.

Note the height element is set at 100vh which sizes the height relative to the viewport height. So 100vh is 100% of the viewport while 50vh is 50% of the viewport.

One odd thing is that on the home page the zoom and position of the header image is different than on other pages.

Not sure if this is the best way. I'm open to better options but so far it's working at a basic level.

Answer 2

Just edit the theme from the dashboard and add the following CSS definition into the theme section "custom css":

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

Answer 3

From a comment I made in @User's answer (that's a cool name) ;) I thought I would give it a go.

I am editing the theme file directly because I am working in a throw-away docker container, it is more proof of concept. Adapting it to a child theme will need some tweaking.

In content/themes/twentyseventeen/style.css in the area between 3680~3670ish is where the header image lies.

original code:

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

Changing the size (and order) is good enough to achieve the logged out view:

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

I have left the vh and the % to cover those bases where max-height isn't reached, but then set the max-height to what you're after.

There is one caveat to all this:

It's the very top section of pixels. So unless you have a nice portion of image in that area... It looks crappy (many heads chopped off)

more to follow (when I sort it out)

Answer 4

Stole from this site

This additional/custom CSS worked for me :

/*Computer screen */
@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;*/
    }
}

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

/* Computer screen with logged in user and admin bar showing on 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);
    }
}

You can set the desired height oh 'height' attributes.

Answer 5

You can be changed it by cropping the image. in WordPress, there is an option as customizer. You need to follow below steps for cropping 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.

Answer 6

You could use Firebug (or look at the page source code) to find the CSS used to display the header image. Then add the CSS to make the change. The exact CSS you use is dependent on the theme.

Firebug lets you change the CSS temporarily to get it how you want, then copy that new CSS into the CSS page of the theme (if it has that option).

If there is no 'custom CSS' option in your theme, then best way is to create a child theme (lots of tutorials on that), and add your custom css into that child theme's styles.css page. (Never change the parent theme; your changes will be overwritten on the next theme update.)

Answer 7

I approached this by first setting up a child theme (recommended step by WP). Then in the style.css file of the child theme, I added the css below. The first section controls the height of the image on the front page; the second section controls the height of the space for the image on the front page. Both have to match for this to work. I commented out some lines that interfered with my fixed height image. Now my header on the home page is exactly the same as on all other 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;
}

Answer 8

I found this solved my problem, where the object-position allowed me to move the image left and right/up and down.

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