Multiple image upload breaks image dimensions

Created on 5 January 2016, almost 9 years ago

Updated 14 February 2023, almost 2 years ago

Problem/Motivation

Displaying images that were uploaded at the same time (selecting mulitple images) are broken. The height/width from the first image are applied to all images.

Workaround

Use Image Field Repair → module to restore corrupted images and to fix core bug (since 8.x-1.2 release).

How to reproduce

Create a content type with an image field, cardinality unlimited.
Be sure that the images are displayed as "original image" (no image style)
Create a content and upload multiple image at the same time (click on the upload button, and select more that one image from the dialog that pops up. Images must have differents sizes and be smaller than the screen so they are not resized by CSS max-width.)
Save

The width/height attributes on the image tag are the same (those of the first image), even if the images we uploaded does not have the same dimensions.

Why this happens

When you overload an ImageWidget with multiple files selected at once from the remote client, the form system needs first of all to transform the single widget with n files to n widgets with one file each. This is managed by the methods ::massageFormValues and ::submit. Before transforming, the widget process stores the dimensions of the first image in two hidden fields of the initial widget. The transformation is done by adding multiple widgets in the form array, copying them from the first widget. Now that's the gotcha. The transformation is managed within the FileWidget code, that ImageWidget inherits from - and FileWidget has no code to deal with image dimensions. So the additional widgets are copied with the same hidden fields values of the first file.

Proposed resolution

Implement ::massageFormValues and ::submit methods in ImageWidget, taking from the parent FileWidget class , and changing them to ensure that image width and image height values do not carry over from the initial widget to its copies.