Display cropping tool on file entity [#2617856]

Problem/Motivation

Crop data is attached to a file through URI.

However a user is not aware of that when looking at the file itself.
Instead it is only made visible in context of the placement.
See related issues #2617820: Warn user on image reuse and #2617818: Support multiple crop variants per URI and crop type

Proposed resolution

Display crop data in context of the file. Also display cropping tool on file field widget. We can use similar approach as the one file entity takes for "Edit" (link, open dialog, crop in dialog, ...).

This can be done in 3 steps:
- See if we need to extract any of the existing code into helper functions to make it easier to put crop tool on more places.
- Add crop tool to file edit page
- Add crop tool (dialog) on file field widget

Integrate with file / file_entity to make cropping info editable when visiting the file on its own.

Remaining tasks

Discuss scope of issue.
Crop might be able to wire things and provide an entry point to the UI modules.

User interface changes

API changes

Comment	File	Size	Author
#6	Screen Shot 2015-12-01 at 16.55.14.png	113.76 KB	sasanikolic
#6	Screen Shot 2015-12-01 at 16.55.01.png	49.85 KB	sasanikolic

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

18 November 2015 at 08:34

miro_dietiker created an issue. See original summary.

Comment #2

woprrr CreditAttribution: woprrr as a volunteer commented 23 November 2015 at 20:20

Issue tags:

+D8Media

Comment #3

slashrsm CreditAttribution: slashrsm at MD Systems GmbH commented 23 November 2015 at 22:46

Issue tags:

+Media Initiative

Comment #4

slashrsm CreditAttribution: slashrsm as a volunteer commented 29 November 2015 at 15:35

Title:	Support file / file_entity	» Display cropping tool on file entity
Issue summary:	View changes

When using file_entity you get the actual file edit page. Embed cropping tool into it too. File entity

Comment #5

miro_dietiker

Switzerland

CreditAttribution: miro_dietiker at MD Systems GmbH commented 1 December 2015 at 15:30

Yeah agree and discussed with Berdir:
We want to have the cropping UI added to the file entity edit form.

Comment #6

sasanikolic CreditAttribution: sasanikolic at MD Systems GmbH commented 1 December 2015 at 15:57

File	Size
Screen Shot 2015-12-01 at 16.55.01.png	49.85 KB
Screen Shot 2015-12-01 at 16.55.14.png	113.76 KB

Step to reproduce the popup:
- add a field (i.e. for Article content type)
- in form display change the widget from File to Editable file
- create an article and upload an image
- click on edit

Here are the provided screenshots.

We will integrate this into the popup after finishing this issue #2625026: Crop widget crop list not following common patterns.

Comment #7

miro_dietiker

Switzerland

CreditAttribution: miro_dietiker at MD Systems GmbH commented 2 December 2015 at 07:51

Great.

One problem though:
The widget usually displays in context of a field and then we can limit the crop types.

For the global admin/content/files // files edit widget we can not limit the crop types..
So we either need to display all crop types for that case or only display the ones in use or allow adding a crop through a drop down button to avoid a long list of unused items if the system has many crop types setup.
I think adding more configurability is a bad idea.

Comment #8

miro_dietiker

Switzerland

CreditAttribution: miro_dietiker at MD Systems GmbH commented 2 December 2015 at 08:00

Discussed with Sasa and Berdir:
For now we list all crop types.

Comment #9

miro_dietiker

Switzerland

CreditAttribution: miro_dietiker at MD Systems GmbH commented 8 December 2015 at 10:20

Priority:

Normal

» Major

Promoting to major since this integration is needed for many ways like inline entity form or the edit button widget for file entity.

Comment #10

thenchev CreditAttribution: thenchev at MD Systems GmbH commented 14 January 2016 at 08:27

Assigned:

Unassigned

» thenchev

https://github.com/drupal-media/image_widget_crop/pull/1

Comment #11

woprrr CreditAttribution: woprrr as a volunteer commented 19 January 2016 at 05:38

I think this issue is now a priority for the module we need to focus our effort on that. I ve discuss with @slashrsm for an robust solution

it seems to me that having a form element for cropping tool would be the best solution

We need to create new form element Like :

$form['crop'] = [
  '#type' => 'image_crop',
  '#crop_types' => [
    'crop_type_foo',
    'crop_type_bar',
  ],
  // other possible configuration options
];

This solution i think is the best and reusable in widget element and form api (for IEF, EB, File entity).

For more details and discuss we us

@see PR on github

Comment #12

slashrsm CreditAttribution: slashrsm as a volunteer commented 19 January 2016 at 09:15

Project:

Crop API

» Image Widget Crop

This is IWC issue.

Comment #13

slashrsm CreditAttribution: slashrsm as a volunteer commented 19 January 2016 at 15:27

Status:

Active

» Reviewed & tested by the community

New pull:
https://github.com/drupal-media/image_widget_crop/pull/3

Comment #14

19 January 2016 at 19:48

Denchev committed 075c9e5 on 8.x-1.x

Issue #2617856 by Berdir, slashrsm, woprrr, Dencev: Display cropping...

woprrr committed 07bf9a4 on 8.x-1.x

Merge pull request #3 from Dencev/display_cropping_tool_on_file_entity...

Comment #15

woprrr CreditAttribution: woprrr as a volunteer commented 19 January 2016 at 19:52

Status:

Reviewed & tested by the community

» Fixed

It's ok ;) I think we do verify all changes introduces by #2641970 i ve found an call to getThumbnailCropProperties and he has deleted by this issue. It' time to refactor ;)

Comment #16

miro_dietiker

Switzerland

CreditAttribution: miro_dietiker at MD Systems GmbH commented 20 January 2016 at 11:09

I was so happy to see this committed... But now file entity integration is completely broken.

Fatal error: Call to undefined method Drupal\image_widget_crop\Plugin\Field\FieldWidget\ImageCropWidget::getThumbnailCropProperties() in /web/modules/image_widget_crop/image_widget_crop.module on line 395

Although JS can not be tested, such an integration definitively needs a minimal test.
Please be patient with commits and rerun tests after complex potential overlaps.

Keeping HEAD stable needs to be our top priority.

Followup: Would be nice to extend the demo with a file entity dependency to make this visible. See #2653378: Add file entity to demo