Wie ändere ich die Höhe des Headerbildes in Twenty Seventeen?

Wie ändere ich die Höhe des Header-Bildes (im Abschnitt “Header-Medien” angegeben) im Twenty Seventeen Theme?

Insbesondere möchte ich es auf der Homepage ändern, da hier fast die gesamte Seite ausgefüllt ist. Ich möchte, dass es viel kürzer ist. Die Art und Weise, wie sie auf anderen Seiten wie der eingebauten Info-Seite erscheint, hat eine gute Höhe. Wenn ich das auf der Homepage nachahmen könnte, wäre ich zufrieden. Obwohl es sehr gut wäre, genaue Kontrolle zu haben.

Solutions Collecting From Web of "Wie ändere ich die Höhe des Headerbildes in Twenty Seventeen?"

Sie können es ändern, indem Sie das Bild zuschneiden. In WordPress gibt es eine Option als Customizer. Sie müssen die folgenden Schritte zum Zuschneiden des Bildes befolgen.

  1) Go appearance->customize 2) Header media 3) add a new image and then crop that image as per your needs and you go. 

Sie könnten Firebug verwenden (oder den Quellcode der Seite ansehen), um das CSS zu finden, das zum Anzeigen des Header-Bildes verwendet wird. Fügen Sie dann das CSS hinzu, um die Änderung vorzunehmen. Das genaue CSS, das Sie verwenden, hängt vom Thema ab.

Mit Firebug können Sie das CSS vorübergehend ändern, um es wie gewünscht zu erhalten, und dann das neue CSS in die CSS-Seite des Themas kopieren (wenn es diese Option hat).

Wenn in Ihrem Design keine benutzerdefinierte CSS-Option vorhanden ist, erstellen Sie am besten ein untergeordnetes Thema (viele Tutorials dazu) und fügen Sie Ihre benutzerdefinierte CSS-Datei zur Seite styles.css des untergeordneten Designs hinzu. (Ändern Sie niemals das übergeordnete Thema; Ihre Änderungen werden beim nächsten Thema-Update überschrieben.)

Ich habe einen Teil des CSS-Codes gefunden, der die Höhe in wp-content/themes/twentyseventeen/style.css .

Es gibt einen Code, der gilt, wenn die Admin-Leiste in Zeile 3629 nicht sichtbar ist (typischer anonymer Benutzer)

 .twentyseventeen-front-page.has-header-image .custom-header-media, .twentyseventeen-front-page.has-header-video .custom-header-media, .home.blog.has-header-image .custom-header-media, .home.blog.has-header-video .custom-header-media { height: 1200px; height: 100vh; max-height: 100%; overflow: hidden; } 

Und Code, der gilt, wenn die Admin-Leiste sichtbar ist (z. B. Sie sind angemeldet), befindet sich derzeit in Zeile 3646

 .admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media, .admin-bar.twentyseventeen-front-page.has-header-video .custom-header-media, .admin-bar.home.blog.has-header-image .custom-header-media, .admin-bar.home.blog.has-header-video .custom-header-media { height: calc(100vh - 32px); } 

Und dann Code, der auf Handy derzeit bei Zeile 1638 gilt:

 .has-header-image.twentyseventeen-front-page .custom-header, .has-header-video.twentyseventeen-front-page .custom-header, .has-header-image.home.blog .custom-header, .has-header-video.home.blog .custom-header { display: table; height: 300px; height: 75vh; width: 100%; } 

Durch Kopieren dieser drei CSS-Abschnitte in die style.css meines untergeordneten Themas und Ändern des height Attributs konnte ich die Höhe für das Header-Bild auf der Homepage optimieren. Ich 30vh die Höhe auf 30vh , calc(30vh - 32px) und 30vh jeweils in jedem Abschnitt. Ich habe die erste height: 1200px allein.

Beachten Sie, dass das Element 100vh auf 100vh und die Höhe relativ zur Höhe des Ansichtsfensters ist. So ist 100vh 100% des Ansichtsfensters, während 50vh 50% des Ansichtsfensters ist.

Eine seltsame Sache ist, dass auf der Startseite der Zoom und die Position des Header-Bildes anders ist als auf anderen Seiten.

Nicht sicher, ob dies der beste Weg ist. Ich bin offen für bessere Optionen, aber bisher funktioniert es auf einer einfachen Ebene.

Von einem Kommentar habe ich in @ User’s Antwort (das ist ein cooler Name);) Ich dachte, ich würde es ausprobieren.

Ich bearbeite die Theme-Datei direkt, weil ich in einem Wegwerf-Andock-Container arbeite, es ist mehr Proof of Concept. Die Anpassung an ein untergeordnetes Thema erfordert einige Optimierungen.

In content/themes/twentyseventeen/style.css im Bereich zwischen 3680 ~ 3670ish ist, wo das Headerbild liegt.

Originalcode:

 .twentyseventeen-front-page.has-header-image .custom-header-media, .twentyseventeen-front-page.has-header-video .custom-header-media, .home.blog.has-header-image .custom-header-media, .home.blog.has-header-video .custom-header-media { height: 1200px; height: 100vh; max-height: 100%; overflow: hidden; } 

Ändern der Größe (und Reihenfolge) ist gut genug, um die ausgeloggte Ansicht zu erreichen:

  height: 100vh; height: 100%; max-height: 500px; 

Ich habe den vh und den % , um die Basen abzudecken, bei denen die max-height nicht erreicht wird, aber max-height dann die max-height auf das ein, was du willst.

Es gibt eine Einschränkung zu allem:

Es ist der oberste Bereich von Pixeln. Also, es sei denn, Sie haben eine schöne Portion Bild in diesem Bereich … Es sieht beschissen aus (viele Köpfe abgehackt)

mehr zu folgen (wenn ich es sortiere)

in functions.php Gehe zu line 54 add_image_size( 'twentyseventeen-featured-image', 2000, 1200, true ); 2000 ist die Höhe und 1200 ist die Breite. ändern Sie sich nach Ihrem Bedarf.