Problem/Motivation
The focal point module expects the image field widget to be of the 'image' type. When using entity browser the widget needs to be changed and that stops this focal point from working with images placed in this way.
Proposed resolution
Integrate focal point with file entity so that after selecting an image through entity browser the user/editor can edit the file entity where they will see the focal point preview widget in the file entity modal dialog, allowing them to select an appropriate focal point.
Steps for testing
- Enable file entity module
- Create a content-type, attach a file field (cardinality: unlimited)
- Go to "Manage form display", select "Editable file" as field widget
- Create a node and upload a image, click on the "Edit" button next to the uploaded file
- The file entity overlay should display a preview of the image, the focal point widget and a focal point preview link
- Set focal point
- Submit the overlay, save the node
- View the node
Remaining tasks
More testing by users to confirm this works with the 'image' widget as well as the 'entity browser' and 'editable file' widgets.
User interface changes
A focal point provided thumbnail with crosshair is displayed in a file entity modal dialog where a user can make their focal point selection and also preview the results of their selection. This is also displayed when editing a file through /admin/content/files.
Original report by Andreas Speck
We are using File Entity Browser to populate image fields. I am looking for a way to nevertheless use Focal Point, but how?
From Focal Point's README, I gather I need to set the Focal Point as the image widget on the from display settings page - which I can't do if I want to use File Entity Browser to allow for uploading and selection of existing image files.
Is there a way to nevertheless use Focal Point to crop and scale the image only for this one instance where it is used (and different for another instance)? How would I go about that?
Comment | File | Size | Author |
---|---|---|---|
#76 | integrate_focal_point-2701725-76.patch | 25.45 KB | samuelpodina |
#75 | integrate_focal_point-2701725-75.patch | 14.12 KB | reszli |
#73 | integrate_focal_point-2701725-73.patch | 14.13 KB | sandzel |
#69 | integrate_focal_point-2701725-69.patch | 14.14 KB | rudins |
#64 | media-source.png | 5.27 KB | eigentor |
Comments
Comment #1
Anonymous (not verified) CreditAttribution: Anonymous at Netuxo Ltd (RIP) commentedAndreas Speck created an issue. See original summary.
Comment #2
pminfAny update on this? I'm also "forced" to use File Entity Browser because with the standard image widget I'm not able to change file entity fields.
I think we have to alter the form but I don't know which form render array keys I have to set or update.
Comment #3
bleen CreditAttribution: bleen at NBCUniversal commentedCurrently there is no support for the File Entity Browser but its certainly something I would consider. Patches welcome...
As for this, the short answer is no. The focal point position is tied directly to the file independent of the context of where that file might be displayed. In my opinion, this is the correct behavior.
Comment #4
Ewout GoosmannThis patch integrates focal point into the file entity module. You can use focal point on the file entity edit form.
Comment #5
Anonymous (not verified) CreditAttribution: Anonymous at Netuxo Ltd (RIP) commentedThanks @ewout-goosmann. This seems to work, so that's good. But it is not very practical in terms of workflow, as you do not set the focal point when you upload an image using an entity browser. So if someone uploads an image when adding or editing content, they would then need to locate the image via /admin/content/files to set the focal point... Hmmm.
The problem might also be that focal_point saves the focal point per image instance, and not separately for each usage of an image.
Comment #6
keboca CreditAttribution: keboca as a volunteer commentedHey @ewout-goosmann,
Looks like this patch needs to be an update,
Fatal error: Class 'FocalPoint' not found in /var/www/drupalvm/drupal/modules/contrib/focal_point/focal_point.module on line 58
Right now, Focal point is using services to manage all functionality
Comment #7
webflo CreditAttribution: webflo at UEBERBIT GmbH commentedRerolled the patch from #4. This provides the focal point widget on file edit and file edit inline forms.
Comment #8
webflo CreditAttribution: webflo at UEBERBIT GmbH commentedNot used.
Comment #9
webflo CreditAttribution: webflo at UEBERBIT GmbH commentedAdded the preview link to the form.
Comment #10
yoruvo CreditAttribution: yoruvo commentedSome seriously good work. I love that there's a preview link.
I almost set it to "reviewed by the community", but not being able to directly apply the patch is a bit of a problem, I guess.
Comment #11
bleen CreditAttribution: bleen at NBCUniversal commentedCan someone give me the exact steps they are using to test (I dont really use the file entity browser).
Once I have steps, I will try to apply to HEAD which is really what is important
Please open a new issue for this and I'm open to replacing it...
Comment #12
webflo CreditAttribution: webflo at UEBERBIT GmbH commentedHere some steps for testing.
The file edit form should display the focal point widget as well. Go to "admin/content/files", edit a file/image. The edit page (files/(fid)/edit) should show the focal point widget.
Comment #13
bleen CreditAttribution: bleen at NBCUniversal commentedGenerally this looks ok and I'm certainly willing to add this functionality, but I have a few issues:
Here is a more detailed review:
Can we find a way to abstract the code that is used in Drupal\focal_point\Plugin\Field\FieldWidget:process so we don't duplicate the code needed to build the indicator form element?
Similarly we need to abstract the logic to create a preview link from Drupal\focal_point\Plugin\Field\FieldWidget:process so we are not duplicating code. Also, as it stands the preview link does not work until you have saved the node. See #2790809: Preview page return "Access Denied" when creating a new node
same...
nit: needs docblock
Is there a reason why you created a new class here as opposed to adding this to focal_point.manager? I'm honestly not sure where the line should be drawn here...
Comment #14
webflo CreditAttribution: webflo at UEBERBIT GmbH commented#2657592: Convert focal point selector tool into a standalone form element is related. Maybe we should start with this one.
Comment #15
webflo CreditAttribution: webflo at UEBERBIT GmbH commentedA extra form element is not an easy task because of the ImageWidget inheritance. I tried to refactor the previous patch instead.
Comment #16
webflo CreditAttribution: webflo at UEBERBIT GmbH commentedCan remove the data attributes? I could not find any usages.
Comment #17
nerdacus CreditAttribution: nerdacus at Metal Toad commentedRe-rolled the #15 patch to remove any mentions of the FocalPointHelper. I didn't make any changes with respect to the comments in #16, but I'd like to defend the data attributes as they might be used by quickedit or similar.
So far this integration is looking and working great.
Comment #18
bleen CreditAttribution: bleen at NBCUniversal commentedwhy are these lines being removed?
Comment #19
nerdacus CreditAttribution: nerdacus at Metal Toad commentedOk, I just wanted one person to protest the removal. Re-rolled the patch without removing the data attributes.
Comment #20
nerdacus CreditAttribution: nerdacus at Metal Toad commentedwhoops, forgot to correct paths.
Comment #22
bleen CreditAttribution: bleen at NBCUniversal commentedI made some small changes to the patch but there are two big ones that need to be looked at:
Comment #23
nerdacus CreditAttribution: nerdacus at Metal Toad commentedI like those changes, and the clean up, but a missing
self::
slipped through. After fixing it, the widget still works as designed.Comment #25
nerdacus CreditAttribution: nerdacus at Metal Toad commentedUgh, my bad, funky git history.
This is just an edit of #22.
Comment #26
nerdacus CreditAttribution: nerdacus at Metal Toad commentedComment #27
PapaGrandeI'm not seeing the focal point widget when using entity browser. I'm using file_entity (8.x-2.0-beta2) and entity_browser (8.x-1.0-alpha9+11-dev (2016-10-05)) along with patch #25 applied to focal_point (8.x-1.0-beta3+2-dev (2016-09-28)). The field is set to use the "browser for files (modal)". Am I missing a configuration step?
Comment #28
nerdacus CreditAttribution: nerdacus at Metal Toad commented@PapaGrande, the Focal Point is set when editing the file after selecting & using it via File Browser. Does the Focal Point not appear there for you?
Comment #29
wwhurley CreditAttribution: wwhurley at Forum One commentedIn Drupal 8.0 and 8.1 the File Entity does not have an edit form. So the code in FileBrowserWidget.php that has:
disabled the "Edit" button. Though disabling that section of code allowing the Edit button to show causes an error due to the edit form not being accessible.
Comment #30
bleen CreditAttribution: bleen at NBCUniversal commentedI can confirm that there is no edit button any more when I test the patch from #25 using simpleytest.me. The drupal version that is installed there is 8.1.11-dev
Comment #31
andreasderijckeTested in Drupal 8.2.2 with
Functionality works as described.
Only following warnings appear when editing a file, either as message or in dblog:
Notice: Undefined index: #delta in Drupal\focal_point\Plugin\Field\FieldWidget\FocalPointImageWidget::buildIndicatorFormElement() (line 179 of modules/contrib/focal_point/src/Plugin/Field/FieldWidget/FocalPointImageWidget.php).
Notice: Undefined index: #field_name in Drupal\focal_point\Plugin\Field\FieldWidget\FocalPointImageWidget::buildPreviewLinkFormElement() (line 223 of modules/contrib/focal_point/src/Plugin/Field/FieldWidget/FocalPointImageWidget.php).
Notice: Undefined index: #field_name in Drupal\focal_point\Plugin\Field\FieldWidget\FocalPointImageWidget::buildFocalPointFormElement() (line 254 of modules/contrib/focal_point/src/Plugin/Field/FieldWidget/FocalPointImageWidget.php).
Full stack trace in attached txt.
It seems both corresponding data attributes aren't really necessary in the content of a file entity, but i might be missing something.
Comment #32
andreasderijckeI forgot to mention in #31 that for Drupal 8.2.2 patch from #25 couldn't be applied correctly.
Attached the corrected patch.
Comment #34
weseze CreditAttribution: weseze commentedI could not apply this patch against latest dev, doing it manually did work. (but is a lot of work)
After applying the patch, the focal selection did not appear. Change the file browser from modal to inline didn't work either.
I tried fixing it, but don't have enough time right now to figure out what is going wrong...
Comment #35
stillworks CreditAttribution: stillworks commentedAny news on this matter?
Comment #36
tancHere is a re-roll of #32 against latest dev. In my testing this works nicely. Note that the integration isn't really with the entity browser as in the title of this issue, instead its with file entity. So you need to edit the file to see the focal point preview tool.
Comment #37
tancUpdated patch makes the 'data-delta' and 'data-field-name' attributes optional, depending on whether the corresponding array elements exist in $element. Stops the notice errors. Patch and interdiff attached.
Comment #38
stillworks CreditAttribution: stillworks commentedWon't work for me. Applied the patch to the focal_point folder, patch is applied without errors, image styles with focal point scale and crop are assigned but not visible.
Comment #39
tancSo you've edited an uploaded file_entity based image and set a new focal point? And the image style that you're applying on output uses the focal point scale and crop? You've done a hard refresh of the page and confirmed in the source that the correct image style is being applied?
Comment #40
stillworks CreditAttribution: stillworks commentedYes to all. I switched back and forth from Entity Browser to Image in the Manage form display tab of my fields and the normal image works, I get the little cross to set my focal point. File Entity Browser doesn't show it.
Comment #41
tancThe file entity browser won't show the preview with focus point cross hair. Instead its the modal dialog that you see after you've chosen an image using entity browser and then clicked edit. That modal is provided by file_entity module and this issue is about integration with that (despite the current title!).
Comment #42
tancUpdated the title and issue summary to better describe the functionality in the patches.
Comment #43
stillworks CreditAttribution: stillworks commentedAllright. I have file_entity and entity_browser running works so far. I could a Credit Text field, so i figured out where to edit everything. I added a focal point crop to a image style an set that image style to be used in the edit modal, but how do I get the little image preview you have?
Comment #44
tancYou don't need the "Credit Text" field, thats just something I've got on the file entity for that site.
You should get the image preview if you've applied the patch.
Comment #45
stillworks CreditAttribution: stillworks commentedYes I know, but to figure out where something is and what it does. I re-applied the patch, cleared everything and it works now. Thank you for the help!
Comment #46
stillworks CreditAttribution: stillworks commentedOn another project I get "Reversed (or previously applied) patch detected! Assume -R? [n]" with the latest dev release, freshly downloaded. Applying it anyway breaks the ajax modal.
If I run with no
focal_point.info.yml.rej:
Comment #47
gmaxwelled CreditAttribution: gmaxwelled commentedThis works for me. It would be good to see this included in a new release.
Comment #48
webflo CreditAttribution: webflo at UEBERBIT GmbH commentedRebased #37. Depends on #2657592: Convert focal point selector tool into a standalone form element.
Comment #50
webflo CreditAttribution: webflo at UEBERBIT GmbH commentedRerolled after #2657592: Convert focal point selector tool into a standalone form element went in.
Comment #51
webflo CreditAttribution: webflo at UEBERBIT GmbH commentedComment #53
bleen CreditAttribution: bleen at NBCUniversal commentedChasing HEAD (this patch is untested)
Comment #54
bleen CreditAttribution: bleen at NBCUniversal commentedtriggering testbot
Comment #55
bleen CreditAttribution: bleen at NBCUniversal commentedComment #56
tancWhile the patch applies, I think the functionality is now broken. When clicking the edit button the modal now pops open but is empty. I think this is due to attachFocalPoint in focal_point_form_file_image_edit_form_alter(). The attachFocalPoint is expecting the image element object as its first parameter but instead is being passed the file entity edit form.
Comment #57
undertext CreditAttribution: undertext as a volunteer commentedThe main problem is that
attachFocalPoint()
returns nothing xDThis patch should fix empty popup, but attaching logic should be still updated as I get notices in the logs.
Comment #58
tancHa! Yes, it should return an array according to the comment block.
This does allow the form to work, but as you say there are notice errors. These are because attachFocalPoint is expecting the form elements of a standard widget. The attached patch is a total kludge just to get around the notice errors but I don't like it at all. It seems to me that it would be good to work on #2657592: Convert focal point selector tool into a standalone form element so that it can be included neatly on the file entity form.
Comment #59
Dennis Cohn CreditAttribution: Dennis Cohn at ezCompany commentedI've applied #58.
But when I click on the edit button, I don't see a focal point. I can only replace the image..
EDIT: I'm only seeing the focal point on newly uploaded files...
EDIT2: After running cron, clearing the cache a few time, the focal point is also visible at older uploaded files!
Comment #60
kumkum29 CreditAttribution: kumkum29 commentedHello,
use Focal Point with entity browser is a useful functionnality. Do you think add the above patch in the next version this module ?
Thanks.
Comment #61
bleen CreditAttribution: bleen at NBCUniversal commented@kumkum29 ... Looks like there is still work to do on this. Any help you can give would be a great help in moving this along.
Comment #62
bleen CreditAttribution: bleen at NBCUniversal commentednow that the media module is in core ... can someone re-state the steps here. It seems like focal point works out of the box with media based on how its been implemented in core. Am I missing something (likely)?
Comment #63
samtny CreditAttribution: samtny at Digital Pulp commentedI can confirm Focal Point works out-of-the-box with core Media Entity. The focal point may be set in the popup / entity edit form, and is correctly represented in Image Styles that use the Focal Point steps.
I suggest this ticket should no longer block a release of Focal Point for D8, as File Entity has AFAIK been deprecated anyway for at least a year.
Comment #64
eigentor CreditAttribution: eigentor commentedAlright, can also confirm this works with core media Entity.
I guess it is not yet usable with entity browser.
Comment #65
AaronBaumanIs there a thread open already about compatibility with media_library module, which is in core-experimental now?
If not, i will open a new one.
Comment #66
bleen CreditAttribution: bleen at NBCUniversal commented@aaronbauman ... I think we need a new issue for media library (which should frankly get more of the love since it will supersede entity browser for images)
Comment #67
AaronBaumanCreated #3001262: Integrate focal point with media_library, which is now in core
Comment #68
bleen CreditAttribution: bleen at NBCUniversal commentedIs it fair to close tis now that we have integrated with media_library?
Comment #69
rudins CreditAttribution: rudins at Wunder commentedThere are still many of us who still haven't migrated to core media. So, here is patch for us.
Comment #70
bleen CreditAttribution: bleen at NBCUniversal commentedI'm closing this in favor of the media_library integration
Comment #71
grantkrugerThanks for the patch reroll, @rudins.
Comment #72
Dennis Cohn CreditAttribution: Dennis Cohn at ezCompany commentedIndeed... I want, but there isn't an upgrade path from file entity to media core, or is there a nice way to do this??
Anyway, the patch is failing on 1.4 :(
Comment #73
sandzel CreditAttribution: sandzel at FFW commentedAdjusted patch for 1.4
Comment #74
Dennis Cohn CreditAttribution: Dennis Cohn commentedAnyone who can make a re-roll for 1.5?
Comment #75
reszlihere's the same patch against latest dev (which also applies to 1.5)
Comment #76
samuelpodina CreditAttribution: samuelpodina as a volunteer commentedhere's the same patch against latest 2.x dev (which also applies to 2 for D10)