Merge pull request #444 from iamtakashi/custom-logo

Custom Logo Optimisation

Author: iamtakashi

functions.php

@@ -66,9 +66,15 @@ function twentysixteen_setup() {
 
 	/*
 	 * Enable support for custom logo.
+	 *
+	 *  @since Twenty Sixteen 1.5
 	 */
-	add_image_size( 'twentysixteen-logo', 1200, 175 );
-	add_theme_support( 'custom-logo', array( 'size' => 'twentysixteen-logo' ) );
+	add_theme_support( 'custom-logo', array(
+		'height'      => 240,
+		'width'       => 240,
+		'flex-height' => true,
+		'flex-width'  => true,
+	) );
 
 	/*
 	 * Enable support for Post Thumbnails on posts and pages.
@@ -414,22 +420,3 @@ function twentysixteen_widget_tag_cloud_args( $args ) {
 	return $args;
 }
 add_filter( 'widget_tag_cloud_args', 'twentysixteen_widget_tag_cloud_args' );
-
-/**
- * Add custom image sizes attribute to enhance responsive image functionality
- * for custom logo.
- *
- * @since Twenty Sixteen 1.2
- *
- * @param array $attr Attributes for the image markup.
- * @param int   $attachment Image attachment ID.
- * @param array $size Registered image size or flat array of height and width dimensions.
- * @return string A source size value for use in a post thumbnail 'sizes' attribute.
- */
-function twentysixteen_logo_sizes_attr( $attr, $attachment, $size ) {
-	if ( 'twentysixteen-logo' === $size ) {
-		$attr['sizes'] = '(max-width: 709px) 85vw, (max-width: 909px) 81vw, (max-width: 1362px) 88vw, 1200px';
-	}
-	return $attr;
-}
-add_filter( 'wp_get_attachment_image_attributes', 'twentysixteen_logo_sizes_attr', 10 , 3 );

style.css

@@ -1565,6 +1565,10 @@ blockquote:after,
 	display: block;
 }
 
+.custom-logo {
+	max-width: 180px;
+}
+
 .site-title {
 	font-family: Montserrat, "Helvetica Neue", sans-serif;
 	font-size: 23px;
@@ -2743,6 +2747,10 @@ p > video {
 		margin-bottom: 1.3125em;
 	}
 
+	.custom-logo {
+		max-width: 210px;
+	}
+
 	.site-title {
 		font-size: 28px;
 		font-size: 1.75rem;
@@ -3378,6 +3386,10 @@ p > video {
 		margin-bottom: 1.75em;
 	}
 
+	.custom-logo {
+		max-width: 240px;
+	}
+
 	.image-navigation {
 		margin-bottom: 3.230769231em;
 	}