Unable to edit media image with manual crop

Also, if I go to media and try to edit an image, I get this error

The website encountered an unexpected error. Try again later.

Error: Cannot use object of type Drupal\Core\StringTranslation\TranslatableMarkup as array in media_contextual_crop_iwc_adapter_widget_after_build() (line 68 of modules/contrib/media_contextual_crop_iwc_adapter/media_contextual_crop_iwc_adapter.module).

call_user_func_array() (Line: 1084)
Drupal\Core\Form\FormBuilder->doBuildForm() (Line: 1076)
Drupal\Core\Form\FormBuilder->doBuildForm() (Line: 1076)
Drupal\Core\Form\FormBuilder->doBuildForm() (Line: 579)
Drupal\Core\Form\FormBuilder->processForm() (Line: 325)
Drupal\Core\Form\FormBuilder->buildForm() (Line: 73)
Drupal\Core\Controller\FormController->getContentResult() (Line: 39)
Drupal\layout_builder\Controller\LayoutBuilderHtmlEntityFormController->getContentResult()
call_user_func_array() (Line: 123)
Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->Drupal\Core\EventSubscriber\{closure}() (Line: 627)
Drupal\Core\Render\Renderer->executeInRenderContext() (Line: 124)
Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->wrapControllerExecutionInRenderContext() (Line: 97)
Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->Drupal\Core\EventSubscriber\{closure}() (Line: 181)
Symfony\Component\HttpKernel\HttpKernel->handleRaw() (Line: 76)
Symfony\Component\HttpKernel\HttpKernel->handle() (Line: 58)
Drupal\Core\StackMiddleware\Session->handle() (Line: 48)
Drupal\Core\StackMiddleware\KernelPreHandle->handle() (Line: 28)
Drupal\Core\StackMiddleware\ContentLength->handle() (Line: 106)
Drupal\page_cache\StackMiddleware\PageCache->pass() (Line: 85)
Drupal\page_cache\StackMiddleware\PageCache->handle() (Line: 50)
Drupal\ban\BanMiddleware->handle() (Line: 48)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle() (Line: 51)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle() (Line: 36)
Drupal\Core\StackMiddleware\AjaxPageState->handle() (Line: 51)
Drupal\Core\StackMiddleware\StackedHttpKernel->handle() (Line: 704)
Drupal\Core\DrupalKernel->handle() (Line: 19)

I have just updated Drupal 10.2.3 and now I don't get error in the node edit page when I click the edit button, but I don't get an option to change the crop. I only get to select or upload images.
If I go to /admin/content/media , I keep getting the error that I posted in #2

Hi,

(I have almost finish the site migration!!!)

Great news !

To be honest, I haven't done any testing about translation, just assuming all module do it correctly...

Just a few check question (classical switch-off-and-on ) :
- In the node are you sure using a "Media with contextual modifications" field for media reference (instead of an entity reference)
- In the media image, are you sure using the "ImageWidget Crop" widget for the image field, and set the corrects CROPs (how many)
- Can you details the version of CROP and Image widget crop module (I assume you use the latest sable release for "media_contextual_crop" collection)
- if you using a multilanguage site : did you activate translation on the content ? on the media ?
- did you have the error when creating a new media from a new image ? (from the node, or from media lib)

Thanks!
Your questions:
- In the node are you sure using a "Media with contextual modifications" field for media reference (instead of an entity reference)
Yes. I learned it form you :)
- In the media image, are you sure using the "ImageWidget Crop" widget for the image field, and set the corrects CROPs (how many)
yes and one crop
- Can you details the version of CROP and Image widget crop module (I assume you use the latest sable release for "media_contextual_crop" collection)
crop : 8.x-2.3
image_widget_crop: 8.x-2.4
- if you using a multilanguage site : did you activate translation on the content ? on the media ?
Yes I have activated translation on the content. On the media also because for blind people the alt tag for images.
- did you have the error when creating a new media from a new image ? (from the node, or from media lib)
No, I don't get error on create, and I can crop the image. The error is when you edit.

