Làm cách nào để thay đổi chiều cao hình ảnh tiêu đề trong Twenty Seventeen?

Làm cách nào để thay đổi chiều cao của hình ảnh tiêu đề (được chỉ định trong phần Tiêu đề phương tiện) trong Chủ đề Twenty Seventeen?

Cụ thể tôi muốn thay đổi nó trên trang chủ vì ở đây nó lấp đầy gần như toàn bộ trang. Tôi muốn nó ngắn hơn nhiều. Cách nó xuất hiện trên các trang khác như trang Giới thiệu tích hợp có chiều cao tốt, vì vậy nếu tôi có thể bắt chước điều đó trên trang chủ, tôi sẽ hài lòng. Mặc dù biết cách kiểm soát chính xác sẽ rất tuyệt.

Tôi tìm thấy (một phần) mã css kiểm soát chiều cao trong wp-content/themes/twentyseventeen/style.css.

Có mã áp dụng khi thanh quản trị viên không hiển thị (người dùng ẩn danh điển hình) hiện tại dòng 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;
}

Và mã mà áp dụng khi thanh quản trị là có thể nhìn thấy (ví dụ bạn đang đăng nhập) hiện tại dòng 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);
}

Và sau đó mã áp dụng trên điện thoại di động hiện tại dòng 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%;
}

Bằng cách sao chép ba phần css này vào style.css của chủ đề con tôi và sửa đổi heightthuộc tính, tôi có thể điều chỉnh chiều cao cho hình ảnh tiêu đề trên trang chủ. Tôi thiết lập chiều cao tới 30vh, calc(30vh - 32px)và 30vhtương ứng trong mỗi phần. Tôi để lại người đầu tiên height: 1200pxmột mình.

Lưu ý yếu tố chiều cao được đặt ở 100vhkích thước chiều cao tương ứng với chiều cao khung nhìn. Vì vậy, 100vh là 100% của chế độ xem trong khi 50vh là 50% của chế độ xem.

Một điều kỳ lạ là trên trang chủ, độ phóng đại và vị trí của hình ảnh tiêu đề khác với các trang khác.

Không chắc chắn nếu đây là cách tốt nhất. Tôi mở cho các tùy chọn tốt hơn nhưng cho đến nay nó vẫn hoạt động ở mức cơ bản.

Chỉ cần chỉnh sửa chủ đề từ bảng điều khiển và thêm định nghĩa CSS sau vào phần chủ đề "custom css":

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

Từ một bình luận tôi đã đưa ra trong câu trả lời của @ Người dùng (đó là một cái tên hay);) Tôi nghĩ rằng tôi sẽ thử.

Tôi đang chỉnh sửa tập tin chủ đề trực tiếp bởi vì tôi đang làm việc trong một container docker, nó là bằng chứng của khái niệm. Thích ứng nó với một chủ đề con sẽ cần một số điều chỉnh.

Trong content/themes/twentyseventeen/style.csskhu vực giữa 3680 ~ 3670ish là nơi hình ảnh tiêu đề nằm.

mã gốc:

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

Thay đổi kích thước (và thứ tự) là đủ tốt để đạt được chế độ xem đăng xuất:

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

Tôi đã để lại vhvà %để trang trải những căn cứ max-heightkhông đạt được, nhưng sau đó đặt thành max-heightnhững gì bạn đang theo đuổi.

Có một cảnh báo cho tất cả điều này:

Đây là phần trên cùng của pixel. Vì vậy, trừ khi bạn có một phần hình ảnh đẹp trong khu vực đó ... Nó trông thật nhảm nhí (nhiều cái đầu bị cắt nhỏ)

nhiều hơn để làm theo (khi tôi sắp xếp nó ra)

Bạn có thể thay đổi nó bằng cách cắt hình ảnh. trong WordPress, có một tùy chọn là tùy biến. Bạn cần làm theo các bước dưới đây để cắt ảnh.

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

Bạn có thể sử dụng Fireorms (hoặc xem mã nguồn trang) để tìm CSS được sử dụng để hiển thị hình ảnh tiêu đề. Sau đó thêm CSS để thực hiện thay đổi. CSS chính xác mà bạn sử dụng phụ thuộc vào chủ đề.

Fireorms cho phép bạn thay đổi CSS tạm thời để có được nó theo cách bạn muốn, sau đó sao chép CSS mới đó vào trang CSS của chủ đề (nếu nó có tùy chọn đó).

Nếu không có tùy chọn 'CSS tùy chỉnh' trong chủ đề của bạn, thì cách tốt nhất là tạo một chủ đề con (rất nhiều hướng dẫn về điều đó) và thêm css tùy chỉnh của bạn vào trang style.css của chủ đề con đó. (Không bao giờ thay đổi chủ đề gốc; các thay đổi của bạn sẽ được ghi đè lên bản cập nhật chủ đề tiếp theo.)

Tôi đã tiếp cận điều này bằng cách đầu tiên thiết lập một chủ đề con (bước được đề xuất bởi WP). Sau đó, trong tệp style.css của chủ đề con, tôi đã thêm css bên dưới. Phần đầu tiên kiểm soát chiều cao của hình ảnh trên trang đầu; phần thứ hai kiểm soát chiều cao của không gian cho hình ảnh trên trang đầu. Cả hai phải phù hợp để làm việc này. Tôi nhận xét một số dòng can thiệp vào hình ảnh chiều cao cố định của tôi. Bây giờ tiêu đề của tôi trên trang chủ giống hệt như trên tất cả các trang khác.

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