[wp-trac] [WordPress Trac] #38995: Twenty Seventeen: Custom headers incorrect on mobile when no image is set.

[WordPress Trac]

#38995: Twenty Seventeen: Custom headers incorrect on mobile when no image is set.
---------------------------+------------------------
 Reporter:  joemcgill      |       Owner:  joemcgill
     Type:  defect (bug)   |      Status:  accepted
 Priority:  normal         |   Milestone:  4.7
Component:  Bundled Theme  |     Version:  trunk
 Severity:  normal         |  Resolution:
 Keywords:  needs-patch    |     Focuses:
---------------------------+------------------------
Changes (by joemcgill):

 * owner:   => joemcgill
 * status:  new => accepted


Comment:

 Copying from [https://wordpress.slack.com/archives/core-
 themes/p1480525556000702 Slack]  for posterity:

 Re: Should we only allow video headers if an image is also set?
 >...there are valid cases where you want the video header on the homepage
 but no image headers on other pages that make use of custom headers.
 Twenty Seventeen currently allows that option if a person wants to style
 their site that way. Mandating that videos must be accompanied by an image
 makes that setup impossible.

 Re: Determining when to style.
 >The tricky part is that we don’t know if the video is going to load until
 the JS on the front end actually runs since the video could fail to load
 for several reasons: screen is smaller than our minimum requirements, URL
 is broken, JS breaks (or browser doesn’t support). One way we could
 approach fixing in this case is that a class like `has_header_video`
 should be added to the body once the video is actually loaded, and the
 theme should use the existence of that class to conditionally style the
 header.

 On this second point, it does look like Twenty Seventeen is styling the
 header in this case using the `.has-header-image` class, which is added by
 the theme in `/inc/template-functions.php` and is referenced in the site
 styles below:

 {{{
 .has-header-image.twentyseventeen-front-page .site-branding,
 .has-header-image.home.blog .site-branding {
         display: table-cell;
         height: 100%;
         vertical-align: bottom;
 }
 }}}

 We should not add the `.has-header-image` class unless a header image is
 set, and we should handle `.has-header-video` separately, or improve the
 logic so it handles the case where a video is present without an image and
 use a combined `.has-custom-header` class.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/38995#comment:1>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform