twenty-seventeen featured image behaviour: where to add the featured image!?

  • 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-seventeen-wordpress-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 page of these both types.
    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

    • This topic was modified 5 years, 2 months ago by say_hello.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter say_hello

    (@say_hello)

    hi there

    after trying out something – i finally managed to get the trick – in other words. i now know where i can find the button which allows me to add the so called featured image

    but i think that i have to customize – and tailer all that a bit – at the moment (due to beta beta beta it looks pretty un-configured.

    the size – is way too big
    and yes – it all is beta – i just took a image that i have left on the machine..

    but you probably can give me an advice – i should lower the size of the image – should nt i !?

    look forward to hear from you

    greetings

    Thread Starter say_hello

    (@say_hello)

    Hi there, good day dear community,

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

    see the page: https://www.job-starter.com/

    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: 

    
@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-to-reduce-the-header-height-size-of-the-twenty-seventeen-theme-front-page-562f1230044c

    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.

    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 that might help here

    
/*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.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘twenty-seventeen featured image behaviour: where to add the featured image!?’ is closed to new replies.