sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Twenty Seventeen: Better handling of custom headers when no image is set.

Browse Source 
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.

git-svn-id: https://develop.svn.wordpress.org/trunk@39413 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Joe McGill 2016-12-02 05:11:56 +00:00
parent bdd33e9dff
commit 2a3c20626a
8 changed files with 97 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/wp-content/themes/twentyseventeen/assets/css/ie8.css
View File

@ -65,7 +65,7 @@ img {
display: block; display: block;
} }
.custom-header-image { .custom-header-media {
background-position: bottom center; background-position: bottom center;
} }
@ -84,8 +84,7 @@ img {
width: 100%; width: 100%;
} }
.has-header-image .custom-header-image img, .has-header-image .custom-header-media img {
.has-header-image .custom-header-image video {
left: 0; left: 0;
top: 0; top: 0;
} }
@ -142,8 +141,8 @@ img {
padding-top: 0; padding-top: 0;
} }
.twentyseventeen-front-page .custom-header-image, .twentyseventeen-front-page .custom-header-media,
.blog.home .custom-header-image { .blog.home .custom-header-media {
background-position: center center; background-position: center center;
} }

22
src/wp-content/themes/twentyseventeen/assets/css/ie9.css
View File

@ -4,22 +4,26 @@ Description: IE9 specific styles.
*/ */
.has-header-image.twentyseventeen-front-page .custom-header, .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; height: 300px;
} }
.has-header-image .custom-header-image img, .has-header-image .custom-header-media img,
.has-header-image .custom-header-image video, .has-header-video .custom-header-media video,
.has-header-image .custom-header-image iframe { .has-header-video .custom-header-media iframe {
min-width: 100%; min-width: 100%;
} }
@media screen and (min-width: 30em) { @media screen and (min-width: 30em) {
.has-header-image.twentyseventeen-front-page .custom-header, .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-image.home.blog .custom-header,
.twentyseventeen-front-page.has-header-image .custom-header-image, .has-header-video.home.blog .custom-header,
.home.blog.has-header-image .custom-header-image, .twentyseventeen-front-page.has-header-image .custom-header-media,
.home.blog.has-header-image .custom-header-media,
.panel-image { .panel-image {
height: 700px; height: 700px;
} }
@ -28,9 +32,11 @@ Description: IE9 specific styles.
@media screen and (min-width: 48em) { @media screen and (min-width: 48em) {
.has-header-image.twentyseventeen-front-page .custom-header, .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-image.home.blog .custom-header,
.twentyseventeen-front-page.has-header-image .custom-header-image, .has-header-video.home.blog .custom-header,
.home.blog.has-header-image .custom-header-image, .twentyseventeen-front-page.has-header-image .custom-header-media,
.home.blog.has-header-image .custom-header-media,
.panel-image { .panel-image {
height: 1000px; height: 1000px;
} }

6
src/wp-content/themes/twentyseventeen/assets/js/customize-preview.js
View File

@ -123,11 +123,15 @@
$.each( [ 'external_header_video', 'header_image', 'header_video' ], function( index, settingId ) { $.each( [ 'external_header_video', 'header_image', 'header_video' ], function( index, settingId ) {
wp.customize( settingId, function( setting ) { wp.customize( settingId, function( setting ) {
setting.bind(function() { setting.bind(function() {
if ( hasHeaderImage() || ( hasHeaderVideo() && $( 'body' ).hasClass( 'twentyseventeen-front-page' ) ) ) { if ( hasHeaderImage() ) {
$( document.body ).addClass( 'has-header-image' ); $( document.body ).addClass( 'has-header-image' );
} else { } else {
$( document.body ).removeClass( 'has-header-image' ); $( document.body ).removeClass( 'has-header-image' );
} }
if ( ! hasHeaderVideo() ) {
$( document.body ).removeClass( 'has-header-video' );
}
} ); } );
} ); } );
} ); } );

10
src/wp-content/themes/twentyseventeen/assets/js/global.js
View File

@ -4,7 +4,6 @@
// Variables and DOM Caching. // Variables and DOM Caching.
var $body = $( 'body' ), var $body = $( 'body' ),
$customHeader = $body.find( '.custom-header' ), $customHeader = $body.find( '.custom-header' ),
$customHeaderImage = $customHeader.find( '.custom-header-image' ),
$branding = $customHeader.find( '.site-branding' ), $branding = $customHeader.find( '.site-branding' ),
$navigation = $body.find( '.navigation-top' ), $navigation = $body.find( '.navigation-top' ),
$navWrap = $navigation.find( '.wrap' ), $navWrap = $navigation.find( '.wrap' ),
@ -64,8 +63,8 @@
// Make sure the nav isn't taller than two rows. // Make sure the nav isn't taller than two rows.
if ( navIsNotTooTall ) { if ( navIsNotTooTall ) {
// When there's a custom header image, the header offset includes the height of the navigation. // When there's a custom header image or video, the header offset includes the height of the navigation.
if ( isFrontPage && $customHeaderImage.length ) { if ( isFrontPage && ( $body.hasClass( 'has-header-image' ) || $body.hasClass( 'has-header-video' ) ) ) {
headerOffset = $customHeader.innerHeight() - navigationOuterHeight; headerOffset = $customHeader.innerHeight() - navigationOuterHeight;
} else { } else {
headerOffset = $customHeader.innerHeight(); headerOffset = $customHeader.innerHeight();
@ -242,4 +241,9 @@
setTimeout( adjustHeaderHeight, 1000 ); 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 ); })( jQuery );

5
src/wp-content/themes/twentyseventeen/inc/color-patterns.php
View File

@ -443,8 +443,11 @@ body.colors-custom,
.colors-custom .next.page-numbers:focus, .colors-custom .next.page-numbers:focus,
.colors-custom .next.page-numbers:hover, .colors-custom .next.page-numbers:hover,
.colors-custom.has-header-image .site-title, .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-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; */ color: hsl( ' . $hue . ', ' . $saturation . ', 100% ); /* base: #fff; */
} }

2
src/wp-content/themes/twentyseventeen/inc/template-functions.php
View File

@ -35,7 +35,7 @@ function twentyseventeen_body_classes( $classes ) {
} }
// Add a class if there is a custom header. // 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'; $classes[] = 'has-header-image';
} }

