Bagaimana cara mengubah ketinggian gambar header di Twenty Seventeen?

Bagaimana cara mengubah ketinggian gambar header (ditentukan di bagian Header Media) di Twenty Seventeen Theme?

Secara khusus saya ingin mengubahnya di halaman rumah karena di sini mengisi hampir seluruh halaman. Saya ingin itu jauh lebih pendek. Cara itu muncul di halaman lain seperti halaman Tentang bawaan memiliki ketinggian yang baik jadi jika saya bisa meniru itu di halaman rumah saya akan puas. Meskipun mengetahui bagaimana melakukan kontrol yang tepat akan sangat bagus.

Saya menemukan (bagian) dari kode css yang mengontrol ketinggian wp-content/themes/twentyseventeen/style.css.

Ada kode yang berlaku ketika bar admin tidak terlihat (pengguna anonim khas) saat ini di baris 3629

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

Dan kode yang berlaku ketika admin bar adalah terlihat (misalnya Anda login) saat ini pada baris 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);
}

Dan kemudian kode yang berlaku di ponsel saat ini di baris 1638:

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

Dengan menyalin tiga bagian css ini ke style.css tema anak saya dan memodifikasi heightatribut saya dapat mengubah tinggi untuk gambar header di halaman rumah. Aku mengatur ketinggian untuk 30vh, calc(30vh - 32px)dan 30vhmasing-masing di setiap bagian. Saya meninggalkan yang pertama height: 1200pxsendirian.

Perhatikan elemen ketinggian diatur di 100vhmana ukuran tinggi relatif terhadap tinggi viewport. Jadi 100vh adalah 100% dari viewport sementara 50vh adalah 50% dari viewport.

Satu hal yang aneh adalah bahwa pada halaman beranda zoom dan posisi gambar header berbeda dari pada halaman lain.

Tidak yakin apakah ini cara terbaik. Saya terbuka untuk opsi yang lebih baik tetapi sejauh ini berfungsi pada tingkat dasar.

Cukup edit tema dari dasbor dan tambahkan definisi CSS berikut ke bagian tema "custom css":

.has-header-image.home.blog .custom-header {
    height: 26vh;
}

Dari komentar yang saya buat di jawaban @ User (itu nama yang keren);) Saya pikir saya akan mencobanya.

Saya mengedit file tema secara langsung karena saya bekerja dalam wadah buruh pelabuhan yang dibuang, itu lebih merupakan bukti konsep. Menyesuaikannya dengan tema anak akan membutuhkan sedikit penyesuaian.

Di content/themes/twentyseventeen/style.cssdalam area antara 3680 ~ 3670ish adalah tempat gambar header berada.

kode asli:

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

Mengubah ukuran (dan urutan) cukup baik untuk mencapai tampilan keluar:

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

Saya telah meninggalkan vhdan %untuk menutup pangkalan-pangkalan itu di mana max-heighttidak tercapai, tetapi kemudian mengatur max-heightapa yang Anda cari.

Ada satu peringatan untuk semua ini:

Ini adalah bagian paling atas dari piksel. Jadi kecuali Anda memiliki bagian gambar yang bagus di area itu ... Itu terlihat jelek (banyak kepala terpotong)

lebih banyak untuk diikuti (ketika saya mengatasinya)

Anda dapat mengubahnya dengan memotong gambar. di WordPress, ada opsi sebagai penyesuai. Anda harus mengikuti langkah-langkah di bawah ini untuk memotong gambar.

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

Anda bisa menggunakan Firebug (atau melihat kode sumber halaman) untuk menemukan CSS yang digunakan untuk menampilkan gambar header. Kemudian tambahkan CSS untuk melakukan perubahan. CSS persis yang Anda gunakan tergantung pada tema.

Firebug memungkinkan Anda mengubah CSS sementara untuk mendapatkan apa yang Anda inginkan, lalu salin CSS baru itu ke halaman CSS tema (jika ada opsi itu).

Jika tidak ada opsi 'custom CSS' di tema Anda, maka cara terbaik adalah membuat tema anak (banyak tutorial tentang itu), dan menambahkan custom css Anda ke halaman styles.css tema anak itu. (Jangan pernah mengubah tema induk; perubahan Anda akan ditimpa pada pembaruan tema berikutnya.)

Saya mendekati ini dengan terlebih dahulu mengatur tema anak (disarankan langkah oleh WP). Kemudian dalam file style.css dari tema anak, saya menambahkan css di bawah ini. Bagian pertama mengontrol ketinggian gambar di halaman depan; bagian kedua mengontrol ketinggian ruang untuk gambar di halaman depan. Keduanya harus cocok agar ini berfungsi. Saya berkomentar beberapa garis yang mengganggu gambar ketinggian tetap saya. Sekarang tajuk saya di halaman beranda persis sama dengan di semua halaman lainnya.

.has-header-image .custom-header-media img, 
.has-header-video .custom-header-media video, 
.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
    /* height: 100%; */
    height: 400px;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    top: 0;
    -ms-transform: none;
    -moz-transform: none;
    -webkit-transform: none;
    transform: none;
    width: 100%;
}
.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: 400px;
    /* height: 100vh; */
    /* max-height: 100%; */
    overflow: hidden;
}