And a last thing, in comment #4 I said: Drupal 10.2.3 and now I don't get error in the node edit page when I click the edit button. But after a while I got it again (I imagine that drush cr didn't clear all caches).

If you want, I can test anything (changing media translation or x)
Thanks again a lot!!!! :)

I'm pushing additional data type control.

Can you put some dsm in the media_contextual_crop_iwc_adapter_widget_after_build function, and send me results ?

for exemple (on dev version) :

function media_contextual_crop_iwc_adapter_widget_after_build($form, FormStateInterface $form_state) {

  $build_info = $form_state->getBuildInfo();
  $is_overriding_context = $build_info['form_id'] === 'override_entity_form';
=> dsm($build_info);
  foreach ($form as $delta => $elem) {

=> if(isset($elem['image_crop'])) {
=> dsm($elem['image_crop']);
=> }

    // Ensure working on the right stuff.
    if(isset($elem['image_crop']) && is_array($elem['image_crop'])) {

Do you want that I install de dev version?
Today I go to teach, but tomorrow morning I will be working on this.
Have a good day :)

I go for what you ask in #8

You can make these on the 2.0.2 version

I don't get any different message. I have changed theme just in case. I have put dpm and dump, to check, but nothing.
I have devel installed.
I tried to edit the field in the node and image media too and I keep with the same message.
I have to leave :)
All with the dev version that you just uploaded.

I have changed to English for my user and the same error. I put here just in case it helps.

Uncaught 
Object { message: "\nAn AJAX HTTP error occurred.\nHTTP Result Code: 500\nDebugging information follows.\nPath: /media/1502/edit\nStatusText: 500 Service unavailable (with message)\nResponseText: The website encountered an unexpected error. Try again later.Error: Cannot use object of type Drupal\\Core\\StringTranslation\\TranslatableMarkup as array in media_contextual_crop_iwc_adapter_widget_after_build() (line 68 of modules/contrib/media_contextual_crop_iwc_adapter/media_contextual_crop_iwc_adapter.module). call_user_func_array() (Line: 1084)\nDrupal\\Core\\Form\\FormBuilder->doBuildForm() (Line: 1076)\nDrupal\\Core\\Form\\FormBuilder->doBuildForm() (Line: 1076)\nDrupal\\Core\\Form\\FormBuilder->doBuildForm() (Line: 579)\nDrupal\\Core\\Form\\FormBuilder->processForm() (Line: 325)\nDrupal\\Core\\Form\\FormBuilder->buildForm() (Line: 73)\nDrupal\\Core\\Controller\\FormController->getContentResult() (Line: 39)\nDrupal\\layout_builder\\Controller\\LayoutBuilderHtmlEntityFormController->getContentResult()\ncall_user_func_array() (Line: 123)\nDrupal\\Core\\EventSubscriber\\EarlyRenderingControllerWrapperSubscriber->Drupal\\Core\\EventSubscriber\\{closure}() (Line: 627)\nDrupal\\Core\\Render\\Renderer->executeInRenderContext() (Line: 124)\nDrupal\\Core\\EventSubscriber\\EarlyRenderingControllerWrapperSubscriber->wrapControllerExecutionInRenderContext() (Line: 97)\nDrupal\\Core\\EventSubscriber\\EarlyRenderingControllerWrapperSubscriber->Drupal\\Core\\EventSubscriber\\{closure}() (Line: 181)\nSymfony\\Component\\HttpKernel\\HttpKernel->handleRaw() (Line: 76)\nSymfony\\Component\\HttpKernel\\HttpKernel->handle() (Line: 58)\nDrupal\\Core\\StackMiddleware\\Session->handle() (Line: 48)\nDrupal\\Core\\StackMiddleware\\KernelPreHandle->handle() (Line: 28)\nDrupal\\Core\\StackMiddleware\\ContentLength->handle() (Line: 106)\nDrupal\\page_cache\\StackMiddleware\\PageCache->pass() (Line: 85)\nDrupal\\page_cache\\StackMiddleware\\PageCache->handle() (Line: 50)\nDrupal\\ban\\BanMiddleware->handle() (Line: 48)\nDrupal\\Core\\StackMiddleware\\ReverseProxyMiddleware->handle() (Line: 51)\nDrupal\\Core\\StackMiddleware\\NegotiationMiddleware->handle() (Line: 36)\nDrupal\\Core\\StackMiddleware\\AjaxPageState->handle() (Line: 51)\nDrupal\\Core\\StackMiddleware\\StackedHttpKernel->handle() (Line: 704)\nDrupal\\Core\\DrupalKernel->handle() (Line: 19)\n", name: "AjaxError", stack: "@http://test.devel/core/misc/ajax.js?v=10.2.3:196:32\n@http://test.devel/core/misc/ajax.js?v=10.2.3:1916:3\n" }
ajax.js:196:32

I don't understand under what conditions $elem['image_crop'] can be a TranslatableMarkup object (line 68)

I can imagin that $elem['image_crop']['crop_reuse'] can be a TranslatableMarkup object, but in this case the error will be several line after...

Neither do I.
If you want I can upload the field configuration or any other.
Or I can install what you prefer to debug Ajax.
I don't want you to spend the weekend and next week we sure solve it.
I have another complicated task to solve, don't worry.
Merci beaucoup et bonne nuit :)

