Feature Request
The media module is becoming the de facto solution for media management in Drupal 7 and we should definitely have the ability to create focus/crop rectangles on images selected via the Media Browser. The attached patch offers that integration.
Functionality
If you have the Media module (7.x-2.x) installed then you can open the Media Browser and do the following:
- Upon uploading, instead of just clicking "submit" you can click "Upload and Set Focus" (maybe this should be "Add to Library"?)

- From the library, select an item and the focus form appears. Making changes to this focus and crop rectangles are saved automatically.

The Code
The primary mechanism by which this integration happens is by including a new imagefield_focus.media.js file whenever the media browser is opened. It basically latches on to a couple of existing js functions, namely the item list and item render functions, and injects the logic it needs to there. In addition it adds some logic to handle adding focus to a file immediately upon uploading.
There were several places where I made the existing code a bit more generic so that it could be used (as it is now) with image fields as well as with media fields.
Important Notes
- These patches are intended to work with the 7.x-2.x version of the media module. (If anyone feels like making this work for Media 7.x-1.x then the patch in #3 should be a good start)
- The only change to the current behavior of this module is that I had to remove the CSS style that forces images to have a min-width of 500px. Personally I have always found this an odd behavior anyway, but it definitely breaks the default layout of the media browser to have it there.
Left to do...
It occurs to me as I write this that I never tested what happens if I select a non-image from the meda browser library. I *think* it should be handled ok, but I need to look at that.Add crop/focus form to the /file/%fid/edit pageAdd crop/focus form to views-based media libraries
Comments
Comment #1
bleen commentedThe patch in the original post accidentally included a couple of commits that were already committed... this patch only includes the changes I made
Comment #2
anrikun commentedThank you bleen18!
But patch at #1 looks strange. Make sure you follow instructions at http://drupal.org/node/1021220/git-instructions/7.x-1.x
For instance, part below should not show up:
Comment #3
bleen commentedYeah ... I had accidentally killed my .git folder half way through working on this and then frankentsein-ed things back together. I guess I missed the stuff that the packaging script adds to .info.
Anyway, this patch gets rid of that, and fixes the one "no new line" white space error that Dreditor found in the patch in #1.
Comment #4
bleen commentedIn this patch I have added some logic to handle non-image files that might appear in the media browser.
Comment #5
bleen commentedNOTE: This is meant to work with Media 7.x-2.x
...and finally (I hope) this patch adds imagefield_focus support to the file entity edit form (that comes with media) and adds support for views-based media libraries as well as the standard library.
This really is ready for a good, thorough review now.
Comment #5.0
bleen commentedUpdated issue summary.
Comment #6
anrikun commented@bleen18: Thanks for your work. I will try to review it this week.
But again patch looks really strange.
It deletes plenty of lines at the beginning to add some of them again at the end.
Anyway, I think that such a big feature should be added as a sub-module called imagefield_focus_media or media_imagefield_focus, as you prefer.
The patch for imagefield_focus itself should only add minimal changes so that it can accept extensions such as your module while still working the same.
What do you think about this?
Comment #7
bleen commented@anrikun: The reason that the imagefield_focus.js are removed and then added later is because I created (in this patch) a /js folder for organizational purposes. There is no actual code in that file that has changed.
As for creating a separate module... I think that idea is fine, but even in that case the changes to imagefield_focus are not really minimal. There was a lot of abstraction to do to decouple code from the field API. Given that, it may not be worth it to create a separate sub-module.
FYI: I'm usually on IRC (@bleen) in teh #drupal room so if you have questions or want to discuss, feel free to ping me there
Comment #8
bleen commentedYour comment in #6 coupled with some workflow discussions we have been having in my office about this have forced me to rethink things a bit. The primary motivation for rethinking is that once we introduce the concept of multi-select (see #1658452: Regression: Views Library doesn't support mutliselect, 1.x library did) then the workflow of setting the imagefield focus within the media browser becomes both cludgey and unintuitive. It makes much more sense to edit the focus/crop data upon upload and/or when editing the file entity itself.
This patch, combined with the sandbox project found in the comment here #1658452-3: Regression: Views Library doesn't support mutliselect, 1.x library did lends itself to a much smoother workflow.
The good news is that it also lends itself to a simpler patch (37k -> 25k) so thats something.
What are your thoughts on this new approach
Comment #9
lsolesen commentedDeleted original comment, as it was just me not turning on the focus setting.
Make sure to go to admin/config/media/browser to turn on the focus setting in the media browser.
Comment #10
lsolesen commentedComment #11
lsolesen commentedAfter turning it on, I actually think the implementation is quite clever and easy to follow. For me this should at least be committed as the first stab on making the implementation work, and then stuff can be tweaked later on.
Comment #12
marcvangendThanks for the tip in #9, that sure helped! I didn't do enough testing to call this RTBC, but I tried this patch and it worked as expected.
You can read more about my little experiment with Media, Picture and Imagefield Focus in #1859562-3: add focal point support.
Comment #13
tchopshop commentedIs there something I'm not getting? So to crop the image that is uploaded in ckeditor, I need to go to the Files list and edit the file?
Ok, so on the File edit page, I find the Focus and Crop textfields but the image below those fields is not appearing in order to set the coordinates.
Is there some other setting in File Entity?
Comment #14
ericduran commentedIs this missing anything to get in?
Seems like this would be a great addition.
Comment #15
siefca commentedWhould it be possible to predefine focal point on per-field basis? I have couple of different fields (person photo, article image) and would love to predefine different aspect ratios for them.
Comment #16
bleen commented@siefca, I'm not sure about the answer to your question, but it is definitely a separate issue. Please open up a new issue which focuses (errg, pun) on your question.
Comment #17
tchopshop commentedI've manually patched this because I can't apply a patch cleanly. However, the media part is working and that is a nice solution. However, it's now not taking new focus or crops -- meaning that I can't re-edit an image I have already edited.
Comment #18
bleen commentedCan you post a patch so we can see what you are working with
Comment #19
tchopshop commentedHere's the patched module file.
Comment #20
longlivelance commentedSome things were not working for me and it looks like it may be because of the last update made right after the last patch was uploaded. This patch should apply cleanly to the most recent dev version of the imagefield_focus module. The commit sha this is tested with is fd5c5df29575b32f08638321abcf02a3fca4d83f (http://drupalcode.org/project/imagefield_focus.git/commit/fd5c5df29575b3...)
Comment #21
MKorostoff commentedPatch in #20 working well for me. Thanks!
Comment #22
kiwad commentedAm I doing something wrong ?
1 - Drush dl 7.x-1.x-dev
2 - wget patch #20
3 - git apply patch
4 - drush en module
5 - create a imagestyle using focus crop
6 - Add content having field_image with media selector widget
I don't see anything related to this module except an error message when I click next after uploading an image :
Notice : Undefined index: focus in imagefield_focus_form_file_entity_edit_alter() (line 139 in .../sites/all/modules/contrib/imagefield_focus/imagefield_focus.module
Same message if I go at file/fid/edit
I'm using Media 7.x-2.0-unstable7+54-dev + File entity 7.x-2.0-unstable7+85-dev
Comment #23
David_Rothstein commentedThis patch works well for me.
@kiwad, it sounds like you're missing the important step discussed in the comments above (e.g., #9):
The PHP notice sounds like a small bug, though, most likely introduced by this patch:
A PHP notice will be generated whenever the variable is using its default value (empty array).
Comment #24
roderik de langen commentedI also see no extra functions popping up after applying the patch
Followed same steps as #22
Comment #25
deejmer commentedI have Media 7.x-1.3 installed, but otherwise followed the patch instructions exactly. But I'm not seeing the button appear in the Media browser as the "how to" would suggest. Does anyone know....does this patch not work when Media 7.x-1.3 is in use?
To be clear, the Media browser settings under configuration has the Focus Settings. I enabled focus there, but again, in the Media browser GUI, I see no button for focus settings.
UPDATE: OOPS! I missed the Media 7.x-2 requirement! works great now....This is just the patch I've been looking for!
Comment #26
kiwad commented@David_Rothstein
Thanks! I was indeed missing one step "Make sure to go to admin/config/media/browser to turn on the focus setting in the media browser."
These steps make it work like a charm with media 7.x-2
1 - Drush dl 7.x-1.x-dev
2 - wget patch #20
3 - git apply patch
4 - drush en module
5 - create a imagestyle using focus crop
6 - Add content having field_image with media selector widget
7 - go to admin/config/media/browser to turn on the focus setting in the media browser.
Comment #27
David_Rothstein commentedThe patch in #20 has some changes that appear to be unrelated to this issue, at least in imagefield_focus.css and imagefield_focus.effects.inc (maybe other places too?). I discovered this while working on another patch that this one conflicted with.
In addition, the PHP notice discussed above is not fixed.
Here's a reroll that removes the changes in imagefield_focus.css and imagefield_focus.effects.inc and also fixes the PHP notice.
Comment #28
lzimmerman commentedJust applied this patch, and all is working well. Thank you!
Comment #29
dw72 commentedThis patch is working but not with responsive images using picture module (only one image size is cropped using focus data when edit existing images)
Comment #30
dw72 commentedSorry for the false alarm, I had different focus strength on different image styles :(
Comment #31
tchopshop commentedThis patch is not working for me. The form appears on the modal but it doesn't appear to save the settings.
Note I also patched for fixed size.
I am using a Media File field not a Media Image field. The directions in #26 says to use an image field with Media Widget selector, but using a File field seems to be the new standard for Media. I also need to use a file field to allow video.
I'm hoping someone can shed light on this.
Comment #32
bleen commentedtchopshop: the crop/focus settings should save immediately on mouse up. If they arent saving I would guess that you have some js error
Comment #33
tchopshop commentedBleen18 -- the coordinates are indeed saving in that sense, yes. But the image style is not working, so I believe they are not saving on the node. For example, I have a style that uses Focus crop then a regular Scale. So that image is scaling but not Focus cropping BUT only on media fields. On regular fields with the same image style, it is working.
thanks for responding!
Comment #33.0
tchopshop commentedUpdated issue summary.
Comment #34
bleen commentedI recently created a new module that take a different approach to the idea of focus, but it integrates with media and may be a good alternative for people. See https://drupal.org/project/focal_point
Comment #35
thsutton commentedHere's the patch from #27, now with added hook_field_extra_fields() so you can configure where the focus form elements in the file edit form.
Comment #36
thsutton commentedI have no idea why my comment changed the issue text? I clicked the "update this issue" link, wrote a comment and uploaded a file.
Comment #37
lsolesen commentedPatch from #35 applies cleanly. But shouldn't I get the focus field stuff on admin/structure/file-types/manage/image/fields so I could move them around? The patch places the focus field in the top of the form. It both works when editing a media field and from wysiwyg when uploading - but the focus field is not shown when editing an image in a WYSIWYG area.
Comment #38
thsutton commentedIt looks like I uploaded the wrong patch file (probably just a copy of #27). Oops.
I've attached a new patch which actually contains my changes as well as the changes from #27.
Comment #39
luksakI don't see the expected changes in the UI. I applied the patch on the latest dev of imagefield_focus and tried using media 7.x-unstable7, 7.x-2.0-alpha3 and the latest dev. But none of them worked. What version should be working together?
Comment #40
thsutton commentedHi Lukas,
I just tested it with the following steps and it all worked as expected. I suspect you might have missed step 3?
Download and install media-7.x-2.0-alpha3 (and whatever version of file_entity drush en pulled down).
Download, patch (with #38) and install imagefield_focus-7.x-1.x-dev
Visit admin/config/media/browser, tick "Enable focus" and save.
Visit admin/structure/file-types/manage/image/fields and configure fields.
Visit file/add and upload a new image field to test.
Configure an image style to use "focus scale and crop" and configuring the Image file type to use it.
Comment #41
David_Rothstein commentedComment #42
luksakIn the meantime I switched to focal_point. But yes, I didn't do step 3.
Comment #43
realityloop commentedthis patch is broken
Comment #44
realityloop commentedRerolled for application after the following are applied:
Comment #45
eric115 commentedRerolled patch to work with latest dev version of imagefield_focus.
Comment #46
jasonawantHi,
I needed to use imagefield focus with a custom file entity type with a custom media browser, so I abstracted patch in #38 to work with custom file entities and w/out the media module dependency. Please review the approach in #2521846: Integrate ImageField Focus with File Entity to see if the efforts between these two issues can be combined/streamlined. Jason.
Comment #47
samuel.mortensonWhen I apply https://www.drupal.org/files/issues/wb-iff-2265973.patch, https://www.drupal.org/files/imagefield_focus_use_data_attr_and_ids_to_f..., and https://www.drupal.org/files/imagefield-focus-maintain-size-1889542-6.patch (#2050253: Add support for Entity Cache is now closed), then apply https://www.drupal.org/files/issues/imagefield-focus-media-integration-1..., I get patch conflicts.
Am I missing anything or does the patch need to be re-rolled again?
Comment #48
unsettlingtrendHas anyone rolled a patch for this since Media's 7.x-2.0-beta1 release? I applied #45 but am seeing no effects.
Comment #49
anybodySame as #48 here.
Comment #51
wirtoo commentedThe same as #48 and #49.
Now i have the latest media(7.x-2.0-beta1+10-dev) and imagefield_focus(7.x-1.0+5-dev), will try to get it work together...