Twentyseventeen: Höhe der Featured Images einstellen - Welche Ansätze gibt es hier?

Hallo und guten Abend,

wie kann man die Höhe der Featured Images in dem Theme twentyseventeen ändern: ich habe das Theme eingestellt auf folgende Basis-Einstellung:

- Static-Homepage.
- Post-Page.

Also nun sollte das mit dem Parallax-Effekt laufen - was auch schon geht. Nun will ich die Höhe der Featured-Images noch abstimmen und einstellen.

Vorweg: oft wird geraten ein 'Child-Theme anzulegen. Das habe ich nun nicht gleich g emacht sondern erst einmal ausprobiert, welche Möglichkeiten es denn gibt - bzw. auf welche Änderungen und Einstellungen das Featured Image denn überhaupt reagiert!?

im Theme-customizer – habe ich diesen CSS-Code im “additional CSS”-Fenster:

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

Mein allererster Ansatz - die Höhe zu korrigieren ist folgender: - Im Ordner “twentyseventeen” die functions.php öffnen:

Dort gehe ich zur Zeile: “54”

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

Hier versuche ich neue - andere Werte - einzustellen. Doch das hat leider nicht zum Erfolg geführt:

Bei einer weiteren Suche habe ich ich folgenden Ansatz im internationalen Forum gefunden:

https://wordpress.org/support/topic/…e-on-home-page/

dort wird ein anderer Ansatz verfolgt und diskutiert:

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

Ende des Zitats aus https://wordpress.org/support/topic/…e-on-home-page/

Ich werde nun einiges ausprobieren und sehen ob ich eine Lösung finde.

Melde mich wieder.

VG Lin