ImageCropWidget does not work outside of the admin #17

tiwei · 2012-09-19T19:02:28Z

Hi guys, I couldn't find a ticket to this issue so I hope it's not a duplicate. Even if I explicitly assign the ImageCropWidget for my image form field, the image cropping widget isn't used outside of the admin. Instead a regular ClearableFileInput is rendered.

I'm using django crispy forms, but I also tried to render the field without the form-helper and had the same problem. It looks like that there is a problem with loading the jQuery/js.

There is a thread in the django user group, so I'm not the only one having the problem: https://groups.google.com/forum/#!topic/django-users/U6c-DysbGS4

Let me know if you need any additional information. Cheers!

jonasvp · 2012-09-19T21:23:06Z

Hi tiwei, did you add the form media to the page as described here? https://docs.djangoproject.com/en/dev/topics/forms/media/#media-on-forms

In other words, your page will need to look like this:

<html>
  <head>
    {{ form.media }}
  </head>
  <body>
    <form action="" method="post">
      {{ form }}
    </form>
  </body>
</html>

If so, we'll really need to add a paragraph to that effect to the docs...

tiwei · 2012-09-20T14:37:14Z

Hi jonasvp,

it wasn't included before, but I added the form media and it gets loaded successfully. The problem is that the form still uses a ClearableFileInput instead of the ImageCropWidget. I'm probably doing something wrong, so here's a simplified version of my code(I didn't close the html tags on purpose because github ignores them otherwise):

#models.py
from image_cropping.fields import ImageRatioField, ImageCropField

class Course(models.Model):
...
image = ImageCropField(blank=True, null=True, upload_to='course_pics/')
home_cropping = ImageRatioField('image', '260x200')
course_cropping = ImageRatioField('image', '270x220')
...

#forms.py
from image_cropping import ImageCropWidget

class ImageForm(forms.ModelForm):
class Meta:
model = Course
fields = ('image',)
widgets = {
'image': ImageCropWidget,
}

#template
{% block extra_head %}
{{ image_form.media }}
{% endblock extra_head %}
...

I'm using django 1.4.1 and django-image-cropping 0.6.1
Thanks a lot for taking the time and helping me!

jonasvp · 2012-09-20T15:18:37Z

Ah, I see the problem. This should be your minimal setup:

#models.py
from image_cropping.fields import ImageRatioField, ImageCropField

class Course(models.Model):
    image = ImageCropField(blank=True, null=True, upload_to='course_pics/')
    home_cropping = ImageRatioField('image', '260x200')
    course_cropping = ImageRatioField('image', '270x220')


#forms.py
from image_cropping import ImageCropWidget

class ImageForm(forms.ModelForm):
    class Meta:
        model = Course
        fields = ('image', 'home_cropping', 'course_cropping')

In other words: the image can be cropped in the ImageRatioField, not the (misleadingly named) ImageCropField! The ImageCropField stays a file field where you can upload new images.

You don't need to define the widget explicitly in this case, the ModelForm takes care of it.

Let me know if this helps!

tiwei · 2012-09-21T09:05:22Z

It works beautifully, thanks a lot! It would probably be good to add a line in the documentation saying that the cropping fields have to be included in the fields dict of the model form, because the example could be misinterpreted as if that wasn't necessary ;)

I have one small issue left and it's probably a problem in my code again. The field doesn't crop the image (seen in the background), but seems to try to crop or resize the already cropped image:
http://postimage.org/image/59snpjgqf/

Any idea what I did wrong?
Thanks a lot for your help!

tiwei · 2012-10-17T10:34:29Z

It turns out that it was a CSS problem related to twitter bootstrap. Just overwrite the max-width of 100% for the img tag with max-width: none; and it works.

jonasvp · 2012-10-17T11:43:04Z

Thanks for following up! This should help others having the same problem...

ghost · 2012-11-08T20:43:02Z

Hi there,

It looks like there's a major mistake in the docs that I just discovered after reading this thread.