it's a custom back-office theme ?

I use Claro as administrative theme and Bootstrap as a front.
At this moment, I am using Stark 10.2.3 as a front with "Use the administration theme when editing or creating content" unchecked.

I have being debuggin a bit.

I had Edit Media Entity in Modal and uninstall it for not to have interference. No changes on the error.

dsm($build_info);
I get an array (if you want it, I have the html with the javascript to be able to look into it fast)
dsm(is_array($elem['image_crop'])); retuns false
dsm(isset($elem['image_crop'])); returns 11 false

So I went to the crop and translate it.
It has the tittle and the description.

Now I get

XHRPOST
http://test.devel/media/1502/edit?_wrapper_format=drupal_modal
[HTTP/1.1 500 500 Service unavailable (with message) 106ms]

And then

Uncaught

Object { message: "\nAn AJAX HTTP error occurred.\nHTTP Result Code: 500\nDebugging information follows.\nPath: /media/1502/edit\nStatusText: 500 Service unavailable (with message)\nResponseText: The website encountered an unexpected error. Try again later.Error: Cannot use object of type Drupal\\Core\\StringTranslation\\TranslatableMarkup as array in media_contextual_crop_iwc_adapter_widget_after_build() (line 66 of modules/contrib/media_contextual_crop_iwc_adapter/media_contextual_crop_iwc_adapter.module). call_user_func_array() (Line: 1084)\nDrupal\\Core\\Form\\FormBuilder->doBuildForm() (Line: 1076)\nDrupal\\Core\\Form\\FormBuilder->doBuildForm() (Line: 1076)\nDrupal\\Core\\Form\\FormBuilder->doBuildForm() (Line: 579)\nDrupal\\Core\\Form\\FormBuilder->processForm() (Line: 325)\nDrupal\\Core\\Form\\FormBuilder->buildForm() (Line: 73)\nDrupal\\Core\\Controller\\FormController->getContentResult() (Line: 39)\nDrupal\\layout_builder\\Controller\\LayoutBuilderHtmlEntityFormController->getContentResult()\ncall_user_func_array() (Line: 123)\nDrupal\\Core\\EventSubscriber\\EarlyRenderingControllerWrapperSubscriber->Drupal\\Core\\EventSubscriber\\{closure}() (Line: 627)\nDrupal\\Core\\Render\\Renderer->executeInRenderContext() (Line: 124)\nDrupal\\Core\\EventSubscriber\\EarlyRenderingControllerWrapperSubscriber->wrapControllerExecutionInRenderContext() (Line: 97)\nDrupal\\Core\\EventSubscriber\\EarlyRenderingControllerWrapperSubscriber->Drupal\\Core\\EventSubscriber\\{closure}() (Line: 181)\nSymfony\\Component\\HttpKernel\\HttpKernel->handleRaw() (Line: 76)\nSymfony\\Component\\HttpKernel\\HttpKernel->handle() (Line: 58)\nDrupal\\Core\\StackMiddleware\\Session->handle() (Line: 48)\nDrupal\\Core\\StackMiddleware\\KernelPreHandle->handle() (Line: 28)\nDrupal\\Core\\StackMiddleware\\ContentLength->handle() (Line: 106)\nDrupal\\page_cache\\StackMiddleware\\PageCache->pass() (Line: 85)\nDrupal\\page_cache\\StackMiddleware\\PageCache->handle() (Line: 50)\nDrupal\\ban\\BanMiddleware->handle() (Line: 48)\nDrupal\\Core\\StackMiddleware\\ReverseProxyMiddleware->handle() (Line: 51)\nDrupal\\Core\\StackMiddleware\\NegotiationMiddleware->handle() (Line: 36)\nDrupal\\Core\\StackMiddleware\\AjaxPageState->handle() (Line: 51)\nDrupal\\Core\\StackMiddleware\\StackedHttpKernel->handle() (Line: 704)\nDrupal\\Core\\DrupalKernel->handle() (Line: 19)\n", name: "AjaxError", stack: "@http://test.devel/core/misc/ajax.js?v=10.2.3:196:32\n@http://test.devel/core/misc/ajax.js?v=10.2.3:1916:3\n" }
ajax.js:196:32

