Cropping widget is not showing on client side?

[sonus21]

I have installed cropping and it's dependencies and configure model to use ImageCropField but on client side it's still showing simple file widget. There is no preview as shown in the docs. How to fix this error ? Django:1.8.6 jQuery=2.1.4

[mnieber]

I had similar problems, that I solved using two steps:

First, use ModelForm for the form, and include the cropping field. In addition, as documented, specify the ImageCropWidget in the widgets option of the meta class.

from django import forms
from image_cropping import ImageCropWidget

class FooForm(forms.ModelForm):
    class Meta:
        widgets = {
            'image': ImageCropWidget,
        }

        model = Foo
        fields = ('image', 'cropping')

Second, make sure that you include the cropping field when displaying your form (if you include the entire form in your template using {{ form }} then you should be fine).

Question to the author of this repo: could you show us how to achieve this with a normal forms.Form instead of forms.ModelForm? I'm curious to see which Field members I would have to add to my form in this case.

[anrie]

@mnieber Actually specifying the widget explicitly shouldn't even be necessary.

Basically it's required that you include both relevant fields (the ImageCropField and the ImageRatioField) and make sure that the correct widgets are used (that they are not overriden, etc.). The rest of the magic happens in the image-cropping.js (which is included by the widget): Here the ImageRatioFieldgets hidden and replaced with the cropping widget, etc.

[mnieber]

@anrie You are right, it's usually not necessary. In my case, I was already using an ImageField from sorl_thumbnails for the image in my model, so I had to find a solution that doesn't involve ImageCropField.