The docs say "from image_cropping import...." but it should be "from image_cropping.fields import....". Once I made that change the plugin started working :)

Hope this helps someone else!

Dave

jonasvp · 2012-11-08T21:31:10Z

Hi @juump2,

that's weird. We're importing the fields in __init__.py (https://github.com/jonasundderwolf/django-image-cropping/blob/master/image_cropping/__init__.py) so it should work as written in the docs. Are you sure you're using a current version of django-image-cropping? These imports were changed pretty recently.

ghost · 2012-11-08T23:30:56Z

Hi again,

You're right, I think I just happened to get it working at the same time that I tried adding .fields to the import, but the two aren't related. I took out .fields from my import line and it still works in the admin. Oops, my mistake :)

The challenge I'm having now is getting things to work in the front end because I use the $(...) jQuery notation in my JS code and I noticed that in your image_cropping.js file you use jQuery.noConflict() which unbinds the $. So now I'm getting errors throughout my JS code saying "Uncaught TypeError: Property '$' of object [object Window] is not a function". To fix this, added the following JS code after importing your image_cropping.js in the HEAD block of my page:

I'm wondering if there's another way to solve this conflict? It seems like somethat that would affect everyone using this plugin and wasn't mentioned in the docs as far as I could see.

Also, I'm doing the image cropping in a jQuery dialog with the contents loaded via AJAX. So after opening the dialog, I'm calling image_cropping.init() in the .load() success handler to initialize the freshly-loaded elements. I realize that image_cropping.init() has already been called once when the page itself was first loaded, but this doesn't seem to be a problem (the only adverse effect is that it inserts a duplicate CSS entry for the size-warning in the HEAD block). Still, I'm wondering if there's a more graceful way of using your image cropping app in cases such as this when delayed initialization is required.

By the way, thanks for all your work on this plugin! :)

Dave

jonasvp · 2012-11-09T08:19:27Z

Hi @juump2

those are good points! Would you mind creating two new issues for them, so they don't get lost down here in the comments?

Thanks!

ghost · 2012-11-09T20:27:42Z

Done :)

georgikoyrushki95 · 2017-07-16T14:16:23Z

Hi guys, I have the same problem. I have done all the initial set-up steps as was suggested by @jonasvp. Can you confirm that the application works with the latest django version? Thanks in advance for the help.

jonathan-daniel · 2020-08-29T15:30:54Z

Hello, im having the same problem event hough I have added the ratio field

tiwei closed this as completed Sep 21, 2012

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

ImageCropWidget does not work outside of the admin #17

ImageCropWidget does not work outside of the admin #17

tiwei commented Sep 19, 2012

jonasvp commented Sep 19, 2012

tiwei commented Sep 20, 2012

jonasvp commented Sep 20, 2012

tiwei commented Sep 21, 2012

tiwei commented Oct 17, 2012

jonasvp commented Oct 17, 2012

ghost commented Nov 8, 2012

jonasvp commented Nov 8, 2012

ghost commented Nov 8, 2012

jonasvp commented Nov 9, 2012

ghost commented Nov 9, 2012

georgikoyrushki95 commented Jul 16, 2017

jonathan-daniel commented Aug 29, 2020

ImageCropWidget does not work outside of the admin #17

ImageCropWidget does not work outside of the admin #17

Comments

tiwei commented Sep 19, 2012

jonasvp commented Sep 19, 2012

tiwei commented Sep 20, 2012

jonasvp commented Sep 20, 2012

tiwei commented Sep 21, 2012

tiwei commented Oct 17, 2012

jonasvp commented Oct 17, 2012

ghost commented Nov 8, 2012

jonasvp commented Nov 8, 2012

ghost commented Nov 8, 2012

jonasvp commented Nov 9, 2012

ghost commented Nov 9, 2012

georgikoyrushki95 commented Jul 16, 2017

jonathan-daniel commented Aug 29, 2020