For what I see, maybe to check if there is translation and if so, work with object?
Now I have to shop food.

we will try something else ...

Maybe I'm using too many hamers...

function media_contextual_crop_iwc_adapter_widget_after_build($form, FormStateInterface $form_state) {

  $build_info = $form_state->getBuildInfo();
  $is_overriding_context = $build_info['form_id'] === 'override_entity_form';
=> dsm($build_info['form_id']);
  foreach ($form as $delta => $elem) {

=> if(!is_array($elem)) {
=>   dsm('not array');
=>   dsm($elem);
=> }

    // Ensure working on the right stuff.
    if(isset($elem['image_crop']) && is_array($elem['image_crop'])) {

Bonjour,

With updating to the last version, I go to edit the media image in the node edit form and I get

"media_image_edit_form"

"not array"

1

"not array"

"details"

"not array"

true

"not array"

"file_widget_multiple"

"not array"

"Imatge"

"not array"

""

"not array"

"field_media_image"

"not array"

"ca"

"not array"

false

"not array"

Drupal\Core\StringTranslation\TranslatableMarkup {#2553 ▼
  #string: "Add a new file"
  #arguments: []
  #translatedMarkup: null
  #options: []
  #stringTranslation: Drupal\Core\StringTranslation\TranslationManager {#328 ▶}
}

I can expand the last one if you want, or copy here what you need or give to you in html with the javascript to be able to click on the buttons.

Do you want that I test with the last dev that you committed?

Bonjour :)

I have just tested the last dev version and I can edit in the node form and in the media image!!!

Almost there!
Because if I edit in the image media, and then edit the node form field, the crops override one to each other :O
In both forms I get: This crop definition affects non-overrided usages of this image
I think this should be in the media edit image, but in the node form I would imagine that you get your own crop, shouldn't it?

Merci :)

normally you should have a different message between the modal in the field and the media form

mmm then maybe I have something misconfigured.
In the node display form:
Media library extra. Multi edit form on create: true
No edit form on create: false
Check selected: true
Replace checkbox by order indicator: tru
In the media display form:
ImageWidget crop
Always expand crop area: Yes
Show default crop area: Yes
Warn the user if the crop is used more than once: Yes
Previsualitza l'estil d'imatge: large
Preview crop zone image style: Gran (480x480)
Crop Type used: noticia

I went tho the image media presentation and in local where I have updated your module, I get DEPRECATED Contextual Crop Image.
In the server that I have the previous version it has Contextual Crop Image...

Ok, it seems the "Previsualitza l'estil d'imatge"/"Preview image style" uses the "default" crop of the media, but the anomaly should only exist in the Back-office, the "front image" are croped are correct (can you confirm ?)

If you use a "no crop" style for this display, there should be no problem ?

If the issue are the "Preview image style" I'll create a "clean issue" for that.

Your questions:

Ok, it seems the "Previsualitza l'estil d'imatge"/"Preview image style" uses the "default" crop of the media, but the anomaly should only exist in the Back-office, the "front image" are croped are correct (can you confirm ?)
yes, the crop is applied.

If you use a "no crop" style for this display, there should be no problem ?
Where? I get lost with so many places to configure. I hope someone will make a module to configure all for one image XDD

If the issue are the "Preview image style" I'll create a "clean issue" for that.
No idea.

And... why I get DEPRECATED? in comment #24?

For #24 :
- because when I'm studying your issue, I have realized we don't need this formatter, so you can just use "native image" formater (in the media).

If you use a "no crop" style for this display, there should be no problem ?
Where? I get lost with so many places to configure. I hope someone will make a module to configure all for one image XDD

In the ImageWidgetCrop widget settings
For the "Previsualitza l'estil d'imatge"/"Preview image style", can you test a "no-crop" image style ("crop thumbnail" for exemple)

#24 XDDDD. you should tell to me!! DEPRECATED is a scary word for a site builder!
I have changed it already.
In the ImageWidgetCrop I have choosen No preview image style (I have now the interface in English)

After this changes, I have no preview (not needed) from the image, but I keep getting the general crop: This crop definition affects non-overrided usages of this image

The message "This crop definition affects non-overrided usages of this image" will be show when you edit the crop directly in the media (admin/content/media => /media/XX/edit )

When you "edit" (overwritten) the media from the reference field, you will have "This crop definition affects ONLY this contextual usage of this image"

if it's not the case, can you send me the value of $build_info['form_id'] in the media_contextual_crop_iwc_adapter_widget_after_build

In both, the node edit form and the image in media edit form:
$build_info['form_id'] = "media_image_edit_form"

dsm((isset($elem['image_crop']['crop_reuse']))) in both true

dsm(($is_overriding_context)); in both false

In both, the node edit form and the image in media edit form:
$build_info['form_id'] = "media_image_edit_form"

We have a anomaly here.

can send me a screen-shoot of the modal open in the node-form ?

I have also added a new image, just in case, and the same. Here the screen-shot

Where in the database is stored the $is_overriding_context for the node edit form? I can check if it is well writen.

can you tel me all version of all modules ? (media contextual crop, media_library_media_modify)

Can you describe the whole stack (fields, widget, formater) for the node and the media ?

The modal that is displayed here is not the expected one

And when it is saved? Since I changed from focal point to image widget crop, maybe it wasn't written?

This is not the correct modal that is opened when you "edit"/"overwritten" the media from the node reference field.

I have all the modules updated. Some are dev. From my package.json

"drupal/media_contextual_crop": "^2.0",
"drupal/media_contextual_crop_field_formatter": "^2.0",
"drupal/media_contextual_crop_fp_adapter": "^2.0",
"drupal/media_contextual_crop_iwc_adapter": "2.0.x-dev@dev",
"drupal/media_library_media_modify": "^1.0.0@beta",

fom my composer.lock:

"drupal/media_contextual_crop", "version": "2.0.6",
"drupal/media_contextual_crop_fp_adapter", "version": "2.0.0",
"drupal/media_contextual_crop_field_formatter", "version": "2.0.3",
"drupal/media_contextual_crop_iwc_adapter", "version": "dev-2.0.x",
"drupal/media_library_media_modify", "version": "1.0.0-beta15",

Can you describe the whole stack (fields, widget, formater) for the node and the media ?
any drush command so I can go faster? :)
If not I go one by one.

