[wp-trac] [WordPress Trac] #21819: Use an image size for custom headers instead of duplicating an attachment

[WordPress Trac]

#21819: Use an image size for custom headers instead of duplicating an attachment
-------------------------+-----------------------
 Reporter:  koopersmith  |       Owner:
     Type:  enhancement  |      Status:  assigned
 Priority:  normal       |   Milestone:  4.7.4
Component:  Customize    |     Version:  3.5
 Severity:  normal       |  Resolution:
 Keywords:  needs-patch  |     Focuses:
-------------------------+-----------------------

Comment (by joemcgill):

 @westonruter happy to elaborate, apologies for the quick reply and run
 earlier.

 There are two closely related issues related to responsive image support
 that concern me about how this is implemented.

 First, when someone displays an image, we add responsive image support in
 `wp_calculate_image_srcset()` by looping through all intermediate sizes in
 the attachment metadata array and including any image that matches the
 aspect ratio of our `src` image, as long as it was created during the same
 edit as the `src` file (by searching for the existence of an edit hash).
 So imagine you upload a file to a blog post and WordPress creates a
 150x150 thumbnail cropped from the middle. Later, you decide you want to
 make this image your custom logo, but want to crop it from top at 400x400.
 Unless WP knows that these are from different edits when calculating
 `srcset` attributes, both could end up being selected, which could mean
 different crops for the same image depending on your screen size and/or
 display density. Gross. In short, we need a way to make sure custom crops
 are treated as a separate edit from preexisting intermediate sizes.

 Second, to make sure we include responsive image support for custom logos,
 it would be nice to generate additional intermediate sizes that relate to
 the crop being made for the logo. So for instance, if the original image
 is 2000x1200 and the custom crop is square, it would be nice to generate a
 series of intermediate sizes that were 1200x1200, 900x900, 450x450, and
 200x200 (for example). I'm not sure how we decide what these sizes should
 be at this point, or if we should just use the registered intermediate
 sizes.

 The couple ideas I have for this off the top of my head would be to extend
 the `sizes` property in attachment meta so that each named size could
 include a sub-array of sizes. Like:

 {{{
 'sizes' => [
     'thumbnail' => [
         'file' => 'path-to-thumb.jpg',
         'width' => 150,
         'height' => 150,
     ],
     'medium' => [
         'file' => 'path-to-medium.jpg',
         'width' => 300,
         'height' => 250,
     ],
     'custom_logo' => [
         'small' => [
             'file' => 'path-to-small-logo.jpg',
             'width' => 200,
             'height' => 200,
         ],
         'medium' => [
             'file' => 'path-to-medium-logo.jpg',
             'width' => 400,
             'height' => 400,
         ],
     ],
 ]
 }}}

 Alternately, we could add a new property like `alternate_sizes` which
 contain sets of edited versions of an attachment.

 {{{
 'sizes' => [
     'thumbnail' => [
         'file' => 'path-to-thumb.jpg',
         'width' => 150,
         'height' => 150,
     ],
     'medium' => [
         'file' => 'path-to-medium.jpg',
         'width' => 300,
         'height' => 250,
     ],
 ],
 'alternate_sizes' => [
     'custom_logo' => [
         'small' => [
             'file' => 'path-to-small-logo.jpg',
             'width' => 200,
             'height' => 200,
         ],
         'medium' => [
             'file' => 'path-to-medium-crop.jpg',
             'width' => 400,
             'height' => 400,
         ],
     ],
     'custom_header' => [
         'small' => [
             'file' => 'path-to-small-header.jpg',
             'width' => 600,
             'height' => 200,
         ],
         'medium' => [
             'file' => 'path-to-medium-header.jpg',
             'width' => 1200,
             'height' => 400,
         ],
     ],
 ]
 }}}

 Last idea (and probably the most straightforward) is to create a new
 attachment for custom logo/header crops, like we're currently doing, and
 set the post parent to the original attachment to keep the association. To
 keep from having duplicate images in the media library, we might be able
 to set some metadata on the parent attachment, which indicates that the
 file should be hidden from the media library if the file was uploaded from
 one of these upload and crop controls.

 Hope this is helpful.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/21819#comment:16>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform