vip-go-mu-plugins
vip-go-mu-plugins copied to clipboard
SrcSet Implementation will utilize legacy custom sizes that do not exist.
Issue Raised in #87804-z
Some Images may have intermediate sizes in their meta data
| post_id | meta_key | meta_value |
+---------+-------------------------+-------------------------------------------------------------+
| 64797 | _wp_attached_file | 2018/03/filename.jpg |
| 64797 | _wp_attachment_metadata | {"width":1081,"height":1081,"file":"2018\/03\/ |
| | | fillename.jpg","sizes":{"thumbnail":{"file":"filename-15 |
| | | 0x150.jpg","width":150,"height":150,"mime-type":"image\/jpe |
| | | g"},"medium":{"file":" |
| | | filename-300x300.jpg","width":300,"height":300,"mime-type" |
| | | :"image\/jpeg"},"medium_large":{"file":"filename-768x768.jpg","width":768,"heigh |
| | | t":768,"mime-type":"image\/jpeg"},"large":{"file":" |
| | | filename-1024x1024.jpg","widt |
| | | h":1024,"height":1024,"mime-type":"image\/jpeg"}},"image_me |
| | | ta":{"aperture":"9","credit":"","camera":"Canon EOS 5DS R", |
| | | "caption":"","created_timestamp":"1520330017","copyright":" |
| | | ","focal_length":"70","iso":"160","shutter_speed":"0.008"," |
| | | title":"","orientation":"1","keywords":[]}} |
| 64797 | _edit_lock | 1547145880:389 |
+---------+-------------------------+-------------------------------------------------------------+
If they do when filters execute for srcset it will use the values from the metadata vs generating a valid url for the intermediate size.
@mikeyarce tracked down the logic to the following but it needs further review/investigation to ensure no unexpected impact.
function a8c_files_maybe_inject_image_sizes( $data, $attachment_id ) {
$sizes_already_exist = (
true === is_array( $data )
&& true === array_key_exists( 'sizes', $data )
&& true === is_array( $data['sizes'] )
&& false === empty( $data['sizes'] )
);
if ( $sizes_already_exist && ! defined( 'WPCOM_VIP_USE_JETPACK_PHOTON' ) && false === WPCOM_VIP_USE_JETPACK_PHOTON) {
return $data;
}
Client has been provided the following snippet to remove the metadata sizes.
add_filter( 'wp_get_attachment_metadata', function ( $data, $post_id ) {
if ( isset( $data['sizes'] ) ) {
$data['sizes'] = array();
}
return $data;
}, 10, 2 );
Thanks @mdbitz !
Previously, (before our srcset implementation), if Photon was enabled, an image would appear like this:
https://mikey.go-vip.co/wp-content/uploads/2011/07/dcp_2082.jpg?resize=525%2C350
If we turn Photon off, and enable srcset:
<img class="size-full wp-image-757" src="https://mikey.go-vip.co/wp-content/uploads/2011/07/dcp_2082.jpg" alt="Boardwalk" width="525" height="350" srcset="https://mikey.go-vip.co/wp-content/uploads/2011/07/dcp_2082.jpg 1600w, https://mikey.go-vip.co/wp-content/uploads/2011/07/dcp_2082.jpg?resize=300,200 300w, https://mikey.go-vip.co/wp-content/uploads/2011/07/dcp_2082.jpg?resize=768,512 768w, https://mikey.go-vip.co/wp-content/uploads/2011/07/dcp_2082.jpg?resize=1024,682 1024w" sizes="(max-width: 525px) 100vw, 525px">
If we turn Photon ON and enable srcset:
<img class="size-full wp-image-757" src="https://mikey.go-vip.co/wp-content/uploads/2011/07/dcp_2082.jpg?resize=525%2C350" alt="Boardwalk" width="524" height="350" srcset="https://mikey.go-vip.co/wp-content/uploads/2011/07/dcp_2082.jpg?resize=525%2C350?w=1600 1600w, https://mikey.go-vip.co/wp-content/uploads/2011/07/dcp_2082.jpg?resize=525%2C350?w=300 300w, https://mikey.go-vip.co/wp-content/uploads/2011/07/dcp_2082.jpg?resize=525%2C350?w=768 768w, https://mikey.go-vip.co/wp-content/uploads/2011/07/dcp_2082.jpg?resize=525%2C350?w=1024 1024w" sizes="(max-width: 525px) 100vw, 525px">
Here we see that both resize and w are sent, but only resize is valid so it ignores the width: resize=525%2C350?w=1024.
Now, if the image has legacy intermediate image data, that's where the problem can happen, because now we're not removing those legacy intermediate images, we're keeping them!
Here's an example of an image with legacy attachment metadata:
<img src="https://domain.go-vip.co/press/wp-content/uploads/sites/4/2018/03/filename-768x768.jpg" alt="Greg Greeley">
I think the solution here would be to remove this check here, but I'm not sure what potential things that might break? https://github.com/Automattic/vip-go-mu-plugins/blob/master/a8c-files.php#L102
Should we instead change the logic in a8c_files_maybe_inject_image_sizes?
Related: https://github.com/Automattic/jetpack/issues/7291
This issue has been marked stale because it has been open for 60 days with no activity. If there is no activity within 7 days, it will be closed.
This is an automation to keep issues manageable and actionable and is not a comment on the quality of this issue nor on the work done so far. Closed issues are still valuable to the project and are available to be searched.