Twenty Seventeen: Better handling of custom headers when no image is set.
This ensures that a standard header is shown on the front page whenever a header video is set without a header image if the video doesn't load, e.g., on mobile sizes or if the JS doesn't fire. This adds a new class, `.has-header-video` that is added whenever the `wp-custom-header-video-loaded` event is fired, which is then used to style the custom headers along with `.has-header-image` whenever a header image is available. This also changes the class name on the custom header media wrapping `div` from `.custom-header-image` to `.custom-header-media`. Props laurelfulford, joemcgill. Fixes #38995. Built from https://develop.svn.wordpress.org/trunk@39413 git-svn-id: http://core.svn.wordpress.org/trunk@39353 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Joe McGill
parent
71d5ba249b
commit
e2b7762e9a
|
|
@ -65,7 +65,7 @@ img {
|
|||
display: block;
|
||||
}
|
||||
|
||||
.custom-header-image {
|
||||
.custom-header-media {
|
||||
background-position: bottom center;
|
||||
}
|
||||
|
||||
|
|
@ -84,8 +84,7 @@ img {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.has-header-image .custom-header-image img,
|
||||
.has-header-image .custom-header-image video {
|
||||
.has-header-image .custom-header-media img {
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
|
@ -142,8 +141,8 @@ img {
|
|||
padding-top: 0;
|
||||
}
|
||||
|
||||
.twentyseventeen-front-page .custom-header-image,
|
||||
.blog.home .custom-header-image {
|
||||
.twentyseventeen-front-page .custom-header-media,
|
||||
.blog.home .custom-header-media {
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,22 +4,26 @@ Description: IE9 specific styles.
|
|||
*/
|
||||
|
||||
.has-header-image.twentyseventeen-front-page .custom-header,
|
||||
.has-header-image.home.blog .custom-header {
|
||||
.has-header-video.twentyseventeen-front-page .custom-header,
|
||||
.has-header-image.home.blog .custom-header,
|
||||
.has-header-video.home.blog .custom-header {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.has-header-image .custom-header-image img,
|
||||
.has-header-image .custom-header-image video,
|
||||
.has-header-image .custom-header-image iframe {
|
||||
.has-header-image .custom-header-media img,
|
||||
.has-header-video .custom-header-media video,
|
||||
.has-header-video .custom-header-media iframe {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 30em) {
|
||||
|
||||
.has-header-image.twentyseventeen-front-page .custom-header,
|
||||
.has-header-video.twentyseventeen-front-page .custom-header,
|
||||
.has-header-image.home.blog .custom-header,
|
||||
.twentyseventeen-front-page.has-header-image .custom-header-image,
|
||||
.home.blog.has-header-image .custom-header-image,
|
||||
.has-header-video.home.blog .custom-header,
|
||||
.twentyseventeen-front-page.has-header-image .custom-header-media,
|
||||
.home.blog.has-header-image .custom-header-media,
|
||||
.panel-image {
|
||||
height: 700px;
|
||||
}
|
||||
|
|
@ -28,9 +32,11 @@ Description: IE9 specific styles.
|
|||
@media screen and (min-width: 48em) {
|
||||
|
||||
.has-header-image.twentyseventeen-front-page .custom-header,
|
||||
.has-header-video.twentyseventeen-front-page .custom-header,
|
||||
.has-header-image.home.blog .custom-header,
|
||||
.twentyseventeen-front-page.has-header-image .custom-header-image,
|
||||
.home.blog.has-header-image .custom-header-image,
|
||||
.has-header-video.home.blog .custom-header,
|
||||
.twentyseventeen-front-page.has-header-image .custom-header-media,
|
||||
.home.blog.has-header-image .custom-header-media,
|
||||
.panel-image {
|
||||
height: 1000px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -123,11 +123,15 @@
|
|||
$.each( [ 'external_header_video', 'header_image', 'header_video' ], function( index, settingId ) {
|
||||
wp.customize( settingId, function( setting ) {
|
||||
setting.bind(function() {
|
||||
if ( hasHeaderImage() || ( hasHeaderVideo() && $( 'body' ).hasClass( 'twentyseventeen-front-page' ) ) ) {
|
||||
if ( hasHeaderImage() ) {
|
||||
$( document.body ).addClass( 'has-header-image' );
|
||||
} else {
|
||||
$( document.body ).removeClass( 'has-header-image' );
|
||||
}
|
||||
|
||||
if ( ! hasHeaderVideo() ) {
|
||||
$( document.body ).removeClass( 'has-header-video' );
|
||||
}
|
||||
} );
|
||||
} );
|
||||
} );
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
// Variables and DOM Caching.
|
||||
var $body = $( 'body' ),
|
||||
$customHeader = $body.find( '.custom-header' ),
|
||||
$customHeaderImage = $customHeader.find( '.custom-header-image' ),
|
||||
$branding = $customHeader.find( '.site-branding' ),
|
||||
$navigation = $body.find( '.navigation-top' ),
|
||||
$navWrap = $navigation.find( '.wrap' ),
|
||||
|
|
@ -64,8 +63,8 @@
|
|||
// Make sure the nav isn't taller than two rows.
|
||||
if ( navIsNotTooTall ) {
|
||||
|
||||
// When there's a custom header image, the header offset includes the height of the navigation.
|
||||
if ( isFrontPage && $customHeaderImage.length ) {
|
||||
// When there's a custom header image or video, the header offset includes the height of the navigation.
|
||||
if ( isFrontPage && ( $body.hasClass( 'has-header-image' ) || $body.hasClass( 'has-header-video' ) ) ) {
|
||||
headerOffset = $customHeader.innerHeight() - navigationOuterHeight;
|
||||
} else {
|
||||
headerOffset = $customHeader.innerHeight();
|
||||
|
|
@ -242,4 +241,9 @@
|
|||
setTimeout( adjustHeaderHeight, 1000 );
|
||||
});
|
||||
|
||||
// Add header video class after the video is loaded.
|
||||
$( document ).on( 'wp-custom-header-video-loaded', function() {
|
||||
$body.addClass( 'has-header-video' );
|
||||
});
|
||||
|
||||
})( jQuery );
|
||||
|
|
|
|||
|
|
@ -443,8 +443,11 @@ body.colors-custom,
|
|||
.colors-custom .next.page-numbers:focus,
|
||||
.colors-custom .next.page-numbers:hover,
|
||||
.colors-custom.has-header-image .site-title,
|
||||
.colors-custom.has-header-video .site-title,
|
||||
.colors-custom.has-header-image .site-title a,
|
||||
.colors-custom.has-header-image .site-description {
|
||||
.colors-custom.has-header-video .site-title a,
|
||||
.colors-custom.has-header-image .site-description,
|
||||
.colors-custom.has-header-video .site-description {
|
||||
color: hsl( ' . $hue . ', ' . $saturation . ', 100% ); /* base: #fff; */
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ function twentyseventeen_body_classes( $classes ) {
|
|||
}
|
||||
|
||||
// Add a class if there is a custom header.
|
||||
if ( has_header_image() || has_header_video() && is_front_page() ) {
|
||||
if ( has_header_image() ) {
|
||||
$classes[] = 'has-header-image';
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1581,7 +1581,9 @@ body {
|
|||
}
|
||||
|
||||
body.has-header-image .site-title,
|
||||
body.has-header-image .site-title a {
|
||||
body.has-header-video .site-title,
|
||||
body.has-header-image .site-title a,
|
||||
body.has-header-video .site-title a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
|
@ -1592,7 +1594,8 @@ body.has-header-image .site-title a {
|
|||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
body.has-header-image .site-description {
|
||||
body.has-header-image .site-description,
|
||||
body.has-header-video .site-description {
|
||||
color: #fff;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
|
@ -1610,7 +1613,8 @@ body.has-header-image .site-description {
|
|||
width: auto;
|
||||
}
|
||||
|
||||
body.home.title-tagline-hidden.has-header-image .custom-logo-link img {
|
||||
body.home.title-tagline-hidden.has-header-image .custom-logo-link img,
|
||||
body.home.title-tagline-hidden.has-header-video .custom-logo-link img {
|
||||
max-height: 200px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
|
@ -1630,14 +1634,16 @@ body:not(.title-tagline-hidden) .site-branding-text {
|
|||
}
|
||||
|
||||
.has-header-image.twentyseventeen-front-page .custom-header,
|
||||
.has-header-image.home.blog .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%;
|
||||
}
|
||||
|
||||
.custom-header-image {
|
||||
.custom-header-media {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
|
|
@ -1647,7 +1653,7 @@ body:not(.title-tagline-hidden) .site-branding-text {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.custom-header-image:before {
|
||||
.custom-header-media:before {
|
||||
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.3+75 */
|
||||
background: -moz-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%); /* FF3.6-15 */
|
||||
background: -webkit-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%); /* Chrome10-25,Safari5.1-6 */
|
||||
|
|
@ -1663,9 +1669,9 @@ body:not(.title-tagline-hidden) .site-branding-text {
|
|||
z-index: 2;
|
||||
}
|
||||
|
||||
.has-header-image .custom-header-image img,
|
||||
.has-header-image .custom-header-image video,
|
||||
.has-header-image .custom-header-image iframe {
|
||||
.has-header-image .custom-header-media img,
|
||||
.has-header-video .custom-header-media video,
|
||||
.has-header-video .custom-header-media iframe {
|
||||
position: fixed;
|
||||
height: auto;
|
||||
left: 50%;
|
||||
|
|
@ -1708,7 +1714,7 @@ body:not(.title-tagline-hidden) .site-branding-text {
|
|||
top: 62px;
|
||||
}
|
||||
|
||||
.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-image img {
|
||||
.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
|
|
@ -1720,12 +1726,14 @@ body:not(.title-tagline-hidden) .site-branding-text {
|
|||
|
||||
/* Hides div in Customizer preview when header images or videos change. */
|
||||
|
||||
body:not(.has-header-image) .custom-header-image {
|
||||
body:not(.has-header-image):not(.has-header-video) .custom-header-media {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.has-header-image.twentyseventeen-front-page .site-branding,
|
||||
.has-header-image.home.blog .site-branding {
|
||||
.has-header-video.twentyseventeen-front-page .site-branding,
|
||||
.has-header-image.home.blog .site-branding,
|
||||
.has-header-video.home.blog .site-branding {
|
||||
display: table-cell;
|
||||
height: 100%;
|
||||
vertical-align: bottom;
|
||||
|
|
@ -3275,7 +3283,9 @@ object {
|
|||
}
|
||||
|
||||
.has-header-image.twentyseventeen-front-page .site-branding,
|
||||
.has-header-image.home.blog .site-branding {
|
||||
.has-header-video.twentyseventeen-front-page .site-branding,
|
||||
.has-header-image.home.blog .site-branding,
|
||||
.has-header-video.home.blog .site-branding {
|
||||
bottom: 0;
|
||||
display: block;
|
||||
left: 0;
|
||||
|
|
@ -3286,23 +3296,28 @@ object {
|
|||
}
|
||||
|
||||
.has-header-image.twentyseventeen-front-page .custom-header,
|
||||
.has-header-image.home.blog .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: block;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.custom-header-image {
|
||||
.custom-header-media {
|
||||
height: 165px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.twentyseventeen-front-page.has-header-image .custom-header-image,
|
||||
.home.blog.has-header-image .custom-header-image {
|
||||
.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: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-image {
|
||||
.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media,
|
||||
.has-header-video:not(.twentyseventeen-front-page):not(.home) .custom-header-media {
|
||||
bottom: 0;
|
||||
height: auto;
|
||||
left: 0;
|
||||
|
|
@ -3316,11 +3331,13 @@ object {
|
|||
}
|
||||
|
||||
.custom-logo-link img,
|
||||
body.home.title-tagline-hidden.has-header-image .custom-logo-link img {
|
||||
body.home.title-tagline-hidden.has-header-image .custom-logo-link img,
|
||||
body.home.title-tagline-hidden.has-header-video .custom-logo-link img {
|
||||
max-width: 350px;
|
||||
}
|
||||
|
||||
.title-tagline-hidden.home.has-header-image .custom-logo-link img {
|
||||
.title-tagline-hidden.home.has-header-image .custom-logo-link img,
|
||||
.title-tagline-hidden.home.has-header-video .custom-logo-link img {
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
|
|
@ -3582,25 +3599,33 @@ object {
|
|||
/* Front Page */
|
||||
|
||||
.twentyseventeen-front-page.has-header-image .site-branding,
|
||||
.home.blog.has-header-image .site-branding {
|
||||
.twentyseventeen-front-page.has-header-video .site-branding,
|
||||
.home.blog.has-header-image .site-branding,
|
||||
.home.blog.has-header-video .site-branding {
|
||||
margin-bottom: 70px;
|
||||
}
|
||||
|
||||
.twentyseventeen-front-page.has-header-image .custom-header-image,
|
||||
.home.blog.has-header-image .custom-header-image {
|
||||
.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;
|
||||
}
|
||||
|
||||
.twentyseventeen-front-page.has-header-image .custom-header-image:before,
|
||||
.home.blog.has-header-image .custom-header-image:before {
|
||||
.twentyseventeen-front-page.has-header-image .custom-header-media:before,
|
||||
.twentyseventeen-front-page.has-header-video .custom-header-media:before,
|
||||
.home.blog.has-header-image .custom-header-media:before,
|
||||
.home.blog.has-header-video .custom-header-media:before {
|
||||
height: 33%;
|
||||
}
|
||||
|
||||
.admin-bar.twentyseventeen-front-page.has-header-image .custom-header-image,
|
||||
.admin-bar.home.blog.has-header-image .custom-header-image {
|
||||
.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);
|
||||
}
|
||||
|
||||
|
|
@ -4114,12 +4139,14 @@ object {
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
.custom-header-image {
|
||||
.custom-header-media {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.twentyseventeen-front-page.has-header-image .site-branding,
|
||||
.home.blog.has-header-image .site-branding {
|
||||
.twentyseventeen-front-page.has-header-video .site-branding,
|
||||
.home.blog.has-header-image .site-branding,
|
||||
.home.blog.has-header-video .site-branding {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -4158,7 +4185,9 @@ object {
|
|||
a,
|
||||
.site-title a,
|
||||
.twentyseventeen-front-page.has-header-image .site-title,
|
||||
.twentyseventeen-front-page.has-header-image .site-title a {
|
||||
.twentyseventeen-front-page.has-header-video .site-title,
|
||||
.twentyseventeen-front-page.has-header-image .site-title a,
|
||||
.twentyseventeen-front-page.has-header-video .site-title a {
|
||||
color: #222 !important; /* Make sure color schemes don't affect to print */
|
||||
}
|
||||
|
||||
|
|
@ -4167,6 +4196,7 @@ object {
|
|||
blockquote,
|
||||
.site-description,
|
||||
.twentyseventeen-front-page.has-header-image .site-description,
|
||||
.twentyseventeen-front-page.has-header-video .site-description,
|
||||
.entry-meta,
|
||||
.entry-meta a {
|
||||
color: #777 !important; /* Make sure color schemes don't affect to print */
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<?php
|
||||
/**
|
||||
* Displays header image
|
||||
* Displays header media
|
||||
*
|
||||
* @package WordPress
|
||||
* @subpackage Twenty_Seventeen
|
||||
|
|
@ -11,11 +11,9 @@
|
|||
?>
|
||||
<div class="custom-header">
|
||||
|
||||
<?php if ( has_custom_header() ) : ?>
|
||||
<div class="custom-header-image">
|
||||
<div class="custom-header-media">
|
||||
<?php the_custom_header_markup(); ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php get_template_part( 'template-parts/header/site', 'branding' ); ?>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
*
|
||||
* @global string $wp_version
|
||||
*/
|
||||
$wp_version = '4.8-alpha-39411';
|
||||
$wp_version = '4.8-alpha-39413';
|
||||
|
||||
/**
|
||||
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
||||
|
|
|
|||
Loading…
Reference in New Issue