The default Twenty Seventeen post and page featured images appear quite large in height especially on a laptop or computer screen. The height of these featured images can be reduced in size.
The default height of single post and page featured images.
A reduced height single post and page featured image.
The height of the featured image in this example has been reduced in size to 33% of the height of the screen.
Where and how to change the height of single post and page featured images:
In WordPress Admin > Appearance > Edit CSS.
Enter the CSS code below.
- The 33vh height sets the size of the images to 33 percent of the height of the screen.
- The object-fit line ensures that the image retains it’s original proportions and is cropped to fit the shape of the featured image bounding rectangle.
The CSS code:
.single-featured-image-header img {
/* display: block; */
/* margin: auto; */
height: 33vh;
object-fit: cover;
}
I have used the code and it works as designed. I am having an issue determining the actual size of a custom header image I would like to use. How exactly would I accomplish this, i,e, changing % to a fixed dimension. Also, if I may, is it possible to have the header image be the same size on front page and posts? thank you for this great site!
Hello,
Instead of using vh which defines the percentage of the Vertical Height, use px which will define the number of pixels for the height.
You can add vertical padding to the headers on posts and pages using the CSS code at link below, and you will have to adjust the numbers to suit the height you want.
https://karavadra.net/reduce-header-height-size-twenty-seventeen-theme-front-page/#comment-265
Perfect! Just tried it out and works as described. Thanks much!
Thanks for the queries and the solutions/comments so far. Can you please help me to understand then implement a change to Featured Image Height. The Front Page/static page is set with a height which fits the main landing page banner image. I have four subsidiarity pages/panels to put Featured Images onto to achieve the parallax function and there will be a separate height for each of these four images.
I understand by “I put the CSS code into WP-ADMIN > Apariencia > Personalizar > CSS adicional …” in a reply to Esther that this was not entered into Customizer > Additional CSS. I expect this will affect all headers in all front page panels. Does this mean all images must carry the same height attribute?
To get maximum effect and flexibility I would hope to chop n change Featured Images from time to time. A universal image height may restrict that.
Thanks
Phil
Hello Phil,
The area at WP-ADMIN > Apariencia > Personalizar > CSS adicional is the same as the area at Customizer > Additional CSS. The former is written in Spanish as the site I was referring to had a Spanish WordPress installation, and yes the code at https://karavadra.net/reduce-size-front-page-panels-twenty-seventeen-theme/ will affect all the headers on the front page.
Without knowing how each chop and change of a panel image should appear for each panel and it’s size, the code cannot be written. The images are also scaled so that they effectively fill the viewable area of the browser whilst keeping the image proportions so that the image does not get squashed or stretched.
With these many qualities of the panel images, customizing the appearance of each one every time a panel image is resized, how it should appear, and what the panel height should be, could require a lot of management than it may be worth, and the coding to create this could be quite complex. However, you know your priorities, but it is not something that I can look into at the moment.
Got it. Thanks. Good New Year everyone.
Hi!
I have just tried the CSS code and it´s not working??
Hello Esther, I just tried it again and it works. If you are still cannot get it to work then please use the Ask For Help link at the bottom of the page and send me the login URL, username and password for your WordPress installation and I can look into it for you.
Hi Bharat, just sent you the details.
Thank you very much in advance for your help!
Esther
Esther,
Thank you for the login. I put the CSS code into WP-ADMIN > Apariencia > Personalizar > CSS adicional and saved it and it seems to be working OK.
:(… I just don´t see the difference!
Is it me!?
Look at your services page and you will see the height of image with the 4 people being much less. Try removing the code I added and then look at the page again and it should appear at full height.
Just realised what´s been happening.
I misunderstood the whole thing. I though you were referring to the front page in this post, but now I see that the changes are taking place… in the individual pages.
Sorry for the misunderstanding… really!
I thought the instructiones were for the front page…
Thanks a lot anyway!
Esther, the front page header height can also be reduced. See here https://karavadra.net/reduce-header-height-size-twenty-seventeen-theme-front-page/
Yes, I know. I had seen your post earlier this morning (i´m ahead of you, Madrid). But it´s precisely the rest of the images that I wanted to reduce. But honestly, you´ve done enough. I don´t want to drive you crazy. It was just a test drive of the theme. Which, by the way, the more i dig into it, the more i dislike it… :(
Thank you thank you!
Esther
I am assuming you want to reducing the size of the front-page panels below the main header and if so and as I have already written a post about it, I thought I would let you know. It’s here: https://karavadra.net/reduce-size-front-page-panels-twenty-seventeen-theme/
Best wishes.
You are assumin well. That´s it. And i hand´t seen that particular post. Must have slipped somewhere while reading. I´m going to try that one. Thanks again and have a happy rest of the evening.