WordPress.org
Get WordPress

Make WordPress Core

Changeset 39414


Ignore:
Timestamp:
12/02/2016 05:19:44 AM (10 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.