Sorry, I don't know

There is some mess somewhere but I do not find where

I have exported all my configuration.
What do you prefer, screen-shots or yml?

I have still installed focal point because I started to make the change to widget image crop but I got the error.
Do you want that I uninstall it? (I make a database backup for when we solve this)

If you have some screen-shot of node field_list & form_mode, at first

I have uninstalled focal_point and media_contextual_crop_fp_adapter, cleared all cache, but the same.

I think it's something in node / entity / media configuration.

Did you have an entity_browser / inline_entity_form ? or something like that ? something it can override the media library ?

can you make some screen-shots of node field_list and node form_mode ?

Screen-shots

Did you have an entity_browser / inline_entity_form ? or something like that ? something it can override the media library ?

I have entity_browser and entity_browser_entity_form but uninstalled.

For media, I have: media, media_contextual_crop_field_formatter, media_contextual_crop, media_contextual_crop_iwc_adapter, media_library (Version: 10.2.3), media_library_media_modify, media_responsive_thumbnail, media_entity_download (I use for documents), peertube, svg_image_field_media_bundle, video_embed_media.

for form I have enabled inline_form_errors (I can uninstall)

I changed line 63 from
$is_overriding_context = $build_info['form_id'] === 'override_entity_form';
to
$is_overriding_context = 'override_entity_form';
and then in both (node edit and image media edit) I get the "This crop definition affects ONLY this contextual usage of this image".

