Customizer: introduce theme option to disable the image filter applie…

…d to featured images.

inc/customizer.php

@@ -33,6 +33,31 @@ function twentynineteen_customize_register( $wp_customize ) {
 			)
 		);
 	}
+
+	/**
+	 * Theme options.
+	 */
+	$wp_customize->add_section( 'theme_options', array(
+		'title'    => __( 'Theme Options', 'twentynineteen' ),
+		'priority' => 130, // Before Additional CSS.
+	) );
+
+	$wp_customize->add_setting( 'image_filter', array(
+		'default'           => 'active',
+		'sanitize_callback' => 'twentynineteen_sanitize_image_filter',
+		'transport'         => 'postMessage',
+	) );
+
+	$wp_customize->add_control( 'image_filter', array(
+		'label'       => __( 'Image Filter', 'twentynineteen' ),
+		'section'     => 'theme_options',
+		'type'        => 'radio',
+		'description' => __( 'When image filters are active, featured images are tinted blue. When inactive, they will be shown in color although featured images in single posts will have a black overlay to ensure the text is readable on top of bright images.', 'twentynineteen' ),
+		'choices'     => array(
+			'active'   => __( 'Active', 'twentynineteen' ),
+			'inactive' => __( 'Inactive', 'twentynineteen' ),
+		),
+	) );
 }
 add_action( 'customize_register', 'twentynineteen_customize_register' );
 
@@ -61,3 +86,23 @@ function twentynineteen_customize_preview_js() {
 	wp_enqueue_script( 'twentynineteen-customizer', get_template_directory_uri() . '/js/customizer.js', array( 'customize-preview' ), '20151215', true );
 }
 add_action( 'customize_preview_init', 'twentynineteen_customize_preview_js' );
+
+/**
+ * Sanitize image filter choice.
+ *
+ * @param string $choice Whether image filter is active.
+ *
+ * @return string
+ */
+function twentynineteen_sanitize_image_filter( $choice ) {
+	$valid = array(
+		'active',
+		'inactive',
+	);
+
+	if ( in_array( $choice, $valid, true ) ) {
+		return $choice;
+	}
+
+	return 'active';
+}

inc/template-functions.php

