WordPress.org
Get WordPress

Make WordPress Core

Changeset 39414 for branches/4.7


Ignore:
Timestamp:
12/02/2016 05:19:44 AM (8 years ago)
Author:
joemcgill
Message:

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 for 4.7.

Location:
branches/4.7
Files:
9 edited

Legend:

Unmodified
Added
Removed

  • branches/4.7

  • branches/4.7/src/wp-content/themes/twentyseventeen/assets/css/ie8.css

    r39340 r39414  
    6666}
    6767
    68 .custom-header-image {
     68.custom-header-media {
    6969    background-position: bottom center;
    7070}
    … …  
    8585}
    8686
    87 .has-header-image .custom-header-image img,
    88 .has-header-image .custom-header-image video {
     87.has-header-image .custom-header-media img {
    8988    left: 0;
    9089    top: 0;
    … …  
    143142}
    144143
    145 .twentyseventeen-front-page .custom-header-image,
    146 .blog.home .custom-header-image {
     144.twentyseventeen-front-page .custom-header-media,
     145.blog.home .custom-header-media {
    147146    background-position: center center;
    148147}

  • branches/4.7/src/wp-content/themes/twentyseventeen/assets/css/ie9.css

    r39215 r39414  
    55
    66.has-header-image.twentyseventeen-front-page .custom-header,
    7 .has-header-image.home.blog .custom-header {
     7.has-header-video.twentyseventeen-front-page .custom-header,
     8.has-header-image.home.blog .custom-header,
     9.has-header-video.home.blog .custom-header {
    810    height: 300px;
    911}
    1012
    11 .has-header-image .custom-header-image img,
    12 .has-header-image .custom-header-image video,
    13 .has-header-image .custom-header-image iframe {
     13.has-header-image .custom-header-media img,
     14.has-header-video .custom-header-media video,
     15.has-header-video .custom-header-media iframe {
    1416    min-width: 100%;
    1517}
    … …  
    1820
    1921    .has-header-image.twentyseventeen-front-page .custom-header,
     22    .has-header-video.twentyseventeen-front-page .custom-header,
    2023    .has-header-image.home.blog .custom-header,
    21     .twentyseventeen-front-page.has-header-image .custom-header-image,
    22     .home.blog.has-header-image .custom-header-image,
     24    .has-header-video.home.blog .custom-header,
     25    .twentyseventeen-front-page.has-header-image .custom-header-media,
     26    .home.blog.has-header-image .custom-header-media,
    2327    .panel-image {
    2428        height: 700px;
    … …  
    2933
    3034    .has-header-image.twentyseventeen-front-page .custom-header,
     35    .has-header-video.twentyseventeen-front-page .custom-header,
    3136    .has-header-image.home.blog .custom-header,
    32     .twentyseventeen-front-page.has-header-image .custom-header-image,
    33     .home.blog.has-header-image .custom-header-image,
     37    .has-header-video.home.blog .custom-header,
     38    .twentyseventeen-front-page.has-header-image .custom-header-media,
     39    .home.blog.has-header-image .custom-header-media,
    3440    .panel-image {
    3541        height: 1000px;

  • branches/4.7/src/wp-content/themes/twentyseventeen/assets/js/customize-preview.js

    r39221 r39414  
    124124        wp.customize( settingId, function( setting ) {
    125125            setting.bind(function() {
    126                 if ( hasHeaderImage() || ( hasHeaderVideo() && $( 'body' ).hasClass( 'twentyseventeen-front-page' ) ) ) {
     126                if ( hasHeaderImage() ) {
    127127                    $( document.body ).addClass( 'has-header-image' );
    128128                } else {
    129129                    $( document.body ).removeClass( 'has-header-image' );
     130                }
     131
     132                if ( ! hasHeaderVideo() ) {
     133                    $( document.body ).removeClass( 'has-header-video' );
    130134                }
    131135            } );

  • branches/4.7/src/wp-content/themes/twentyseventeen/assets/js/global.js

    r39297 r39414  
    55    var $body = $( 'body' ),
    66        $customHeader = $body.find( '.custom-header' ),
    7         $customHeaderImage = $customHeader.find( '.custom-header-image' ),
    87        $branding = $customHeader.find( '.site-branding' ),
    98        $navigation = $body.find( '.navigation-top' ),
    … …  
    6564            if ( navIsNotTooTall ) {
    6665
    67                 // When there's a custom header image, the header offset includes the height of the navigation.
    68                 if ( isFrontPage && $customHeaderImage.length ) {
     66                // When there's a custom header image or video, the header offset includes the height of the navigation.
     67                if ( isFrontPage && ( $body.hasClass( 'has-header-image' ) || $body.hasClass( 'has-header-video' ) ) ) {
    6968                    headerOffset = $customHeader.innerHeight() - navigationOuterHeight;
    7069                } else {
    … …  
    243242    });
    244243
     244    // Add header video class after the video is loaded.
     245    $( document ).on( 'wp-custom-header-video-loaded', function() {
     246        $body.addClass( 'has-header-video' );
     247    });
     248
    245249})( jQuery );

  • branches/4.7/src/wp-content/themes/twentyseventeen/inc/color-patterns.php

    r39387 r39414  
    444444.colors-custom .next.page-numbers:hover,
    445445.colors-custom.has-header-image .site-title,
     446.colors-custom.has-header-video .site-title,
    446447.colors-custom.has-header-image .site-title a,
    447 .colors-custom.has-header-image .site-description {
     448.colors-custom.has-header-video .site-title a,
     449.colors-custom.has-header-image .site-description,
     450.colors-custom.has-header-video .site-description {
    448451    color: hsl( ' . $hue . ', ' . $saturation . ', 100% ); /* base: #fff; */
    449452}

  • branches/4.7/src/wp-content/themes/twentyseventeen/inc/template-functions.php

    r39078 r39414  
    3636
    3737    // Add a class if there is a custom header.
    38     if ( has_header_image() || has_header_video() && is_front_page() ) {
     38    if ( has_header_image() ) {
    3939        $classes[] = 'has-header-image';
    4040    }

  • branches/4.7/src/wp-content/themes/twentyseventeen/style.css

    r39405 r39414  
    15821582
    15831583body.has-header-image .site-title,
    1584 body.has-header-image .site-title a {
     1584body.has-header-video .site-title,
     1585body.has-header-image .site-title a,
     1586body.has-header-video .site-title a {
    15851587    color: #fff;
    15861588}
    … …  
    15931595}
    15941596
    1595 body.has-header-image .site-description {
     1597body.has-header-image .site-description,
     1598body.has-header-video .site-description {
    15961599    color: #fff;
    15971600    opacity: 0.8;
    … …  
    16111614}
    16121615
    1613 body.home.title-tagline-hidden.has-header-image .custom-logo-link img {
     1616body.home.title-tagline-hidden.has-header-image .custom-logo-link img,
     1617body.home.title-tagline-hidden.has-header-video .custom-logo-link img {
    16141618    max-height: 200px;
    16151619    max-width: 100%;
    … …  
    16311635
    16321636.has-header-image.twentyseventeen-front-page .custom-header,
    1633 .has-header-image.home.blog .custom-header {
     1637.has-header-video.twentyseventeen-front-page .custom-header,
     1638.has-header-image.home.blog .custom-header,
     1639.has-header-video.home.blog .custom-header {
    16341640    display: table;
    16351641    height: 300px;
    … …  
    16381644}
    16391645
    1640 .custom-header-image {
     1646.custom-header-media {
    16411647    bottom: 0;
    16421648    left: 0;
    … …  
    16481654}
    16491655
    1650 .custom-header-image:before {
     1656.custom-header-media:before {
    16511657    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.3+75 */
    16521658    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 */
    … …  
    16641670}
    16651671
    1666 .has-header-image .custom-header-image img,
    1667 .has-header-image .custom-header-image video,
    1668 .has-header-image .custom-header-image iframe {
     1672.has-header-image .custom-header-media img,
     1673.has-header-video .custom-header-media video,
     1674.has-header-video .custom-header-media iframe {
    16691675    position: fixed;
    16701676    height: auto;
    … …  
    17091715}
    17101716
    1711 .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-image img {
     1717.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
    17121718    bottom: 0;
    17131719    position: absolute;
    … …  
    17211727/* Hides div in Customizer preview when header images or videos change. */
    17221728
    1723 body:not(.has-header-image) .custom-header-image {
     1729body:not(.has-header-image):not(.has-header-video) .custom-header-media {
    17241730    display: none;
    17251731}
    17261732
    17271733.has-header-image.twentyseventeen-front-page .site-branding,
    1728 .has-header-image.home.blog .site-branding {
     1734.has-header-video.twentyseventeen-front-page .site-branding,
     1735.has-header-image.home.blog .site-branding,
     1736.has-header-video.home.blog .site-branding {
    17291737    display: table-cell;
    17301738    height: 100%;
    … …  
    32763284
    32773285    .has-header-image.twentyseventeen-front-page .site-branding,
    3278     .has-header-image.home.blog .site-branding {
     3286    .has-header-video.twentyseventeen-front-page .site-branding,
     3287    .has-header-image.home.blog .site-branding,
     3288    .has-header-video.home.blog .site-branding {
    32793289        bottom: 0;
    32803290        display: block;
    … …  
    32873297
    32883298    .has-header-image.twentyseventeen-front-page .custom-header,
    3289     .has-header-image.home.blog .custom-header {
     3299    .has-header-video.twentyseventeen-front-page .custom-header,
     3300    .has-header-image.home.blog .custom-header,
     3301    .has-header-video.home.blog .custom-header {
    32903302        display: block;
    32913303        height: auto;
    32923304    }
    32933305
    3294     .custom-header-image {
     3306    .custom-header-media {
    32953307        height: 165px;
    32963308        position: relative;
    32973309    }
    32983310
    3299     .twentyseventeen-front-page.has-header-image .custom-header-image,
    3300     .home.blog.has-header-image .custom-header-image {
     3311    .twentyseventeen-front-page.has-header-image .custom-header-media,
     3312    .twentyseventeen-front-page.has-header-video .custom-header-media,
     3313    .home.blog.has-header-image .custom-header-media,
     3314    .home.blog.has-header-video .custom-header-media {
    33013315        height: 0;
    33023316        position: relative;
    33033317    }
    33043318
    3305     .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-image {
     3319    .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media,
     3320    .has-header-video:not(.twentyseventeen-front-page):not(.home) .custom-header-media {
    33063321        bottom: 0;
    33073322        height: auto;
    … …  
    33173332
    33183333    .custom-logo-link img,
    3319     body.home.title-tagline-hidden.has-header-image .custom-logo-link img {
     3334    body.home.title-tagline-hidden.has-header-image .custom-logo-link img,
     3335    body.home.title-tagline-hidden.has-header-video .custom-logo-link img {
    33203336        max-width: 350px;
    33213337    }
    33223338
    3323     .title-tagline-hidden.home.has-header-image .custom-logo-link img {
     3339    .title-tagline-hidden.home.has-header-image .custom-logo-link img,
     3340    .title-tagline-hidden.home.has-header-video .custom-logo-link img {
    33243341        max-height: 200px;
    33253342    }
    … …  
    35833600
    35843601    .twentyseventeen-front-page.has-header-image .site-branding,
    3585     .home.blog.has-header-image .site-branding {
     3602    .twentyseventeen-front-page.has-header-video .site-branding,
     3603    .home.blog.has-header-image .site-branding,
     3604    .home.blog.has-header-video .site-branding {
    35863605        margin-bottom: 70px;
    35873606    }
    35883607
    3589     .twentyseventeen-front-page.has-header-image .custom-header-image,
    3590     .home.blog.has-header-image .custom-header-image {
     3608    .twentyseventeen-front-page.has-header-image .custom-header-media,
     3609    .twentyseventeen-front-page.has-header-video .custom-header-media,
     3610    .home.blog.has-header-image .custom-header-media,
     3611    .home.blog.has-header-video .custom-header-media {
    35913612        height: 1200px;
    35923613        height: 100vh;
    … …  
    35953616    }
    35963617
    3597     .twentyseventeen-front-page.has-header-image .custom-header-image:before,
    3598     .home.blog.has-header-image .custom-header-image:before {
     3618    .twentyseventeen-front-page.has-header-image .custom-header-media:before,
     3619    .twentyseventeen-front-page.has-header-video .custom-header-media:before,
     3620    .home.blog.has-header-image .custom-header-media:before,
     3621    .home.blog.has-header-video .custom-header-media:before {
    35993622        height: 33%;
    36003623    }
    36013624
    3602     .admin-bar.twentyseventeen-front-page.has-header-image .custom-header-image,
    3603     .admin-bar.home.blog.has-header-image .custom-header-image {
     3625    .admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media,
     3626    .admin-bar.twentyseventeen-front-page.has-header-video .custom-header-media,
     3627    .admin-bar.home.blog.has-header-image .custom-header-media,
     3628    .admin-bar.home.blog.has-header-video .custom-header-media {
    36043629        height: calc(100vh - 32px);
    36053630    }
    … …  
    41154140    }
    41164141
    4117     .custom-header-image {
     4142    .custom-header-media {
    41184143        padding: 0;
    41194144    }
    41204145
    41214146    .twentyseventeen-front-page.has-header-image .site-branding,
    4122     .home.blog.has-header-image .site-branding {
     4147    .twentyseventeen-front-page.has-header-video .site-branding,
     4148    .home.blog.has-header-image .site-branding,
     4149    .home.blog.has-header-video .site-branding {
    41234150        position: relative;
    41244151    }
    … …  
    41594186    .site-title a,
    41604187    .twentyseventeen-front-page.has-header-image .site-title,
    4161     .twentyseventeen-front-page.has-header-image .site-title a {
     4188    .twentyseventeen-front-page.has-header-video .site-title,
     4189    .twentyseventeen-front-page.has-header-image .site-title a,
     4190    .twentyseventeen-front-page.has-header-video .site-title a {
    41624191        color: #222 !important; /* Make sure color schemes don't affect to print */
    41634192    }
    … …  
    41684197    .site-description,
    41694198    .twentyseventeen-front-page.has-header-image .site-description,
     4199    .twentyseventeen-front-page.has-header-video .site-description,
    41704200    .entry-meta,
    41714201    .entry-meta a {

  • branches/4.7/src/wp-content/themes/twentyseventeen/template-parts/header/header-image.php

    r39395 r39414  
    11<?php
    22/**
    3  * Displays header image
     3 * Displays header media
    44 *
    55 * @package WordPress
    … …  
    1212<div class="custom-header">
    1313
    14     <div class="custom-header-image">
     14    <div class="custom-header-media">
    1515        <?php the_custom_header_markup(); ?>
    1616    </div>
Note: See TracChangeset for help on using the changeset viewer.