WordPress.org

Make WordPress Core

Opened 4 months ago

Closed 4 months ago

Last modified 4 months ago

#38847 closed defect (bug) (fixed)

Twenty Seventeen: Header Image used is smaller than 2000x1200px

Reported by: transl8or Owned by: joemcgill
Milestone: 4.7 Priority: normal
Severity: normal Version: 4.7
Component: Bundled Theme Keywords: has-patch
Focuses: ui Cc:

Description

This is also reported in the Alpha/Beta Forum and I could reproduce it on my localhost:

  • Went to Customize > Header Media > Header Image + Add new image
  • Uploaded a 2,5 MB image with 3840x2160 px
  • Cropped the image (no adjustment of the suggested frame)
  • The file that is than used as header image is 768x461 px (37 kB) and stretched. Slightly blurry.

But the image is availabe with 2000x1200 px in the upload folder.
When I use this from the media library as featured image for a post, the bigger 2000x1220 px picture (170kb) is used there, and not the smaller one, like the header does.

Going to the Customizer and choosing another already uploaded image as header image with 2000x1200 px and not cropping it, does also use the 768x461 px file variant as header image.

Attachments (2)

38847.diff (1.1 KB) - added by joemcgill 4 months ago.
38847.2.patch (1.1 KB) - added by davidakennedy 4 months ago.
Updates @since block.

Download all attachments as: .zip

Change History (6)

@joemcgill
4 months ago

#1 @joemcgill
4 months ago

  • Keywords has-patch added
  • Milestone changed from Awaiting Review to 4.7
  • Owner set to joemcgill
  • Status changed from new to accepted

Hi @transl8or – thanks for the report!

This looks to be an issue of the sizes attribute being calculated incorrectly, resulting in the browser downloading the wrong resource. 38847.diff adds a filter to the markup generated by get_header_image_tag() to correct this problem.

Before the filter, the img contained:
sizes="(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px"

And after:
sizes="100vw"

#2 @davidakennedy
4 months ago

Thanks for the report @transl8or! Great catch!

Thanks for the patch @joemcgill. The:

@since 4.7.0

should be:

@since Twenty Seventeen 1.0

Otherwise, it looks good.

@davidakennedy
4 months ago

Updates @since block.

#3 @davidakennedy
4 months ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In 39291:

Twenty Seventeen: Ensure the use of proper image size for custom header image

The sizes attribute was calculated incorrectly, resulting in the browser downloading the wrong resource. This filters the attribute to correct that.

Before the filter, the img contained:
sizes="(max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px"

And after:
sizes="100vw"

Props joemcgill, transl8or.

Fixes #38847.

#4 @helen
4 months ago

In 39317:

Twenty Seventeen: Avoid an undefined index notice after [39291].

props westonruter.
see #38847.

Note: See TracTickets for help on using tickets.