Maybe is in there the problem? That doesn't get different for each, thought in your installation yes... The node edit should get the override_entity_form, shouldn't it?

I have to leave for 2h and in 4h I have a meeting. I will look here when I come back.
Thanks a lot :)

i have uninstalled inline_form_errors and the wrong form continues...

If the problem are on the 3 media reference fields (Adjunts, Video, Imatge media), it's because you are using an "entity reference" field when it should be using a "Media with contextual modifications" field.

You can make the migration with a drush command : drush media_library_media_modify:migrate node [field_name]

The problem is only with Imatge. The others have other formatters. See you later

right, only "image media" are impacted

Hello again

I thought in the way what was different between what you have and I.
And I rememebered your coment here 💬 The focal point option isn't in the select on Media images field Fixed

In fact, the module "media_library_media_modify" provide a service to migrate a "standard" reference field to a "Media with contextual" field
EntityReferenceOverrideService::migrateEntityReferenceField([entity_type], [field_name]);

So you can use Image field to media to made the "image->ref media" conversion and the service of media_library_media_modify to made "ref media -> media with contextual" conversion

So I decided to make a new field media image in the node story and it works!!!
So the problem is in media_library_media_modify
Maybe in this issue 🐛 Can Media Library Media Modify be used with Image Widget Crop? RTBC ?

But you will know better than me.
I hope no to have to migrate the field again, but if it is necessary, I will.
Thanks and the solution is almost there!!!!!!! :)

ah! One thing different in the two fields in the node form display (both with Media library extra):
old field doesn't have the Form mode select at the bottom.

The field "field_imatge_media" must be a "Media with contextual modifications" not a "Entity reference" in order to make "media_library_extra" widget working well.

The issue you mention is mine in order to make media_library_media_modify working with IWC/FocalPoint

I didn't understand in the other issue that I had to make this command.
drush media_library_media_modify:migrate node field_imatge_media
And now it works!!!
Thanksssss and don't forget the paella if you come to Barcelona :)