Fix stretched logo and header issues in Twenty Seventeen

[westonruter]

Problem

Per #1305 (comment), on Twenty Seventeen when uploading a square logo I see the following in non-AMP:

<img
	width="253" 
	height="250" 
	src="https://src.wordpress-develop.test/wp-content/uploads/2018/05/cropped-amp-brand-blue10x-1.png" 
	class="custom-logo" 
	alt="WordPress Develop" 
	itemprop="logo" 
	srcset="https://src.wordpress-develop.test/wp-content/uploads/2018/05/cropped-amp-brand-blue10x-1.png 253w, https://src.wordpress-develop.test/wp-content/uploads/2018/05/cropped-amp-brand-blue10x-1-100x100.png 100w" 
	sizes="100vw" 
/>

In AMP, however, this comes out as:

<amp-img 
	width="253" 
	height="250" 
	src="https://src.wordpress-develop.test/wp-content/uploads/2018/05/cropped-amp-brand-blue10x-1.png" 
	class="custom-logo amp-wp-enforced-sizes" 
	alt="WordPress Develop" 
	itemprop="logo" 
	srcset="https://src.wordpress-develop.test/wp-content/uploads/2018/05/cropped-amp-brand-blue10x-1.png 253w, https://src.wordpress-develop.test/wp-content/uploads/2018/05/cropped-amp-brand-blue10x-1-100x100.png 100w" 
	sizes="100vw" 
	layout="intrinsic"
></amp-img>

Solution

The max-height of the .custom-logo-link img is defined as being 80px, unless there is header media in which case it is 200px. Issues related to vertically-squashed images can be avoided if we just make sure that the image has this height to begin with.

The sizes attribute also has to be removed from the Custom Logo image.

<amp-img
	noloading=""
	width="80.96"
	height="80"
	src="https://src.wordpress-develop.test/wp-content/uploads/2018/05/cropped-amp-brand-blue10x-1.png"
	class="custom-logo amp-wp-enforced-sizes"
	alt="WordPress Develop"
	itemprop="logo"
	srcset="https://src.wordpress-develop.test/wp-content/uploads/2018/05/cropped-amp-brand-blue10x-1.png 253w, https://src.wordpress-develop.test/wp-content/uploads/2018/05/cropped-amp-brand-blue10x-1-100x100.png 100w"
	layout="intrinsic"
></amp-img>

Other Changes

• Add noloading to the custom logo since the loading indicator is really best suited for larger images. (h/t @sebastianbenz)
• Fix height of header on Twenty Seventeen when there is no header image/video set.

See also #1321.

[westonruter]

There are several scenarios for testing this:

• With/without header image set.
• With/without title & tagline displayed
• With portrait/square logo vs wide horizontal logo.
• On homepage vs another page.

[kienstra]

Approved

Hi @westonruter,
This looks good. And the Custom Logo displays as expected in the testing scenarios you mentioned.

1. Homepage with header image:

2. Without header image:

3. Without title and tagline:

4. With wide horizontal logo:

5. On post (not homepage):

[kienstra]

It's nice how this replaces the width and height of the Custom Logo.