Drupal 9 bug - Image are stretched

Dear colleagues,

Here is a bug I noticed since the Drupal 9 migration.

Summary

Some images are stretched (within text component) appear stretched when the published. It didn’t appear before and came after the Drupal 9 migration.

Steps to reproduce

Happens for text component in landing pages: Newsletter | AIDAinnova
Happens for text comment in articles: First beam tests for highly granular dual-readout calorimeter prototype | AIDAinnova

Possible fixes

I have reuploaded the picture, no effect.
I have cleared the cache, no effect
I see some components (that were in “Collaborate with maintainers” and that you told us not to worry about) haven’t been properly installed, maybe it’s this.

Related issues

(mention related issues and why they are related. If any, don’t forget to also add it in the related issues field.)

Attachments

I attach a picture of the wrong display and another one of the missing modules.

Best regards,
Antoine

Processing: Missing modules.png…

Hi Antonie

Thanks for flagging this; we have not had something like this reported before.

Checking the images in question, both are extremely large or with odd dimensions (e.g. the one at https://aidainnova.web.cern.ch/first-beam-tests-highly-granular-dual-readout-calorimeter-prototype is 4160 x 3120, and the one at https://aidainnova.web.cern.ch/newsletter is 1499 x 428). I reckon what you are seeing is a result of Drupal trying to display the image best possible within the constraints of your components. This would also have been the case for Drupal 8, suggesting something else is amiss.

Have you had any CSS for this before?

The only module you needed not worry about under the COLLABORATE WITH MAINTAINERS section would have been the Webform module which we now handle centrally. If you had other modules listed here, you would have needed to take some form of action: Update, remove, or replace. Do you recall which modules you saw under this section? Please note that since your website is on Drupal 9, checking the Upgrade Status report now shows progress for Drupal 10.

Thanks!

Hi Joachim,

Thanks a lot - it was indeed the images being too large. I have resized them and it works now.

For CSS, I don’t think so. I inherited the website like this (and it wasn’t done with “easy start” so most of the basic content (landing page, article, etc.) are clunky.

For the modules under “COLLABORATE WITH MAINTAINERS”, I see them in “Status Report” (/admin/reports/status), these are:

  • webform_analysis
  • webform_invitation
  • webform_node_analysis
    Since they are connected to Webform module I thought it was also not to worry about.

Best,
Antoine

Hi Antoine

We have identified the issue: https://api.drupal.org/api/drupal/core%21lib%21Drupal%21Core%21Image%21Image.php/function/Image%3A%3Aresize/9.2.x was introduced as part of Drupal 9.2.x, and is causing the stretching you are seeing now. We will apply patches to our CERN themes to avoid this happening. Once done, updates will be pushed centrally. No further action is necesarry from you on this one.

In regards to the modules, please be advised that we only support the Webform module (not any extensions or related modules). As such, if you absolutely require the functionality from these modules, you will either have to adopt the module(s) in question or find alternative ones. However, we are keenly aware that many websites utilise the Webform module alongside addon modules. We are looking into what we can feasibly done in the longer-term.

Thanks!

1 Like

Hi Joachim, I’m having the same stretched images issue as Antoine on cylindricalonion.web.cern.ch.
Do you know when the fix will be pushed? which version of Drupal will have the fix? 9.3.x?

Thanks!

Hi Achille

Thanks for reaching out!

This is not something which is included in the Drupal distribution, but rather something which we will distribute centrally in the next update CERN-wide. No action is necessary from you, though if you want to avoid images being stretched until then, you can manually specify width and height tags on your content. This way, Drupal will not overwrite anything with default values.

We appreciate your continued patience!

Thanks!