Jump to content
Sign in to follow this  
dil_bert

WordPress: some words about the Twenty Seventeen-theme: make height of featured pictures customizable

Recommended Posts

Posted (edited)

hello dear Experts - good day dear PHPFreaks.

 

some more musings about the Twenty Seventeen-theme: make height of featured pictures customizable

 

the idea:  I’d like to use Twenty Seventeen, but I’d need to be able to reduce the height of the featured images.


so lets see what is possible to do here:
 

eg the following settings & customization:

 
- Format 2:1 should work for us (so I can show the picture and the start of the text on the same screen  (that is on the same page)
without scrolling).
- What do you think about this idea!? How can we achieve this!?


what i have done so far is the following:
- I uploaded a picture to the page in the format 2:1, but it just gets cropped to fill the whole screen again.
- Both on the homepage with the parallax effect, on the single pages and in single blog posts.


i guess that we are able to reduce the height of a so called featured images with custom CSS.
There may some different code be needed depending which specific images we ’d like to affect,


i am not sure if there are some differnt behaviour in the categfrories like the following:

a - home-page
b - post-page


let us see some examples:

– for example, the panels on the front page may need a very very different CSS than featured images on pages or posts.
If we take this for example then the CSS would reduce the height of featured images on single posts and pages, for example:

See the following code:

 

.single-featured-image-header {
  height: 500px;
}


well to be frank: we may be able to modify the height value as we like, and if we wanted it to apply only on certain screen sizes, we can add a media query to it.


well  - probably we want to change more than the height of the featured image.
or we want to change the media queries. 
or we want to fine-tune the site. 

there are lots of things that we can do. 

 

	The CSS could be like so:
	#panel1 .panel-image {
  height: 300px; /* reduce height of plant */
}
#panel1 .panel-image::before, #post-2 .panel-image::before {
  background: none; /* remove gradient effect so no grey bar visible */
}
	#panel2 .panel-image {
  height: 300px; /* reduce height of plant */
}
	#panel2 .panel-image::before, #post-2 .panel-image::before {
  background: none; /* remove gradient effect so no grey bar visible */
}
	#post-2 .panel-image {
  height: 300px; /* reduce height of people at table */
}


 

more ideas and more about this topic in the next days

by the way: see some examplesites: eg here 

https://manuschwendener.ch/
https://2017.wordpress.net/
 

Edited by dil_bert

Share this post


Link to post
Share on other sites

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. 


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

love to hear from you

best regards

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.