twentyseventeen featured image behaviour: where to add this

Einfach Dinge, die nichts mit XAMPP, Apache Friends, Apache, MySQL, PHP und alle dem zu tun haben. Allerlei halt. ;)

twentyseventeen featured image behaviour: where to add this

Postby unleash_it » 06. January 2020 18:03

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
for Wordpress-development :: super toolkits a. http://wpgear.org/ :: and b. github.com/miziomon/awesome-wordpress
:: Awesome WordPress: A curated list of amazingly awesome WordPress resources, themes, plugins and shiny things.
User avatar
unleash_it
 
Posts: 174
Joined: 10. December 2011 18:32
Operating System: linux opensuse 12.1

Re: twentyseventeen featured image behaviour: where to add t

Postby unleash_it » 07. January 2020 17:42

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.
for Wordpress-development :: super toolkits a. http://wpgear.org/ :: and b. github.com/miziomon/awesome-wordpress
:: Awesome WordPress: A curated list of amazingly awesome WordPress resources, themes, plugins and shiny things.
User avatar
unleash_it
 
Posts: 174
Joined: 10. December 2011 18:32
Operating System: linux opensuse 12.1


Return to Allerlei

Who is online

Users browsing this forum: No registered users and 1 guest