Merge pull request #450 from LittleBigThing/responsive-featured-image

responsive featured image
WordPress · Nov 5, 2018 · f39b476 · f39b476
2 parents ebc8efb + ba972f4
commit f39b476
Show file tree

Hide file tree

Showing 6 changed files with 165 additions and 114 deletions.
diff --git a/functions.php b/functions.php
@@ -173,10 +173,6 @@ function twentynineteen_scripts() {
 
 	wp_enqueue_style( 'twentynineteen-print-style', get_template_directory_uri() . '/print.css', array(), wp_get_theme()->get( 'Version' ), 'print' );
 
-	if ( is_singular() && twentynineteen_can_show_post_thumbnail() ) {
-		wp_add_inline_style( 'twentynineteen-style', twentynineteen_header_featured_image_css() );
-	}
-
 	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
 		wp_enqueue_script( 'comment-reply' );
 	}

diff --git a/header.php b/header.php
@@ -31,6 +31,7 @@
 
 			<?php if ( is_singular() && twentynineteen_can_show_post_thumbnail() ) : ?>
 				<div class="site-featured-image">
+					<?php twentynineteen_post_thumbnail(); ?>
 					<?php the_post(); ?>
 					<?php $discussion = ! is_page() && twentynineteen_can_show_post_thumbnail() ? twentynineteen_get_discussion_data() : null; ?>
 					<div class="<?php echo ( ! empty( $discussion ) && count( $discussion->authors ) > 0 ) ? 'entry-header has-discussion' : 'entry-header'; ?>">

diff --git a/inc/template-tags.php b/inc/template-tags.php
@@ -168,16 +168,6 @@ function twentynineteen_post_thumbnail() {
 	}
 endif;
 
-if ( ! function_exists( 'twentynineteen_header_featured_image_css' ) ) :
-	/**
-	 * Returns the CSS for the header featured image background.
-	 */
-	function twentynineteen_header_featured_image_css() {
-		$img_url = get_the_post_thumbnail_url( get_the_ID(), 'post-thumbnail' );
-		return sprintf( 'body.singular .site-header.featured-image .site-branding-container:before { background-image: url(%s); }', esc_url( $img_url ) );
-	}
-endif;
-
 if ( ! function_exists( 'twentynineteen_comment_avatar' ) ) :
 	/**
 	 * Returns the HTML markup to generate a user avatar.

diff --git a/sass/site/header/_site-featured-image.scss b/sass/site/header/_site-featured-image.scss
@@ -1,6 +1,9 @@
 // Featured image styles
 
 .site-header.featured-image {
+
+	/* Hide overflow for overflowing featured image */
+	overflow: hidden;
 
 	/* Need relative positioning to properly align layers. */
 	position: relative;
@@ -59,86 +62,117 @@
 	}
 
 	/* Entry header */
