Как изменить высоту изображения заголовка в теме Twenty Seventeen?

Я нашел (часть) CSS-кода, который контролирует высоту в файле wp-content/themes/twentyseventeen/style.css.

Там есть код, который применяется, когда админ-бар не виден (обычный анонимный пользователь), в настоящее время на строке 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;
}

И код, который применяется, когда админ-бар виден (например, вы вошли в систему), в настоящее время на строке 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);
}

А также код, который применяется на мобильных устройствах, в настоящее время на строке 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%;
}

Скопировав эти три раздела CSS в файл style.css моей дочерней темы и изменив атрибут height, я смог настроить высоту для изображения заголовка на главной странице. Я установил высоту в 30vh, calc(30vh - 32px) и 30vh соответственно в каждом разделе. Первое значение height: 1200px я оставил без изменений.

Обратите внимание, что высота задается в vh, что означает высоту относительно высоты области просмотра. Так, 100vh — это 100% высоты области просмотра, а 50vh — 50% высоты области просмотра.

Одна странность заключается в том, что на главной странице масштаб и позиция изображения заголовка отличаются от других страниц.

Не уверен, что это лучший способ. Я открыт для лучших вариантов, но пока это работает на базовом уровне.

Просто отредактируйте тему из панели управления и добавьте следующее CSS-определение в раздел темы "Пользовательский CSS":

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

Из комментария, который я оставил в ответе @User (это классное имя) ;), я подумал, что стоит попробовать.

Я редактирую файл темы напрямую, потому что работаю в одноразовом docker-контейнере — это скорее proof of concept. Для адаптации под дочернюю тему потребуются некоторые изменения.

В файле content/themes/twentyseventeen/style.css, в районе строк 3680~3670, находятся стили для изображения в шапке.

Исходный код:

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

Изменение размера (и порядка свойств) достаточно для достижения вида для неавторизованных пользователей:

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

Я оставил vh и % для случаев, когда max-height не достигается, но установил max-height на нужное вам значение.

Однако есть один нюанс:

Это самый верхний участок пикселей. Поэтому, если у вас нет подходящей части изображения в этой области... Это выглядит не очень (много обрезанных голов).

Продолжение следует (когда разберусь).

Взято с этого сайта

Этот дополнительный/пользовательский CSS сработал для меня:

/*Экран компьютера */
@media screen and (min-width: 48em) {
    .twentyseventeen-front-page.has-header-image .custom-header-image {
    /*height: 1200px;*/
    /*height: 100vh;*/
    height: 50vh;
    /*max-height: 100%;*/
    /*overflow: hidden;*/
    }
}

/* Мобильный экран*/
.has-header-image.twentyseventeen-front-page .custom-header {
    /*display: table;*/
    /*height: 300px;*/
    /*height: 75vh;*/
    height: 50vh;
    /*width: 100%;*/
}

/* Экран компьютера с вошедшим пользователем и панелью администратора на фронтенде*/
@media screen and (min-width: 48em) {
    .admin-bar.twentyseventeen-front-page.has-header-image .custom-header-image {
    /*height: calc(100vh - 32px);*/
    height: calc(50vh - 32px);
    }
}

Вы можете установить желаемую высоту в атрибутах 'height'.

Вы можете изменить его, обрезав изображение. В WordPress есть опция в настройщике. Вам нужно выполнить следующие шаги для обрезки изображения.

    1) Перейдите Внешний вид->Настроить
    2) Медиа заголовка
    3) Добавьте новое изображение и затем обрежьте его по вашим потребностям, после чего сохраните.

Вы можете использовать Firebug (или просмотреть исходный код страницы), чтобы найти CSS, отвечающий за отображение изображения в шапке. Затем добавьте CSS для внесения изменений. Конкретный CSS зависит от используемой темы.

Firebug позволяет временно изменять CSS, чтобы добиться нужного результата, а затем скопировать новый CSS в CSS-файл темы (если такая возможность предусмотрена).

Если в вашей теме нет опции "Пользовательский CSS", лучший способ — создать дочернюю тему (есть множество руководств на эту тему) и добавить ваш пользовательский CSS в файл styles.css дочерней темы. (Никогда не изменяйте родительскую тему — ваши изменения будут перезаписаны при следующем обновлении темы.)

Я начал с создания дочерней темы (рекомендуемый шаг для WordPress). Затем в файл style.css дочерней темы я добавил CSS-код ниже. Первая секция управляет высотой изображения на главной странице; вторая секция контролирует высоту пространства для изображения на главной странице. Оба значения должны совпадать для корректной работы. Я закомментировал некоторые строки, которые мешали моему изображению с фиксированной высотой. Теперь шапка на главной странице выглядит точно так же, как и на всех остальных страницах.

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

Это решение помогло мне решить проблему, где свойство object-position позволило перемещать изображение влево-вправо и вверх-вниз.

img.wp-image-70 {
  max-height:250px;
    object-position: 0 10%;
    object-fit: cover;
}