Unable to change resize after initial save

Thanks for reporting this smustgrave. It was something that I was aware of when adding the image style support to the module, but I wasn't sure what would make more sense, to have image styles also applied inside the editor or not. But not now that you filed this issue, it's more clear. If you get a moment, I'd appreciate if you could review if it works now as you think it should with the code in the MR.

Hi,

The issue still remains after applied that MR.
The issue is drupal-media element is not getting updated with the resized width whenever any image media is resized from second time onwards (Whenever the media added for first the drupal-media element is got updated, Once the node saved and again opened for editing then it started mis behaving).

@Santhoshkumar I can't replicate this in Chrome. Also what you describe is not really related to the description in the IS, it actually sounds more like what is reported in 🐛 Image & width not reflecting on frontend when resize the media image on second or more times Fixed .

Can you please post a screencast with all the steps you are doing from the beginning there?

Hi,

Added all the steps with screencast. please refer - https://www.drupal.org/project/ckeditor_media_resize/issues/3376990#comment-15192351 🐛 Image & width not reflecting on frontend when resize the media image on second or more times Fixed

Pushed a fix for this to 1.0.x, feel free to re-open if it's not working.

Sorry for the delay.

I retested
I selected a view mode
Resized
It saved without issue

Edit the page by selecting Original
Saving it does not reset back but keeps the resize.

Just ran into this too.

The bug isn't limited to the option to reset the image to its original size, it stops you from resizing the image at all. When you change the resize handles it doesn't adjust the height, only the width, but only the handles change their position, the image itself does not change.

Thanks for re-testing. The reverting to original when using view modes should now work with the changes I pushed in the new MR. Please have a look @smustgrave @DamienMcKenna .

I should mention that if you use the core plugin's view mode option, the media rendered inside the content (not inside the editor) will be rendered using the dynamic image styles if the Enable this to dynamically scale resized images using image styles.
of the resize plugin is active. IMO this is ok, as users who want to work with core's view mode option should turn off that setting of the resize plugin.

When you change the resize handles it doesn't adjust the height, only the width

I presume this is a general remark? The resizing for media, just as the one for uploaded images with core's imageresize plugin, are only proportional, means height can only be changed in combination with the width. Or how should I understand this @DamienMcKenna?

but only the handles change their position, the image itself does not change.

At this point there's no ajax logic which would re-fetch the image and resize it dynamically when using the handles. So yes, the image source does not change inside the editor, the resize inside the editor is just applied via an inline style on the <drupal-media> element for now. Once a resize is saved, the view mode and image style of the image in the rendered content changes if the Enable this to dynamically scale resized images using image styles option is enabled.

With the new merge request, when viewing a node that uses the filter it results in the following error:
TypeError: Drupal\ckeditor_media_resize\Plugin\Filter\FilterResizeMedia::getViewModeByWidth(): Return value must be of type string, null returned in Drupal\ckeditor_media_resize\Plugin\Filter\FilterResizeMedia->getViewModeByWidth() (line 152 of modules/contrib/ckeditor_media_resize/src/Plugin/Filter/FilterResizeMedia.php).

When you change the resize handles it doesn't adjust the height, only the width

I presume this is a general remark?

No, it's very specific to this functionality.

The first time you add a media item to a WYSIWYG field the editor's height scales as the image is adjusted, as expected.

However, after you save and then re-edit the node, when you try to resize the media item, the editor's height does not scale, instead it just adjusts the width of the grab area:

With the new merge request, when viewing a node that uses the filter it results in the following error:

I cannot replicate this. Could it be that it happened after you tweaked the view mode configurations when trying something for 📌 Make list of image styles editable Active ? If that's not the case, could you please provide detailed steps to replicate or even better a screencast with the full process incl. configuration of the text format?

I pushed some code to skip applying of a view mode/image style in case no style can be determined.

However, after you save and then re-edit the node, when you try to resize the media item, the editor's height does not scale, instead it just adjusts the width of the grab area:

