twentyseventeen featured image behaviour: where to add this

[unleash_it]

hello and good day dear all,

i really like this theme and the way the featured images scroll between sections of the homepage (i think what i’m referring to is the parallax animation)

see here an example of the parallax-effect-theme: https://www.walkervillevet.com.au/ and here cf: https://premium.wpmudev.org/blog/twenty ... ess-theme/

The first thing you need to do is to create a few pages:
Create a page to serve as your static homepage.
Create a page to serve as your blog or posts page.

Step 2: Add a Featured Image to Each Page
In order to achieve the parallax image effect, i guess that i need to add a large featured image to each page that will be part of your front page sections.
You will probably not want to add a featured image to the home page you created in the previous step,

note: i was able to add

- home-page
- post-page

but then i need to want to add a featured image to every other page.
note: for me - it is not really clear where i can add the image

how - which are the steps!?

look forward to hear from you

[unleash_it]

Hi there, good day dear community,

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 header 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.



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:

@media screen and (min-width: 48em) {
.panel-image {
height: 175px;
}}

ps - i also found an additional HowTo that goes into this direction: cf:

How To Reduce The Header Height Size Of The Twenty Seventeen Theme Front Page
https://medium.com/@bharatkaravadra/how ... 2f1230044c


it notes several good an valid points;

The default Twenty Seventeen front page header image uses the full height of the screen except for the menu that appears underneath. This size of this header can be changed.

Code: Select all

A reduced height header image.
The height of the header has been reduced by 50% in this example. Note that the header height includes the main navigation menu and so the image appears
a little less than 50% in height.


Where and how to change the height of the header.
In WordPress Admin > Appearance > Edit CSS.
Enter the CSS code below.
The first section is for a computer / laptop screen.
The second section is for a tablet or phone screen.
The third is the same as the first but for logged in users where the WordPress admin bar.
The CSS code:
/*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);
   }
}


what do you tink about this!?


Thanks in advance.