WordPress.org

Make WordPress Core

Changeset 39220


Ignore:
Timestamp:
11/14/2016 11:22:25 AM (5 years ago)
Author:
davidakennedy
Message:

Twenty Seventeen: Make custom header preview match front end in Customizer when changed

  • Toggles has-header-image body class in Customizer preview whenever images or videos are added or removed.
  • Hides the .custom-header-imagediv in CSS when an image or video haven't been set so preview changes are smoother.
  • Also fixes the main issues in #38391 – making the preview match.

Props bradyvercher.

Fixes #38627.
See #38391.

Location:
trunk/src/wp-content/themes/twentyseventeen
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-content/themes/twentyseventeen/assets/js/customize-preview.js

    r38986 r39220  
    103103        } );
    104104    } );
     105
     106    // Whether a header image is available.
     107    function hasHeaderImage() {
     108        var image = wp.customize( 'header_image' )();
     109        return '' !== image && 'remove-header' !== image;
     110    }
     111
     112    // Whether a header video is available.
     113    function hasHeaderVideo() {
     114        var externalVideo = wp.customize( 'external_header_video' )(),
     115            video = wp.customize( 'header_video' )();
     116
     117        return '' !== externalVideo || ( 0 !== video && '' !== video );
     118    }
     119
     120    // Toggle a body class if a custom header exists.
     121    $.each( [ 'external_header_video', 'header_image', 'header_video' ], function( index, settingId ) {
     122        wp.customize( settingId, function( setting ) {
     123            setting.bind(function() {
     124                if ( hasHeaderImage() || ( hasHeaderVideo() && $( 'body' ).hasClass( 'twentyseventeen-front-page' ) ) ) {
     125                    $( document.body ).addClass( 'has-header-image' );
     126                } else {
     127                    $( document.body ).removeClass( 'has-header-image' );
     128                }
     129            } );
     130        } );
     131    } );
     132
    105133} )( jQuery );
  • trunk/src/wp-content/themes/twentyseventeen/style.css

    r39216 r39220  
    16911691}
    16921692
     1693/* Hides div in Customizer preview when header images or videos change. */
     1694
    16931695body:not(.has-header-image) .custom-header-image {
    1694     padding: 5% 0;
     1696    display: none;
    16951697}
    16961698
Note: See TracChangeset for help on using the changeset viewer.