@@ -129,6 +129,9 @@ function twentynineteen_can_show_post_thumbnail() {
  * Returns true if image filters are enabled on the theme options.
  */
 function twentynineteen_image_filters_enabled() {
+	if ( 'inactive' === get_theme_mod( 'image_filter' ) ) {
+		return false;
+	}
 	return true;
 }
 

js/customizer.js

@@ -8,4 +8,15 @@
 
 ( function( $ ) { // jshint ignore:line
 
+	// Image filter.
+	wp.customize( 'image_filter', function( value ) {
+		value.bind( function( to ) {
+			if ( 'active' === to ) {
+				$( 'body' ).addClass( 'image-filters-enabled' );
+			} else {
+				$( 'body' ).removeClass( 'image-filters-enabled' );
+			}
+		} );
+	} );
+
 } )( jQuery );

sass/site/header/_site-featured-image.scss

@@ -151,32 +151,42 @@
 	/* The intensity of each blend mode is controlled via layer opacity. */
 
 	/* First layer: grayscale. */
-	.site-branding-container:before {
+  	.site-branding-container:before {
 		background-position: center;
 		background-repeat: no-repeat;
 		background-size: cover;
-		filter: grayscale(100%);
 		z-index: 1;
+
+		/* When image filters are active, make it grayscale to colorize it blue. */
+		.image-filters-enabled & {
+		  filter: grayscale(100%);
+		}
 	}
 
 	/* Second layer: screen. */
-	.site-featured-image:before {
+	.image-filters-enabled & .site-featured-image:before {
 		background: $color__link;
 		mix-blend-mode: screen;
 		opacity: 0.1;
-		z-index: 2;
 	}
 
 	/* Third layer: multiply. */
-	.site-featured-image:after {
-		background: $color__link;
+  	/* When image filters are inactive, a black overlay is added. */
+  	.site-featured-image:after {
+		background: #000;
 		mix-blend-mode: multiply;
-		opacity: 1;
-		z-index: 3;
+		opacity: .7;
+
+	  	/* When image filters are active, a blue overlay is added. */
+		.image-filters-enabled & {
+			background: $color__link;
+			opacity: 1;
+			z-index: 3;
+		}
 	}
 
 	/* Fourth layer: overlay. */
-	.site-branding-container:after {
+  	.image-filters-enabled & .site-branding-container:after {
 		background: rgba(white, 0.35);
 		mix-blend-mode: overlay;
 		opacity: 0.5;
@@ -185,26 +195,31 @@
 
 	/* Fifth layer: readability overlay */
 	&:after {
-		background: mix($color__link, black, 12%);
-
+	  	background: #000;
 		/**
 		 * Add a transition to the readability overlay, to add a subtle
 		 * but smooth effect when resizing the screen.
 		 */
 		transition: opacity 1200ms ease-in-out;
-
+	  	opacity: 0.7;
 		z-index: 5;
-		opacity: 0.38;
 
-		@include media(tablet) {
-			opacity: 0.18;
-		}
+		/* When image filters are active, a blue overlay is added. */
+		.image-filters-enabled & {
+			background: mix($color__link, black, 12%);
+			opacity: 0.38;
+
+			@include media(tablet) {
+				opacity: 0.18;
+			}
 
-		@include media(desktop) {
-			opacity: 0.1;
+			@include media(desktop) {
+				opacity: 0.1;
+			}
 		}
 	}
 
+
 	::-moz-selection {
 		background: rgba(white, 0.17);
 	}

style.css

@@ -1541,6 +1541,7 @@ body.page .main-navigation {
   /* First layer: grayscale. */
   /* Second layer: screen. */
   /* Third layer: multiply. */
+  /* When image filters are inactive, a black overlay is added. */
   /* Fourth layer: overlay. */
   /* Fifth layer: readability overlay */
 }
@@ -1671,50 +1672,65 @@ body.page .main-navigation {
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
-  filter: grayscale(100%);
   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%);
 }
 
-.site-header.featured-image .site-featured-image:before {
+.image-filters-enabled .site-header.featured-image .site-featured-image:before {
   background: #0073aa;
   mix-blend-mode: screen;
   opacity: 0.1;
-  z-index: 2;
 }
 
 .site-header.featured-image .site-featured-image:after {
-  background: #0073aa;
+  background: #000;
   mix-blend-mode: multiply;
+  opacity: .7;
+  /* When image filters are active, a blue overlay is added. */
+}
+
+.image-filters-enabled .site-header.featured-image .site-featured-image:after {
+  background: #0073aa;
   opacity: 1;
   z-index: 3;
 }
 
-.site-header.featured-image .site-branding-container:after {
+.image-filters-enabled .site-header.featured-image .site-branding-container:after {
   background: rgba(255, 255, 255, 0.35);
   mix-blend-mode: overlay;
   opacity: 0.5;
   z-index: 4;
 }
 
 .site-header.featured-image:after {
-  background: #000e14;
+  background: #000;
   /**
 		 * Add a transition to the readability overlay, to add a subtle
 		 * but smooth effect when resizing the screen.
 		 */
   transition: opacity 1200ms ease-in-out;
+  opacity: 0.7;
   z-index: 5;
+  /* When image filters are active, a blue overlay is added. */
+}
+
+.image-filters-enabled .site-header.featured-image:after {
+  background: #000e14;
   opacity: 0.38;
 }
 
 @media only screen and (min-width: 768px) {
-  .site-header.featured-image:after {
+  .image-filters-enabled .site-header.featured-image:after {
     opacity: 0.18;
   }
 }
 
 @media only screen and (min-width: 1168px) {
-  .site-header.featured-image:after {
+  .image-filters-enabled .site-header.featured-image:after {
     opacity: 0.1;
   }
 }