Ticket #38172: 38172.6.diff
File 38172.6.diff, 22.2 KB (added by , 7 years ago) |
---|
-
src/wp-admin/css/customize-controls.css
583 583 display: block; 584 584 font-style: italic; 585 585 line-height: 18px; 586 margin-top: 0; 586 587 margin-bottom: 5px; 587 588 } 588 589 -
src/wp-content/themes/twentyfourteen/functions.php
409 409 $classes[] = 'group-blog'; 410 410 } 411 411 412 if ( get_header_image() ) {412 if ( get_header_image() || function_exists( 'has_header_video' ) && has_header_video() ) { 413 413 $classes[] = 'header-image'; 414 414 } elseif ( ! in_array( $GLOBALS['pagenow'], array( 'wp-activate.php', 'wp-signup.php' ) ) ) { 415 415 $classes[] = 'masthead-fixed'; -
src/wp-content/themes/twentyfourteen/header.php
32 32 33 33 <body <?php body_class(); ?>> 34 34 <div id="page" class="hfeed site"> 35 <?php if ( get_header_image() ) : ?> 35 <?php if ( function_exists( 'has_header_video' ) && has_header_video() ) : ?> 36 <div id="site-header"> 37 <?php the_header_video_tag(); ?> 38 </div> 39 <?php elseif ( get_header_image() ) : ?> 36 40 <div id="site-header"> 37 41 <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"> 38 42 <img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"> -
src/wp-content/themes/twentyfourteen/inc/custom-header.php
40 40 'width' => 1260, 41 41 'height' => 240, 42 42 'flex-height' => true, 43 'video' => true, 43 44 'wp-head-callback' => 'twentyfourteen_header_style', 44 45 'admin-head-callback' => 'twentyfourteen_admin_header_style', 45 46 'admin-preview-callback' => 'twentyfourteen_admin_header_image', -
src/wp-content/themes/twentyfourteen/js/functions.js
103 103 104 104 if ( body.is( '.header-image' ) ) { 105 105 toolbarOffset = body.is( '.admin-bar' ) ? $( '#wpadminbar' ).height() : 0; 106 mastheadOffset = $( '# masthead' ).offset().top- toolbarOffset;106 mastheadOffset = $( '#site-header' ).height() - toolbarOffset; 107 107 108 108 _window.on( 'scroll.twentyfourteen', function() { 109 109 if ( _window.scrollTop() > mastheadOffset && mastheadHeight < 49 ) { … … 112 112 body.removeClass( 'masthead-fixed' ); 113 113 } 114 114 } ); 115 116 // Update masthead offset after a selective refresh. 117 if ( 'undefined' !== typeof wp && wp.customize && wp.customize.selectiveRefresh ) { 118 wp.customize.selectiveRefresh.bind( 'partial-content-rendered', function( placement ) { 119 mastheadOffset = $( '#site-header' ).height() - toolbarOffset; 120 } ); 121 } 115 122 } 116 123 } 117 124 -
src/wp-content/themes/twentyfourteen/style.css
88 88 video { 89 89 display: inline-block; 90 90 max-width: 100%; 91 height: auto; 91 92 } 92 93 93 94 html { … … 608 609 max-width: 100%; 609 610 } 610 611 612 #wp-custom-header-video video { 613 margin-bottom: -8px; 614 } 615 611 616 p > embed, 612 617 p > iframe, 613 618 p > object, -
src/wp-content/themes/twentyseventeen/assets/css/ie8.css
37 37 38 38 /* Site Branding */ 39 39 40 .has-header-image .custom-header-image img, 41 .has-header-image .custom-header-image video { 42 left: 0; 43 top: 0; 44 } 45 40 46 .site-title { 41 47 font-weight: bolder; 42 48 } -
src/wp-content/themes/twentyseventeen/components/header/header-image.php
14 14 $header_image = get_header_image(); 15 15 16 16 // Check if Custom Header image has been added. 17 if ( ! empty( $header_image ) ) : ?>17 if ( ! empty( $header_image ) ) : 18 18 19 <div class="custom-header-image" style="background-image: url(<?php echo esc_url( $header_image ); ?>)"></div>20 <?php get_template_part( 'components/header/site', 'branding' );?>19 // If yes, check if we're on the front page 20 if ( twentyseventeen_is_frontpage() ) : ?> 21 21 22 <?php // Output the full custom header - video and/or image fallback. ?> 23 <div class="custom-header-image"> 24 <?php the_custom_header(); ?> 25 </div> 26 <?php get_template_part( 'components/header/site', 'branding' ); ?> 27 28 <?php else : ?> 29 30 <?php // If we're not on the front page, only output the header image. ?> 31 <div class="custom-header-image"> 32 <img src="<?php echo esc_url( $header_image ); ?>"> 33 </div> 34 <?php get_template_part( 'components/header/site', 'branding' ); ?> 35 36 <?php endif; ?> 37 22 38 <?php else : ?> 39 23 40 <?php // Otherwise, show a blank header. ?> 24 41 <div class="custom-header-simple"> 25 42 <?php get_template_part( 'components/header/site', 'branding' ); ?> -
src/wp-content/themes/twentyseventeen/footer.php
14 14 15 15 ?> 16 16 17 </div><!-- #content -->17 </div><!-- #content --> 18 18 19 <footer id="colophon" class="site-footer" role="contentinfo">20 <div class="wrap">21 <?php22 get_template_part( 'components/footer/footer', 'widgets' );19 <footer id="colophon" class="site-footer" role="contentinfo"> 20 <div class="wrap"> 21 <?php 22 get_template_part( 'components/footer/footer', 'widgets' ); 23 23 24 if ( has_nav_menu( 'social' ) ) : ?>25 <nav class="social-navigation" role="navigation" aria-label="<?php _e( 'Footer Social Links Menu', 'twentyseventeen' ); ?>">26 <?php27 wp_nav_menu( array(28 'theme_location' => 'social',29 'menu_class' => 'social-links-menu',30 'depth' => 1,31 'link_before' => '<span class="screen-reader-text">',32 'link_after' => '</span>' . twentyseventeen_get_svg( array( 'icon' => 'chain' ) ),33 ) );34 ?>35 </nav><!-- .social-navigation -->36 <?php endif;24 if ( has_nav_menu( 'social' ) ) : ?> 25 <nav class="social-navigation" role="navigation" aria-label="<?php _e( 'Footer Social Links Menu', 'twentyseventeen' ); ?>"> 26 <?php 27 wp_nav_menu( array( 28 'theme_location' => 'social', 29 'menu_class' => 'social-links-menu', 30 'depth' => 1, 31 'link_before' => '<span class="screen-reader-text">', 32 'link_after' => '</span>' . twentyseventeen_get_svg( array( 'icon' => 'chain' ) ), 33 ) ); 34 ?> 35 </nav><!-- .social-navigation --> 36 <?php endif; 37 37 38 get_template_part( 'components/footer/site', 'info' ); 39 ?> 40 </div><!-- .wrap --> 41 </footer><!-- #colophon --> 38 get_template_part( 'components/footer/site', 'info' ); 39 ?> 40 </div><!-- .wrap --> 41 </footer><!-- #colophon --> 42 </div><!-- .site-content-contain --> 42 43 </div><!-- #page --> 43 44 <?php wp_footer(); ?> 44 45 -
src/wp-content/themes/twentyseventeen/header.php
49 49 endif; 50 50 ?> 51 51 52 <div id="content" class="site-content"> 52 <div class="site-content-contain"> 53 <div id="content" class="site-content"> -
src/wp-content/themes/twentyseventeen/inc/custom-header.php
39 39 'width' => 2000, 40 40 'height' => 1200, 41 41 'flex-height' => true, 42 'video' => true, 42 43 'wp-head-callback' => 'twentyseventeen_header_style', 43 44 ) ) ); 44 45 -
src/wp-content/themes/twentyseventeen/style.css
1287 1287 border-top: 1px solid #eee; 1288 1288 font-size: 16px; 1289 1289 font-size: 1rem; 1290 position: relative; 1290 1291 } 1291 1292 1292 1293 .navigation-top .wrap { … … 1528 1529 1529 1530 .site-branding { 1530 1531 padding: 1em 0; 1532 position: relative; 1531 1533 -webkit-transition: margin-bottom 0.2s; 1532 1534 transition: margin-bottom 0.2s; 1535 z-index: 3; 1533 1536 } 1534 1537 1535 1538 .site-branding a { … … 1622 1625 } 1623 1626 1624 1627 .custom-header-image { 1625 background-position: center center;1626 background-repeat: no-repeat;1627 -webkit-background-size: cover;1628 background-size: cover;1629 1628 bottom: 0; 1630 1629 left: 0; 1630 overflow: hidden; 1631 1631 position: absolute; 1632 1632 right: 0; 1633 1633 top: 0; 1634 width: 100%; 1634 1635 } 1635 1636 1636 1637 .custom-header-image:before { … … 1646 1647 left: 0; 1647 1648 position: absolute; 1648 1649 right: 0; 1650 z-index: 2; 1649 1651 } 1650 1652 1651 .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-image { 1652 background-position: center bottom; 1653 .has-header-image .custom-header-image img, 1654 .has-header-image .custom-header-image video { 1655 position: fixed; 1656 height: auto; 1657 left: 50%; 1658 max-width: 1000%; 1659 min-height: 100%; 1660 min-width: 100%; 1661 min-width: 100vw; /* vw prevents 1px gap on left that 100% has */ 1662 width: auto; 1663 top: 50%; 1664 -ms-transform: translateX(-50%) translateY(-50%); 1665 -moz-transform: translateX(-50%) translateY(-50%); 1666 -webkit-transform: translateX(-50%) translateY(-50%); 1667 transform: translateX(-50%) translateY(-50%); 1653 1668 } 1654 1669 1670 .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-image img { 1671 bottom: 0; 1672 position: absolute; 1673 top: auto; 1674 -ms-transform: translateX(-50%) translateY(0); 1675 -moz-transform: translateX(-50%) translateY(0); 1676 -webkit-transform: translateX(-50%) translateY(0); 1677 transform: translateX(-50%) translateY(0); 1678 } 1679 1655 1680 body:not(.has-header-image) .custom-header-image { 1656 1681 padding: 5% 0; 1657 1682 } … … 1749 1774 ## Regular Content 1750 1775 --------------------------------------------------------------*/ 1751 1776 1777 .site-content-contain { 1778 background-color: #fff; 1779 position: relative; 1780 } 1781 1752 1782 .site-content { 1753 1783 padding: 2.5em 0 0; 1754 1784 } … … 2614 2644 # Media 2615 2645 --------------------------------------------------------------*/ 2616 2646 2617 img { 2647 img, 2648 video { 2618 2649 height: auto; /* Make sure images are scaled correctly. */ 2619 2650 max-width: 100%; /* Adhere to container width. */ 2620 2651 } … … 3258 3289 3259 3290 .has-header-image.twentyseventeen-front-page .custom-header, 3260 3291 .has-header-image.home.blog .custom-header { 3261 display: block;3262 3292 min-height: 0; 3263 3293 } 3264 3294 … … 3267 3297 position: relative; 3268 3298 } 3269 3299 3300 .twentyseventeen-front-page.has-header-image .custom-header-image, 3301 .home.blog.has-header-image .custom-header-image { 3302 height: 0; 3303 position: relative; 3304 } 3305 3270 3306 .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-image { 3271 3307 bottom: 0; 3272 3308 height: auto; … … 3276 3312 top: 0; 3277 3313 } 3278 3314 3279 .twentyseventeen-front-page.has-header-image .custom-header-image,3280 .home.blog.has-header-image .custom-header-image {3281 height: 0;3282 padding-top: 66%;3283 position: relative;3284 }3285 3286 3315 .custom-logo-link { 3287 3316 padding-right: 2em; 3288 3317 } … … 3554 3583 height: 1200px; 3555 3584 height: 100vh; 3556 3585 max-height: 100%; 3557 padding: 10% 0; 3586 overflow: hidden; 3587 /* padding: 10% 0; */ 3558 3588 } 3559 3589 3560 3590 .twentyseventeen-front-page.has-header-image .custom-header-image:before, … … 3901 3931 3902 3932 @media screen and ( min-width: 55em ) { 3903 3933 3904 .twentyseventeen-front-page.has-header-image .custom-header-image,3905 .home.blog.has-header-image .custom-header-image {3906 background-attachment: fixed;3907 }3908 3909 3934 .panel-image { 3910 3935 background-attachment: fixed; 3911 3936 } -
src/wp-includes/class-wp-customize-manager.php
3223 3223 3224 3224 /* Custom Header */ 3225 3225 3226 if ( current_theme_supports( 'custom-header', 'video' ) ) { 3227 $title = __( 'Header Visuals' ); 3228 $description = __( 'If you add a video, the image will be used as a fallback while the video loads.' ); 3229 $width = absint( get_theme_support( 'custom-header', 'width' ) ); 3230 $height = absint( get_theme_support( 'custom-header', 'height' ) ); 3231 if ( $width && $height ) { 3232 /* translators: %s: header size in pixels */ 3233 $control_description = sprintf( __( 'Upload your video in <code>.mp4</code> format and minimize its file size for best results. Your theme recommends dimensions of %s pixels.' ), 3234 sprintf( '<strong>%s × %s</strong>', $width, $height ) 3235 ); 3236 } elseif ( $width ) { 3237 /* translators: %s: header width in pixels */ 3238 $control_description = sprintf( __( 'Upload your video in <code>.mp4</code> format and minimize its file size for best results. Your theme recommends a width of %s pixels.' ), 3239 sprintf( '<strong>%s</strong>', $width ) 3240 ); 3241 } else { 3242 /* translators: %s: header height in pixels */ 3243 $control_description = sprintf( __( 'Upload your video in <code>.mp4</code> format and minimize its file size for best results. Your theme recommends a height of %s pixels.' ), 3244 sprintf( '<strong>%s</strong>', $height ) 3245 ); 3246 } 3247 } else { 3248 $title = __( 'Header Image' ); 3249 $description = ''; 3250 $control_description = ''; 3251 } 3252 3226 3253 $this->add_section( 'header_image', array( 3227 'title' => __( 'Header Image' ), 3254 'title' => $title, 3255 'description' => $description, 3228 3256 'theme_supports' => 'custom-header', 3229 3257 'priority' => 60, 3230 3258 ) ); 3231 3259 3260 $this->add_setting( 'header_video', array( 3261 'theme_supports' => array( 'custom-header', 'video' ), 3262 'transport' => 'postMessage', 3263 'validate_callback' => array( $this, '_validate_header_video' ), 3264 ) ); 3265 3232 3266 $this->add_setting( new WP_Customize_Filter_Setting( $this, 'header_image', array( 3233 3267 'default' => get_theme_support( 'custom-header', 'default-image' ), 3234 3268 'theme_supports' => 'custom-header', … … 3239 3273 'theme_supports' => 'custom-header', 3240 3274 ) ) ); 3241 3275 3276 $this->add_control( new WP_Customize_Media_Control( $this, 'header_video', array( 3277 'theme_supports' => array( 'custom-header', 'video' ), 3278 'label' => __( 'Header Video' ), 3279 'description' => $control_description, 3280 'section' => 'header_image', 3281 'mime_type' => 'video', 3282 ) ) ); 3283 3242 3284 $this->add_control( new WP_Customize_Header_Image_Control( $this ) ); 3243 3285 3286 $this->selective_refresh->add_partial( 'header_video', array( 3287 'selector' => '#wp-custom-header-video', 3288 'render_callback' => 'get_header_video_tag', 3289 'settings' => array( 'header_video', 'header_image' ), // The image is used as a video fallback here. 3290 ) ); 3291 3244 3292 /* Custom Background */ 3245 3293 3246 3294 $this->add_section( 'background_image', array( … … 3595 3643 } 3596 3644 3597 3645 /** 3646 * Callback for validating the header_video value. 3647 * 3648 * Ensures that the selected video is less than 8MB and provides an error message. 3649 * 3650 * @since 4.7.0 3651 * 3652 * @param string $color 3653 * @return mixed 3654 */ 3655 public function _validate_header_video( $validity, $value ) { 3656 $video = get_attached_file( absint( $value ) ); 3657 if ( $video ) { 3658 $size = filesize( $video ); 3659 if ( 8 < $size / pow( 1024, 2 ) ) { // Check whether the size is larger than 8MB. 3660 $validity->add( 'size_too_large', __( 'This video file is too large to use as a header video. Try a shorter video or optimize the compression settings and re-upload.' ) ); 3661 } 3662 } 3663 return $validity; 3664 } 3665 3666 /** 3598 3667 * Callback for rendering the custom logo, used in the custom_logo partial. 3599 3668 * 3600 3669 * This method exists because the partial object and context data are passed -
src/wp-includes/customize/class-wp-customize-header-image-control.php
166 166 $height = absint( get_theme_support( 'custom-header', 'height' ) ); 167 167 ?> 168 168 <div class="customize-control-content"> 169 <p class="customizer-section-intro"> 169 <?php if ( current_theme_supports( 'custom-header', 'video' ) ) { 170 echo '<span class="customize-control-title">' . $this->label . '</span>'; 171 } ?> 172 <p class="customizer-section-intro customize-control-description"> 170 173 <?php 171 if ( $width && $height ) { 174 if ( current_theme_supports( 'custom-header', 'video' ) ) { 175 _e( 'While you can crop images to your liking after clicking <strong>Add new image</strong>, we recommend matching the size of your video.' ); 176 } elseif ( $width && $height ) { 172 177 /* translators: %s: header size in pixels */ 173 178 printf( __( 'While you can crop images to your liking after clicking <strong>Add new image</strong>, your theme recommends a header size of %s pixels.' ), 174 179 sprintf( '<strong>%s × %s</strong>', $width, $height ) -
src/wp-includes/theme.php
1264 1264 'thumbnail_url' => '', 1265 1265 'width' => get_theme_support( 'custom-header', 'width' ), 1266 1266 'height' => get_theme_support( 'custom-header', 'height' ), 1267 'video' => get_theme_support( 'custom-header', 'video' ), 1267 1268 ); 1268 1269 return (object) wp_parse_args( $data, $default ); 1269 1270 } … … 1311 1312 } 1312 1313 1313 1314 /** 1315 * Check whether a header video is set or not. 1316 * 1317 * @since 4.7.0 1318 * 1319 * @see get_header_video_url() 1320 * 1321 * @return bool Whether a header video is set or not. 1322 */ 1323 function has_header_video() { 1324 return (bool) get_header_video_url(); 1325 } 1326 1327 /* Retrieve header video URL for custom header. 1328 * 1329 * @since 4.7.0 1330 * 1331 * @return string|false 1332 */ 1333 function get_header_video_url() { 1334 $id = absint( get_theme_mod( 'header_video' ) ); 1335 1336 if ( ! $id ) { 1337 return false; 1338 } 1339 1340 if ( $id ) { 1341 // We have an attachment ID, need the full URL 1342 $url = wp_get_attachment_url( $id ); 1343 } 1344 1345 return esc_url_raw( set_url_scheme( $url ) ); 1346 } 1347 1348 /** 1349 * Create video tag markup for a custom header video. 1350 * 1351 * @since 4.7.0 1352 * 1353 * @param array $attr Optional. Additional attributes for the image tag. Can be used 1354 * to override the default attributes. Default empty. 1355 * @return string HTML image element markup or empty string on failure. 1356 */ 1357 function get_header_video_tag( $attr = array() ) { 1358 $header = get_custom_header(); 1359 $video = get_header_video_url(); 1360 $image = get_header_image(); 1361 1362 if ( empty( $video ) ) { 1363 if ( is_customize_preview() ) { // If there was a video an it was removed, fall back to an image. 1364 if ( ! empty( $image ) ) { 1365 return get_header_image_tag(); 1366 } 1367 } 1368 return ''; 1369 } 1370 1371 $width = absint( $header->width ); 1372 $height = absint( $header->height ); 1373 1374 $attr = wp_parse_args( 1375 $attr, 1376 array( 1377 'src' => get_header_video_url(), 1378 'width' => $width, 1379 'height' => $height, 1380 'controls' => '', 1381 'autoplay' => '', 1382 'loop' => '', 1383 'muted' => '', 1384 ) 1385 ); 1386 1387 // Use the header image as poster attribute and video fallback. 1388 if ( ! empty( $image ) ) { 1389 $attr['poster'] = $header->url; 1390 $content = get_header_image_tag(); 1391 } else { 1392 $content = __( 'Your browser cannot play this video.' ); 1393 } 1394 1395 $attr = array_map( 'esc_attr', $attr ); 1396 $html = '<video'; 1397 1398 foreach ( $attr as $name => $value ) { 1399 $html .= ' ' . $name . '="' . $value . '"'; 1400 } 1401 1402 $html .= '>' . $content . '</video>'; 1403 1404 /** 1405 * Filters the markup of header videos. 1406 * 1407 * @since 4.7.0 1408 * 1409 * @param string $html The HTML image tag markup being filtered. 1410 * @param object $header The custom header object returned by 'get_custom_header()'. 1411 * @param array $attr Array of the attributes for the image tag. 1412 */ 1413 return apply_filters( 'get_header_video_tag', $html, $header, $attr ); 1414 } 1415 1416 /** 1417 * Display the video markup for a custom header video. 1418 * 1419 * @since 4.7.0 1420 * 1421 * @param array $attr Optional. Attributes for the image markup. Default empty. 1422 */ 1423 function the_header_video_tag( $attr = array() ) { 1424 echo '<div id="wp-custom-header-video">' . get_header_video_tag( $attr ) . '</div>'; 1425 } 1426 1427 /** 1428 * Display header video URL. 1429 * 1430 * @since 4.7.0 1431 */ 1432 function the_header_video_url() { 1433 $video = get_header_video_url(); 1434 if ( $video ) { 1435 echo esc_url( $video ); 1436 } 1437 } 1438 1439 /** 1440 * Display the video and image markup for a custom header. 1441 * 1442 * @since 4.7.0 1443 */ 1444 function the_custom_header() { 1445 $video = get_header_video_url(); 1446 $image = get_header_image(); 1447 1448 if ( ! empty( $video ) ) { 1449 the_header_video_tag(); 1450 } elseif ( is_customize_preview() ) { 1451 echo '<div id="wp-custom-header-video"></div>'; 1452 if ( ! empty( $image ) ) { 1453 the_header_image_tag(); 1454 } 1455 } elseif ( ! empty( $image ) ) { 1456 the_header_image_tag(); 1457 } 1458 } 1459 1460 /** 1314 1461 * Retrieve background image for custom background. 1315 1462 * 1316 1463 * @since 3.0.0 … … 1706 1853 'wp-head-callback' => '', 1707 1854 'admin-head-callback' => '', 1708 1855 'admin-preview-callback' => '', 1856 'video' => false, 1709 1857 ); 1710 1858 1711 1859 $jit = isset( $args[0]['__jit'] );