Как изменить высоту изображения заголовка в 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покое.

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

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

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

Просто отредактируйте тему с панели инструментов и добавьте следующее определение CSS в раздел темы «custom css»:

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

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

Я редактирую файл темы напрямую, потому что я работаю в одноразовом док-контейнере, это еще одно подтверждение концепции. Адаптация к детской теме потребует некоторых настроек.

В 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для того, что вы ищете.

На все это есть одно предостережение:

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

больше следовать (когда я разберусь)

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

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

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

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

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

Я подошел к этому, сначала настроив дочернюю тему (рекомендуемый шаг WP). Затем в файле 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;
}