Selected widths larger than largest available size (CKE Media Resize Extra Large) should fall back to the largest size rather than Default width [#3409595]

Problem/Motivation

When a user drags the resize handles to a width larger than the greatest available view mode (CKE Media Resize Extra Large in standard cases, or 1200px) the image is rendered using the Default view mode width (480px). It feels like anything wider than the largest size should fall back instead to the closest value, not the default).

Steps to reproduce

1. Add a media library image to a content area.
2. Set the size using the resize drag handles to a value larger than the largest available mode (in this example 1300px width).
3. Save the node.
4. Note that when viewing the node the rendered width is the Default width (in my case 480px), not the chosen width (1300px) or the largest available width (1200px)

Proposed resolution

Either constrain the width setting to the largest available width or let rendering fall back to that largest width.

Remaining tasks

User interface changes

API changes

Data model changes

Comment	File	Size	Author
#8	ckeditor_media_resize-3409595-8.patch	617 bytes	ludo.r

Issue fork ckeditor_media_resize-3409595

Show commands

Start within a Git clone of the project using the version control instructions.

Add & fetch this issue fork’s repository

Or, if you do not have SSH keys set up on git.drupalcode.org:

Add & fetch this issue fork’s repository

3409595-default-size changes, plain diff MR !28
Check out this branch for the first time

Check out existing branch, if you already have it locally

About issue forks

Comments

Comment #1

18 December 2023 at 22:30

codebaboon created an issue. See original summary.

Comment #2

damienmckenna

TN, USA

commented 21 December 2023 at 12:14

Version:	1.0.0-beta1	» 1.0.x-dev
Component:	Code	» User interface

I think this should work with the image styles - you pick a style to use, then you can resize it to fit.

Comment #3

codebaboon commented 21 December 2023 at 17:50

Thank you for the response, Damien. I'm not quite clear on what you mean by "pick a style to use, then you resize it to fit", where can the user pick a style from?

In looking at this from a user perspective, as far as I can tell the user is presented with an interface where they select the image and are given drag handles to resize to seemingly 'infinite' size. If they expand the dimensions beyond the max style width, which is not something displayed to them, the image editor shows the image expanding as expected, however upon saving the rendered page ends up adjusting the size to the "default" style width. They then either assume the resize did not work at all or they need to play a bit of a guessing game saving in smaller sizes until they find one that is below the unknown-to-them max.

I'm not sure on the technical difficulties in doing so, but in my head in an ideal world the largest available style would be rendered.

I suppose a workaround might be for us to set the Default style to our widest one, but that feels like it will more often than not be an inappropriate default selection.

Comment #4

sunflower36002 commented 12 January 2024 at 14:07

When resizing images in the content area, it seems the fallback to the default width (480px) instead of the chosen or the largest available width is a glitch; proposing a fix to either constrain the width to the largest available or allow rendering to fall back to that width would enhance the user experience in this "game" of image manipulation.