90
src/wp-content/themes/twentyseventeen/style.css
View File

@ -1581,7 +1581,9 @@ body {
} }
body.has-header-image .site-title, 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; color: #fff;
} }
@ -1592,7 +1594,8 @@ body.has-header-image .site-title a {
margin-bottom: 0; margin-bottom: 0;
} }
body.has-header-image .site-description { body.has-header-image .site-description,
body.has-header-video .site-description {
color: #fff; color: #fff;
opacity: 0.8; opacity: 0.8;
} }
@ -1610,7 +1613,8 @@ body.has-header-image .site-description {
width: auto; 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-height: 200px;
max-width: 100%; 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.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; display: table;
height: 300px; height: 300px;
height: 75vh; height: 75vh;
width: 100%; width: 100%;
} }
.custom-header-image { .custom-header-media {
bottom: 0; bottom: 0;
left: 0; left: 0;
overflow: hidden; overflow: hidden;
@ -1647,7 +1653,7 @@ body:not(.title-tagline-hidden) .site-branding-text {
width: 100%; 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 */ /* 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: -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 */ 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; z-index: 2;
} }
.has-header-image .custom-header-image img, .has-header-image .custom-header-media img,
.has-header-image .custom-header-image video, .has-header-video .custom-header-media video,
.has-header-image .custom-header-image iframe { .has-header-video .custom-header-media iframe {
position: fixed; position: fixed;
height: auto; height: auto;
left: 50%; left: 50%;
@ -1708,7 +1714,7 @@ body:not(.title-tagline-hidden) .site-branding-text {
top: 62px; 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; bottom: 0;
position: absolute; position: absolute;
top: auto; 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. */ /* 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; display: none;
} }
.has-header-image.twentyseventeen-front-page .site-branding, .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; display: table-cell;
height: 100%; height: 100%;
vertical-align: bottom; vertical-align: bottom;
@ -3275,7 +3283,9 @@ object {
} }
.has-header-image.twentyseventeen-front-page .site-branding, .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; bottom: 0;
display: block; display: block;
left: 0; left: 0;
@ -3286,23 +3296,28 @@ object {
} }
.has-header-image.twentyseventeen-front-page .custom-header, .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; display: block;
height: auto; height: auto;
} }
.custom-header-image { .custom-header-media {
height: 165px; height: 165px;
position: relative; position: relative;
} }
.twentyseventeen-front-page.has-header-image .custom-header-image, .twentyseventeen-front-page.has-header-image .custom-header-media,
.home.blog.has-header-image .custom-header-image { .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; height: 0;
position: relative; 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; bottom: 0;
height: auto; height: auto;
left: 0; left: 0;
@ -3316,11 +3331,13 @@ object {
} }
.custom-logo-link img, .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; 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; max-height: 200px;
} }
@ -3582,25 +3599,33 @@ object {
/* Front Page */ /* Front Page */
.twentyseventeen-front-page.has-header-image .site-branding, .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; margin-bottom: 70px;
} }
.twentyseventeen-front-page.has-header-image .custom-header-image, .twentyseventeen-front-page.has-header-image .custom-header-media,
.home.blog.has-header-image .custom-header-image { .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: 1200px;
height: 100vh; height: 100vh;
max-height: 100%; max-height: 100%;
overflow: hidden; overflow: hidden;
} }
.twentyseventeen-front-page.has-header-image .custom-header-image:before, .twentyseventeen-front-page.has-header-image .custom-header-media:before,
.home.blog.has-header-image .custom-header-image: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%; height: 33%;
} }
.admin-bar.twentyseventeen-front-page.has-header-image .custom-header-image, .admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media,
.admin-bar.home.blog.has-header-image .custom-header-image { .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); height: calc(100vh - 32px);
} }
@ -4114,12 +4139,14 @@ object {
padding: 0; padding: 0;
} }
.custom-header-image { .custom-header-media {
padding: 0; padding: 0;
} }
.twentyseventeen-front-page.has-header-image .site-branding, .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; position: relative;
} }
@ -4158,7 +4185,9 @@ object {
a, a,
.site-title a, .site-title a,
.twentyseventeen-front-page.has-header-image .site-title, .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 */ color: #222 !important; /* Make sure color schemes don't affect to print */
} }
@ -4167,6 +4196,7 @@ object {
blockquote, blockquote,
.site-description, .site-description,
.twentyseventeen-front-page.has-header-image .site-description, .twentyseventeen-front-page.has-header-image .site-description,
.twentyseventeen-front-page.has-header-video .site-description,
.entry-meta, .entry-meta,
.entry-meta a { .entry-meta a {
color: #777 !important; /* Make sure color schemes don't affect to print */ color: #777 !important; /* Make sure color schemes don't affect to print */

6
src/wp-content/themes/twentyseventeen/template-parts/header/header-image.php
View File

@ -1,6 +1,6 @@
<?php <?php
/** /**
* Displays header image * Displays header media
* *
* @package WordPress * @package WordPress
* @subpackage Twenty_Seventeen * @subpackage Twenty_Seventeen
@ -11,11 +11,9 @@
?> ?>
<div class="custom-header"> <div class="custom-header">
<?php if ( has_custom_header() ) : ?> <div class="custom-header-media">
<div class="custom-header-image">
<?php the_custom_header_markup(); ?> <?php the_custom_header_markup(); ?>
</div> </div>
<?php endif; ?>
<?php get_template_part( 'template-parts/header/site', 'branding' ); ?> <?php get_template_part( 'template-parts/header/site', 'branding' ); ?>