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

…d to featured images.

inc/customizer.php

@@ -33,6 +33,40 @@ 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 +95,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);
 	}