Does this still happen with the code from the MR? Seems to work fine on my end with that code, see attached screencast.

However, after you save and then re-edit the node, when you try to resize the media item, the editor's height does not scale, instead it just adjusts the width of the grab area:

On another site, I eventually ran into this too with the code from 1.0.x. Checking out the branch in MR4 fixed it for me.

I tried the latest changes on mr4 and it did fix the problem of not being able to load the node.

I'm still seeing the problem with not being able to resize images after saving the node.

Also, I'm not able to get the resize to take effect when the node is displayed, it just shows the original image.

I've attached the editor.editor.full_html.yml and filter.format.full_html.yml as configured on the site.

The MR4 fixed this issue. Thanks.

I happened to reload my local install of the site that I was testing this with, and it worked beautifully - with the latest changes in MR4 it was possible resize images that had been added in a previous save, and clicking the "original" size option worked as expected.

BTW I noticed that the "Limit allowed HTML tags and correct faulty HTML" filter needs to run before the "Resize media images" filter.

I take it back - it's *almost* working perfectly. The editorial UI is working correctly, but the image displays in its original size after saving.

FWIW here's the list of filters that run on the text format:

• Limit allowed HTML tags and correct faulty HTML
• Resize media images
• Embed media
• Align images
• Caption images
• Track images uploaded via a Text Editor

This is my example text:

<p>
    Something something&nbsp;
</p>
<drupal-media class="image_resized" style="width:152px;" data-media-width="152px" data-entity-type="media" data-entity-uuid="875c4777-85a0-4253-a436-fdb230482c20" data-align="right">&nbsp;</drupal-media>

This results in the following HTML:

<p>Something something&nbsp;</p>
<div style="width:152px;" class="align-right">
  
  
  <div class="field field--name-field-media-image field--type-image field--label-visually_hidden">
    <div class="field__label visually-hidden">Image</div>
              <div class="field__item">  <img loading="lazy" src="/sites/default/files/styles/large/public/2023-09/myimage.jpg?h=eaa70be9&amp;itok=7lVGkk-F" width="480" height="480" alt="Something"></div>
          </div>

</div>

It looks like this:

If I move "Limit allowed HTML tags" to the end of the list the image is not displayed at all:

If I move "Limit allowed HTML tags" to just after "Resize media images" the image is correctly right-aligned, but not resized:

Any thoughts?

Never mind, I changed the site from using the custom theme to using the default Olivero theme and it now displays correctly:

So clearly there's something wrong with our theme.

Thanks for the extensive testing and reporting everybody, merged this now and closing this.

Automatically closed - issue fixed for 2 weeks with no activity.

@DamienMcKenna, I seem to have an issue with my custom theme as well, do you happen to have fixed yours? Can you share what the fix was?

My current issue is:

image-style-configuration-definition-invalid 
Object { dropdown: {…} }
​
dropdown: Object { name: "drupalMedia:viewMode", display: "listDropdown", defaultItem: "drupalElementStyle:viewMode:default", … }
​
<prototype>: Object { … }
 
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-image-style-configuration-definition-invalid

Actually, if it only works with Olivero as a front-end theme (which I can reproduce), it means that something is missing in the module, doesn't it? (considering we are working on a back-office page, why does the front-office current theme plays a role? Could there be a library-extend missing from the module?)

Ok, I think I found it...

It comes from the following code:

.drupal-media.ck-widget_with-resizer .media {
  width: 100% !important;
}

Olivero theme adds the "media" class in the media.html.twig, but we did not have it in our custom theme. I don't know if it's a bug or not, considering "starterkit-theme" adds the "media" class, we may consider this is the recommend way to start a theme in Drupal 10, and expect people to have that class, but it should at least be documented or adjusted, don't you think?

Actually, I still have the bug where the second resize is not saved (style & data-width values are not updated if I looked at the source).

Please open a new issue for this. Thank you.