Images not appearing correctly in a cloned gallery

bobbingwide commented 1 year ago

When I wrote https://s.b/hm/rip-marmalade/ I created two galleries of images. The first used images that were already in the site. The gallery after the From my archive heading were images loaded by drag and drop directly from my Windows 11 Photos App. In the cloned post ( https://herbmiller.me/rip-marmalade/ ) some of these images were broken.

The broken images were those which had either been rotated or scaled.

Original image

<!-- wp:image {"id":23468,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://s.b/hm/wp-content/uploads/2023/05/IMG_2349-1024x1024.jpg" alt="" class="wp-image-23468"/></figure>
<!-- /wp:image -->

was cloned as

<!-- wp:image {"id":23468,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://herbmiller.me/wp-content/uploads/2023/05/IMG_2349-1024x1024.jpg" alt="" class="wp-image-23468"/></figure>
<!-- /wp:image -->

but needed to be

<!-- wp:image {"id":21283,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://herbmiller.me/wp-content/uploads/2023/05/IMG_2349-rotated-1-1024x1024.jpg" alt="" class="wp-image-21283"/></figure>
<!-- /wp:image -->

bobbingwide commented 1 year ago

In the example the original image had been rotated.

The file name used in the image block in the gallery block is https://s.b/hm/wp-content/uploads/2023/05/IMG_2349-1024x1024.jpg

Which image is used for context menu choices?

When the post is displayed the image tag is expanded by WordPress to

<img decoding="async" loading="lazy" width="1024" height="1024" data-id="23468" 
src="https://s.b/hm/wp-content/uploads/2023/05/IMG_2349-1024x1024.jpg" 
alt="" class="wp-image-23468" 
srcset="https://s.b/hm/wp-content/uploads/2023/05/IMG_2349-1024x1024.jpg 1024w, 
https://s.b/hm/wp-content/uploads/2023/05/IMG_2349-300x300.jpg 300w, 
https://s.b/hm/wp-content/uploads/2023/05/IMG_2349-768x768.jpg 768w, 
https://s.b/hm/wp-content/uploads/2023/05/IMG_2349-1536x1536.jpg 1536w, 
https://s.b/hm/wp-content/uploads/2023/05/IMG_2349-2048x2048.jpg 2048w" 
sizes="(max-width: 1024px) 100vw, 1024px">

When you use the context menu to see the image / image URL you get the one chosen by the browser.

Chrome gives me the 1536x1536 one
Firefox, with a slightly different context menu, gives me the 1024x1024 one
Microsoft Edge also uses the 1024x1024 one

bobbingwide commented 1 year ago

Explanation of the probem?

Post meta for the attachment is:

s.b/hm 23468 _wp_attached_file: 2023/05/IMG_2349-rotated-1.jpg _wp_attachment_metadata

a:7:{s:5:"width";i:2448;s:6:"height";i:2448;s:4:"file";s:28:"2023/05/IMG_2349-rotated.jpg";s:8:"filesize";i:819219;s:5:"sizes";a:6:{s:6:"medium";a:5:{s:4:"file";s:20:"IMG_2349-300x300.jpg";s:5:"width";i:300;s:6:"height";i:300;s:9:"mime-type";s:10:"image/jpeg";s:8:"filesize";i:14983;}s:5:"large";a:5:{s:4:"file";s:22:"IMG_2349-1024x1024.jpg";s:5:"width";i:1024;s:6:"height";i:1024;s:9:"mime-type";s:10:"image/jpeg";s:8:"filesize";i:146703;}s:9:"thumbnail";a:5:{s:4:"file";s:20:"IMG_2349-300x300.jpg";s:5:"width";i:300;s:6:"height";i:300;s:9:"mime-type";s:10:"image/jpeg";s:8:"filesize";i:14983;}s:12:"medium_large";a:5:{s:4:"file";s:20:"IMG_2349-768x768.jpg";s:5:"width";i:768;s:6:"height";i:768;s:9:"mime-type";s:10:"image/jpeg";s:8:"filesize";i:83348;}s:9:"1536x1536";a:5:{s:4:"file";s:22:"IMG_2349-1536x1536.jpg";s:5:"width";i:1536;s:6:"height";i:1536;s:9:"mime-type";s:10:"image/jpeg";s:8:"filesize";i:317600;}s:9:"2048x2048";a:5:{s:4:"file";s:22:"IMG_2349-2048x2048.jpg";s:5:"width";i:2048;s:6:"height";i:2048;s:9:"mime-type";s:10:"image/jpeg";s:8:"filesize";i:525638;}}s:10:"image_meta";a:12:{s:8:"aperture";s:3:"2.4";s:6:"credit";s:0:"";s:6:"camera";s:9:"iPhone 4S";s:7:"caption";s:0:"";s:17:"created_timestamp";s:10:"1442085068";s:9:"copyright";s:0:"";s:12:"focal_length";s:4:"4.28";s:3:"iso";s:3:"800";s:13:"shutter_speed";s:17:"0.066666666666667";s:5:"title";s:0:"";s:11:"orientation";i:1;s:8:"keywords";a:0:{}}s:14:"original_image";s:12:"IMG_2349.jpg";}

herbmiller.me 21283 _wp_attached_file: 2023/05/IMG_2349-rotated-1.jpg _wp_attachment_metadata has been rebuilt based on the uploaded file which was the rotated version.

The clone is not aware of this. There's no reference to the original image.

Workaround

Always edit an image to be uploaded to avoid it being scaled or rotated automatically by WordPress.

Solution?

TBD

bobbingwide / oik-clone