wordpress-theme 2017: featured image behaviour: where to set the height of the featured image!?

[tarifa]

Hi there, good day dear community,

after having nailed down several issues with the set up of the theme twentyseventeen - 
the question today is: wordpress-theme 2017: featured image behaviour: where to set the height of the featured image!? 

 

Well while i was doing a little google-search i have found the following; I have been searching on the whole net in order to find something useful for the solution that i can apply various (different) on the WordPress-twentyseventeen-theme: Well what is wanted and what is needed: I have found a way to resize the so called featured image of the theme because its way too big. On post pages when you put a featured image its a perfect size on all devices, but when I try to put featured image on a regular page its way to big as well.

see the page: http://www.job-starter.com/  -  a truely beta-beta-page that only serves as a demo. 

see the images that are way too big: The questions are the following ones:

– how can I adjust the size so I can make like a header for the different pages, lets say i take the following size: 800 x 175

– can i do this by pasting this little text-chunk at the end of the css – in the so called css-file:

i have this following code in the theme-customizer - "additional CSS"

question: what do i need to change - in order to make the featured image smaller!?

see the code:

`

.wrap { max-width: 1366px; }

.wrap { max-width: 1366px; }

/*For Content*/
.has-sidebar:not(.error404) #primary {
width: 60%
}

/*For Sidebar*/
.has-sidebar #secondary {
width: 30%
}

/*Responsive*/
@media(max-width:768px) {
/*For Content*/
.has-sidebar:not(.error404) #primary {
width: 100%
}

/*For Sidebar*/
.has-sidebar #secondary {
width: 100%
}
}

/* STRUCTURE */

.wrap {
max-width: 80% !important;
}

.page.page-one-column:not(.twentyseventeen-front-page) #primary {
max-width: 100% !important;
}

@media screen and (min-width: 48em) {
.wrap {
max-width: 80% !important;
}
}

@media screen and (min-width: 30em) {

.page-one-column .panel-content .wrap {
max-width: 80% !important;
}
}

@media screen and (max-width: 650px) {

.wrap {
max-width: 95% !important;
}
}

[/code]

 

for any and all help i thank you - all help will be greatly appreciated

[tarifa]

hi there, 

i tried out some methods to do this customization: 

 

i navigated to the theme folder of "twentyseventeen" and opened the functions.iphp file. Afterwards i went to line no. "54" and tried out below code.

add_image_size( 'twentyseventeen-featured-image', 2000, 1200, true );

well my findings: i tried it out - changed all the both two values in this line - but with allmost no effect - i try to do further investigations. 

 

i tried out some methods to do this customization: 

i navigated to the theme folder of "twentyseventeen" and opened the functions.iphp file. Afterwards i went to line no. "54" and tried out below code.

add_image_size( 'twentyseventeen-featured-image', 2000, 1200, true );

well my findings: i tried it out - changed all the both two values in this line - but with allmost no effect - i try to do further investigations. 

see tbe page at: http://www.job-starter.com

love to hear from you

best regards

 

see tbe page at: http://www.job-starter.com

love to hear from you

best regards

[tarifa]

hello again good day 

 

- good day according to this page 

 

https://wordpress.org/support/topic/set-featured-image-is-huge-on-home-page/

 

found out more interesting approaches:   the people there discuss the following: 

 

 

citation of the above mentioned thread:

 

The panel background images are set to “cover” the open area with any photo or graphic with the following default CSS code from the theme:

 

 

.panel-image {
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    position: relative;
}

 

 

Basically any featured image you apply to the page will be stretched to cover the area which is why your logo is oversized.

If you are still wanting to use your logo in that spot, then you need to add some custom CSS to the Additional CSS tab in the customizer to target that specific post featured image. The ID of your page there is 39, so it would have to be:

 

.post-39 .panel-image {
    background-size: auto;
}

 

 

You can also adjust the open space as well by adding a height such as:

 

height: 40vh;

 

Then your custom CSS would be something like:

 

@media screen and (min-width: 48em) {
   .post-39 .panel-image {height: 40vh;}
}

All together your CSS would be:

 

.post-39 .panel-image {
    background-size: auto;
}
@media screen and (min-width: 48em) {
   .post-39 .panel-image {height: 40vh;}
}

and subsequently....  they adviced to try this:

 

@media screen and (min-width: 48em) {
.background-fixed .panel-image {
    background-attachment: initial;
}

it should sort out the scrolling issue

Well at the moment i just struggle a  bit with the different approaches. 

i try to  figure out which one will fit here. 

look forward to hear from you 

many thanks for any and all help 

greetings

[Forum staff Moderator]

This topic was automatically locked because it did not receive any replies for a year. If you want to have this topic reopened

• please contact any staff moderator or
• report the first post of the topic with the reason why it should be reopened.

Thank you.