+	.site-featured-image {
+
+		/* First layer: grayscale. */
+		.post-thumbnail img {
+			height: auto;
+			left: 50%;
+			max-width: 1000%;
+			min-height: 100%;
+			min-width: 100vw;
+			position: absolute;
+			top: 50%;
+			transform: translateX(-50%) translateY(-50%);
+			width: auto;
+			z-index: 1;
+
+			@supports ( object-fit: cover ) {
+				height: 100%;
+				left: 0;
+				object-fit: cover;
+				top: 0;
+				transform: none;
+				width: 100%;
+			}
+
+			/* When image filters are active, make it grayscale to colorize it blue. */
+			.image-filters-enabled & {
+				filter: grayscale(100%);
+			}
+		}
+
+		.entry-header {
+
+			margin-top: calc( 4 * #{$size__spacing-unit});
+			margin-bottom: 0;
+			margin-left: 0;
+			margin-right: 0;
 
-	.site-featured-image .entry-header {
-		margin-top: calc( 4 * #{$size__spacing-unit});
-		margin-bottom: 0;
-		margin-left: 0;
-		margin-right: 0;
-
-		@include media (tablet) {
+			@include media (tablet) {
 
-			margin-left: calc(2 * (100vw / 12));
-			margin-right: calc(2 * (100vw / 12));
-		}
+				margin-left: calc(2 * (100vw / 12));
+				margin-right: calc(2 * (100vw / 12));
+			}
 
-		.entry-title {
+			.entry-title {
 
-			&:before {
-				background: $color__background-body;
+				&:before {
+					background: $color__background-body;
+				}
 			}
-		}
 
-		/* Entry meta */
+			/* Entry meta */
 
-		.entry-meta {
+			.entry-meta {
 
-			font-weight: 500;
+				font-weight: 500;
 
-			> span {
+				> span {
 
-				margin-right: $size__spacing-unit;
-				display: inline-block;
+					margin-right: $size__spacing-unit;
+					display: inline-block;
 
-				&:last-child {
-					margin-right: 0;
+					&:last-child {
+						margin-right: 0;
+					}
 				}
-			}
 
-			a {
+				a {
 
-				@include link-transition;
-				color: currentColor;
+					@include link-transition;
+					color: currentColor;
 
-				&:hover {
-					text-decoration: none;
+					&:hover {
+						text-decoration: none;
+					}
 				}
-			}
 
-			.svg-icon {
-				position: relative;
-				display: inline-block;
-				vertical-align: middle;
-				margin-right: 0.5em;
-			}
+				.svg-icon {
+					position: relative;
+					display: inline-block;
+					vertical-align: middle;
+					margin-right: 0.5em;
+				}
 
-			.discussion-avatar-list {
-				display: none;
+				.discussion-avatar-list {
+					display: none;
+				}
 			}
-		}
 
-		&.has-discussion {
+			&.has-discussion {
 
-			@include media (tablet) {
+				@include media (tablet) {
 
-				.entry-meta {
-					display: flex;
-					position: relative;
-				}
+					.entry-meta {
+						display: flex;
+						position: relative;
+					}
 
-				.entry-title {
-					padding-right: calc(1 * (100vw / 12) + #{$size__spacing-unit});
-				}
+					.entry-title {
+						padding-right: calc(1 * (100vw / 12) + #{$size__spacing-unit});
+					}
 
-				.entry-meta .comment-count {
-					position: absolute;
-					right: 0;
-				}
+					.entry-meta .comment-count {
+						position: absolute;
+						right: 0;
+					}
 
-				.entry-meta .discussion-avatar-list {
-					display: block;
-					position: absolute;
-					bottom: 100%;
+					.entry-meta .discussion-avatar-list {
+						display: block;
+						position: absolute;
+						bottom: 100%;
+					}
 				}
 			}
 		}
@@ -170,7 +204,6 @@
 	}
 
 	/* Set up image filter layer positioning */
-	.site-branding-container:before,
 	.site-branding-container:after,
 	.site-featured-image:before,
 	.site-featured-image:after,
@@ -184,26 +217,13 @@
 	}
 
 	/* Background & Effects */
-	/* Shared background settings between pseudo elements. See .site-branding-container */
+	/* Shared background settings between pseudo elements. */
 	background-position: center;
 	background-repeat: no-repeat;
 	background-size: cover;
 
 	/* The intensity of each blend mode is controlled via layer opacity. */
 
-	/* First layer: grayscale. */
-  	.site-branding-container:before {
-		background-position: center;
-		background-repeat: no-repeat;
-		background-size: cover;
-		z-index: 1;
-
-		/* When image filters are active, make it grayscale to colorize it blue. */
-		.image-filters-enabled & {
-			filter: grayscale(100%);
-		}
-	}
-
 	/* Second layer: screen. */
 	.image-filters-enabled & .site-featured-image:before {
 		background: $color__link;

diff --git a/style-rtl.css b/style-rtl.css
@@ -1667,6 +1667,8 @@ body.page .main-navigation {
 }
 
 .site-header.featured-image {
+  /* Hide overflow for overflowing featured image */
+  overflow: hidden;
   /* Need relative positioning to properly align layers. */
   position: relative;
   /* Add text shadow to text, to increase readability. */
@@ -1678,12 +1680,11 @@ body.page .main-navigation {
   /* Make sure important elements are above pseudo elements used for effects. */
   /* Set up image filter layer positioning */
   /* Background & Effects */
-  /* Shared background settings between pseudo elements. See .site-branding-container */
+  /* Shared background settings between pseudo elements. */
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   /* The intensity of each blend mode is controlled via layer opacity. */
-  /* First layer: grayscale. */
   /* Second layer: screen. */
   /* Third layer: multiply. */
   /* When image filters are inactive, a black overlay is added. */
@@ -1759,6 +1760,40 @@ body.page .main-navigation {
   filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
 }
 
+.site-header.featured-image .site-featured-image {
+  /* First layer: grayscale. */
+}
+
+.site-header.featured-image .site-featured-image .post-thumbnail img {
+  height: auto;
+  right: 50%;
+  max-width: 1000%;
+  min-height: 100%;
+  min-width: 100vw;
+  position: absolute;
+  top: 50%;
+  transform: translateX(50%) translateY(-50%);
+  width: auto;
+  z-index: 1;
+  /* When image filters are active, make it grayscale to colorize it blue. */
+}
+
+@supports ((-o-object-fit: cover) or (object-fit: cover)) {
+  .site-header.featured-image .site-featured-image .post-thumbnail img {
+    height: 100%;
+    right: 0;
+    -o-object-fit: cover;
+       object-fit: cover;
+    top: 0;
+    transform: none;
+    width: 100%;
+  }
+}
+
+.image-filters-enabled .site-header.featured-image .site-featured-image .post-thumbnail img {
+  filter: grayscale(100%);
+}
+
 .site-header.featured-image .site-featured-image .entry-header {
   margin-top: calc( 4 * 1rem);
   margin-bottom: 0;
@@ -1849,7 +1884,6 @@ body.page .main-navigation {
   z-index: 9;
 }
 
-.site-header.featured-image .site-branding-container:before,
 .site-header.featured-image .site-branding-container:after,
 .site-header.featured-image .site-featured-image:before,
 .site-header.featured-image .site-featured-image:after, .site-header.featured-image:after {
@@ -1862,18 +1896,6 @@ body.page .main-navigation {
   height: 100%;
 }
 
-.site-header.featured-image .site-branding-container:before {
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-  z-index: 1;
-  /* When image filters are active, make it grayscale to colorize it blue. */
-}
-
-.image-filters-enabled .site-header.featured-image .site-branding-container:before {
-  filter: grayscale(100%);
-}
-
 .image-filters-enabled .site-header.featured-image .site-featured-image:before {
   background: #0073aa;
   mix-blend-mode: screen;