From 67d767514ecdf682159ef0f45d0988ba344a6ae3 Mon Sep 17 00:00:00 2001
From: "David A. Kennedy" <davidakennedy@git.wordpress.org>
Date: Fri, 21 Oct 2016 22:14:26 +0000
Subject: [PATCH] Twenty Seventeen: Display featured image on static front page

This improves UX, since an image added will be displayed on front end as opposed to not at all. This fix added the front page's featured image above the front page content, similar to how it's handled in the other panels. Also it removed code that was setting the front page's featured image as a fallback to the custom header, and updated the conditions that add the `has-header-image` to remove reference to the front page's featured image.

Props laurelfulford.

Fixes #38402.


git-svn-id: https://develop.svn.wordpress.org/trunk@38868 602fd350-edb4-49c9-b593-d223f7449a82
---
 .../components/header/header-image.php          |  9 ---------
 .../components/page/content-front-page.php      | 17 +++++++++++++++++
 .../twentyseventeen/inc/template-functions.php  |  4 ++--
 3 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/wp-content/themes/twentyseventeen/components/header/header-image.php b/src/wp-content/themes/twentyseventeen/components/header/header-image.php
index c4437d2be8..102456ddcc 100644
--- a/src/wp-content/themes/twentyseventeen/components/header/header-image.php
+++ b/src/wp-content/themes/twentyseventeen/components/header/header-image.php
@@ -19,15 +19,6 @@
 		<div class="custom-header-image" style="background-image: url(<?php echo esc_url( $header_image ); ?>)"></div>
 		<?php get_template_part( 'components/header/site', 'branding' ); ?>
 
-	<?php elseif ( twentyseventeen_is_frontpage() && has_post_thumbnail() ) :
-		// If not, fall back to front page's featured image, only on the front page.
-		$post_thumbnail_id = get_post_thumbnail_id( $post->ID );
-		$thumbnail_attributes = wp_get_attachment_image_src( $post_thumbnail_id, 'twentyseventeen-featured-image' );
-		?>
-
-		<div class="custom-header-image" style="background-image: url(<?php echo esc_url( $thumbnail_attributes[0] ); ?>)"></div>
-		<?php get_template_part( 'components/header/site', 'branding' ); ?>
-
 	<?php else : ?>
 		<?php // Otherwise, show a blank header. ?>
 		<div class="custom-header-simple">
diff --git a/src/wp-content/themes/twentyseventeen/components/page/content-front-page.php b/src/wp-content/themes/twentyseventeen/components/page/content-front-page.php
index cb0ab7d649..38fa0f77e9 100644
--- a/src/wp-content/themes/twentyseventeen/components/page/content-front-page.php
+++ b/src/wp-content/themes/twentyseventeen/components/page/content-front-page.php
@@ -11,6 +11,23 @@
 ?>
 <article id="post-<?php the_ID(); ?>" <?php post_class( 'twentyseventeen-panel ' ); ?> >
 
+	<?php if ( has_post_thumbnail() ) :
+		$thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'twentyseventeen-featured-image' );
+
+		$post_thumbnail_id = get_post_thumbnail_id( $post->ID );
+
+		$thumbnail_attributes = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'twentyseventeen-featured-image' );
+
+		// Calculate aspect ratio: h / w * 100%.
+		$ratio = $thumbnail_attributes[2] / $thumbnail_attributes[1] * 100;
+		?>
+
+		<div class="panel-image" style="background-image: url(<?php echo esc_url( $thumbnail[0] ); ?>);">
+			<div class="panel-image-prop" style="padding-top: <?php echo esc_attr( $ratio ); ?>%"></div>
+		</div><!-- .panel-image -->
+
+	<?php endif; ?>
+
 	<div class="panel-content">
 		<div class="wrap">
 			<header class="entry-header">
diff --git a/src/wp-content/themes/twentyseventeen/inc/template-functions.php b/src/wp-content/themes/twentyseventeen/inc/template-functions.php
index 8e6da7992a..5ea106b70b 100644
--- a/src/wp-content/themes/twentyseventeen/inc/template-functions.php
+++ b/src/wp-content/themes/twentyseventeen/inc/template-functions.php
@@ -34,8 +34,8 @@ function twentyseventeen_body_classes( $classes ) {
 		$classes[] = 'twentyseventeen-front-page';
 	}
 
-	// Add a class if there is a featured image or custom header.
-	if ( has_header_image() || ( has_post_thumbnail() && twentyseventeen_is_frontpage() ) ) {
+	// Add a class if there is a custom header.
+	if ( has_header_image() ) {
 		$classes[] = 'has-header-image';
 	}