Hi,
When I set up a new project and use the lib as described in the docs, admin doesn't work properly.

$ pip list
Django (1.7)
django-image-cropping (0.8.4)
easy-thumbnails (2.2)
Pillow (2.6.0)
wsgiref (0.1.2)

I met some strange problem, when I drag on the cropping component, the image has been overlaped, please check my screenshots here:
http://ww1.sinaimg.cn/mw690/c70aeee6jw1e63ackieshj20au0a0glu.jpg
http://ww4.sinaimg.cn/mw690/c70aeee6jw1e63acjqpv4j20aa09qt8y.jpg
http://ww2.sinaimg.cn/mw690/c70aeee6jw1e63ac8x0npj20dw0aadg4.jpg

I don't know where the problem came, jQuery? How to fix it? Thanks!

When I try to upload an image with a file name with accents or special characters like 'anfitrión.jpg' or 'españa.jpg' the cropping widget fails.
The image is loaded, but the cropping is not.

This happends to me in Windows and Ubuntu: Firefox, Chrome, and Exporer

I think of using django-image-cropping in a project where the admins want a different kind of free cropping. They want to choose width and height in pixels on the admin page. A few questios:

1. Do you have any experience with that?
2. Do you think it's a good idea to build this into image-cropping?
3. Can you give me a hint where I can manipulate the value for the ratio in jqueryJcrop.js?

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!

THUMBNAIL_PROCESSORS setup method is changed.

Hi there,

Following the doc below (which has a note that it works just over the admin)
https://github.com/jonasundderwolf/django-image-cropping#foreign-keys

and a model having a foreign key like this:

class NewsItem(models.Model):
title = models.CharField(max_length=255)
image = models.ForeignKey(Image)
cropping = ImageRatioField('image__image_field', '120x100')

Should be great having it working outside the admin over custom forms.
The ImageCropWidget and CropForeignKeyWidget are not working for this case.

If it is possible, should be perfect having directions for how to implement the foreignkey widget and what is missing, in this way any developer could help to fix it.

It's possible add support for multiple cropping with inline related entries?
This would be awesome for posts or pages with several images.

Can't use jQuery after: "jQuery.noConflict(true)(function() {image_cropping.init();}); "
in: https://github.com/jonasundderwolf/django-image-cropping/blob/master/image_cropping/static/image_cropping/image_cropping.js

When I try to crop an image, it doesn't work very well. Looks like a javascript/jquery/Jcrop problem. it push the cropped image to the left or something.

I attach a screeshot so you can check this issue

Thank you very much

Firefox 24.0

Django==1.5.1
PIL==1.1.7
South==0.8.1
argparse==1.2.1
distribute==0.6.27
django-geoposition==0.1.4
django-image-cropping==0.6.4
django-localflavor==1.0
django-modeltranslation==0.6.1
django-registration==1.0
django-social-auth==0.7.23
django-suit==0.2.1
easy-thumbnails==1.2
httplib2==0.8
ipython==0.13.2
oauth2==1.5.211
psycopg2==2.5
python-memcached==1.53
python-openid==2.2.5
wsgiref==0.1.2

I'm using the template tags to show and modify the different images, but none of the options (width, height, scale, max_size) seem to work:

{% load cropping %}
< img src="{% cropped_thumbnail entry 'thumb_profile' width=200 %}" >

The physical image file with the correct size specs in the file name is being created, but the real image size is always the same.

I'm using:
Django==1.6.1
easy-thumbnails==1.4
django-image-cropping==0.8

Any hints? Is this a bug?

So I just started out adding in django-image-cropping on a simple project. All is well aside from a weird chrome anomoly.

I was moving uploaded files around and must have pointed my storage to an invalid location when I went to re-crop and bang, death because it could not read the file.

There are two issues with this, the first is this might happen in production - I would prefer it to either generate a thumbnail or use something like placehold.it. The second and more to the point... why is it hitting the filesystem? (answer: to get the image dimensions) - Would it not be better to just simply cache this data in a field instead of hitting the drive?

So the feature request is - create, or change the definition of the current field to store this extra data.

Thoughts?

I see that you are loading JQuery and JCrop with the form media. I wonder if this is the ideal thing to do because, I think, there is a huge possibility that JQuery (and possibly Jcrop) have already been loaded before on the template and therefore JQuery would be loaded multiples times. What do you think?, maybe saying in the docs that JQuery must be loaded before the widget would be enough (maybe saying what versions have been tested to work).

PIL is notoriously unfriendly when working with virtualenv. Pillow is a fork of PIL designed for setuptools compatibility.

When using a virtualenv that already has Pillow installed (and therefore has full PIL imaging capabilities), django-image-cropping wants to install PIL again.

I have several ratio fields in the model class. Many models can contain this and so I implemented this with abstract class.

For example:

class AbstractImagePreviewSlider(models.Model):
    cropping_slider = ImageRatioField('image_original', '188x120', size_warning=True, verbose_name='Slider ratio')

    class Meta:
        abstract = True

class AbstractImagePreviewAnotherSlider(models.Model):
    cropping_another_slider = ImageRatioField('image_original', '500x500', size_warning=True, verbose_name='Another slider ratio')

    class Meta:
        abstract = True

class ModelOne(AbstractImagePreviewSlider):
    # smth
    pass

class ModelAnother(AbstractImagePreviewAnotherSlider):
    # smth
    pass

But ImageRatioField adds ratio_fields list to the class for the needs of widgets. (https://github.com/jonasundderwolf/django-image-cropping/blob/master/image_cropping/fields.py#L84)

And so ModelAnother will contain cropping_slider in the ratio_fields list and ModelOne - cropping_another_slider. This will lead to an error in the method initial_cropping for example.

I think that occurs due to ratio_fields isn't unique for child classes.

Dirty workaround:

class ImageRatioFieldFixed(ImageRatioField):
    def contribute_to_class(self, cls, name):
        super(ImageRatioFieldFixed, self).contribute_to_class(cls, name)

        # fix
        if cls._meta.abstract:
            delattr(cls, 'ratio_fields')

Any thoughs? Maybe I miss something?

I am updating my project to 1.9b1 and while updating i am facing this error

File "/opt/pyvirtual/py_3.4-dj_1.9/lib/python3.4/site-packages/image_cropping/init.py", line 1, in
from .fields import ImageRatioField, ImageCropField
File "/opt/pyvirtual/py_3.4-dj_1.9/lib/python3.4/site-packages/image_cropping/fields.py", line 5, in
from .widgets import ImageCropWidget
File "/opt/pyvirtual/py_3.4-dj_1.9/lib/python3.4/site-packages/image_cropping/widgets.py", line 4, in
from django.db.models import get_model, ObjectDoesNotExist
ImportError: cannot import name 'get_model'

so please provide me solution for this or any alternative.

Hello, here is my problem.
If i create more than one field in model, 3 in my case, i have a problem in google chrome:
When page is ready, i'm click on a second field (is is ok for the first field) and page has being scrolling down to the bottom. After that if I click on a first or third field, page has being scrolled down again, but if i try to edit second field now - it is ok. So - first click on a "non-active" field is caues the bug.

Sorry for my english. Thank you.

Hello,

There is a image that returns a exception when is called the "cropped_thumbnail" templatetag.

IOError
image file is truncated (0 bytes not processed)

Hello,
I am using a django formset in which each form represents an "Image" object which has an ImageField as well as an ImageRatioField. This library works great if I already have an image populated. However, I am using the "extra" kwarg in the formset in which you can specify a number of extra blank forms for the user to fill out These extra forms don't have an image selected, and therefore are skipped by image_processing.js when it is initializing. I am trying to get image_processing.js to work when I upload a new image to these extra forms by using Javascript's new FileReader function (I took this code from a recent pull request). Any tips on how I can basically trigger a new reinit when I populate a new image? Should I just call init again?

Thanks,
Jon

Hey!
You can have multiple crops on one image. But what if I would like to have one crop and pregenerate several cached version from that crop (e.g. small thumbs for list view, medium for the detail view, large for a background image)?
Easy thumbnails manages this easily with aliases, not sure how to use one common crop though.

After following the tutorial steps I found this.

First, in the installing tutorial both images and cropping are in the same admin field. In my case, for cropping an image i have to upload it, save it, reopen the page and crop it, and save it again. I would like to upload the image, crop and save.

Looks like the app do this in the example, crop and image are together.

I attach two images:

1. The functionality I expect
   

2. This is what I have (separated crop widget)

Hope this helps

Django==1.5.1
PIL==1.1.7
South==0.8.1
argparse==1.2.1
distribute==0.6.27
django-geoposition==0.1.4
django-image-cropping==0.6.4
django-localflavor==1.0
django-modeltranslation==0.6.1
django-registration==1.0
django-social-auth==0.7.23
django-suit==0.2.1
easy-thumbnails==1.2
httplib2==0.8
ipython==0.13.2
oauth2==1.5.211
psycopg2==2.5
python-memcached==1.53
python-openid==2.2.5
wsgiref==0.1.2

Like many users of jQuery, I use the $(...) shorthand notation in my JS code. However, I noticed that in image_cropping.js there is a call to 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, I added the following JS code after importing image_cropping.js in the HEAD block of my page:

window.$ = image_cropping.$;

Perhaps you can add this line to the end of image_cropping.js so that loading that file no longer has the side-effect of unbinding $. It seems like something that would affect everyone using this plugin and wasn't mentioned in the docs as far as I could see.

Hey,

Just been struggling in getting this package implemented...
I managed to have crop through admin up and running, but having issues with implementing it in my ModelForm.

Currently it shows twice the cropping under each other on EditView and it only shows title and no cropping on CreateView... I do not have the impression I use anything funky, except crispy-forms. But even flukes when I do not apply crispy.

Running django 1.6.2 and django-image-cropping trunk.

Thanks for your help!

Considering the following models:

class GalleryItem(models.Model):
    name = models.CharField(max_length=255, null=True, blank=True)
    picture = models.ImageField(upload_to='pictures/%Y/%m/%d', blank=True)

class NewsItem(models.Model):
    title = models.CharField(max_length=255)
    picture = models.ForeignKey(GalleryItem, null=True, blank=True)
    cropping = ImageRatioField('picture__picture', '120x100')

When we try to add a new register with an empty picture (because it's not required) we get the following error:

...image_cropping/fields.pyc in initial_cropping(self, sender, instance, *args, **kwargs)
    101             if ratiofield.image_fk_field :  # image is ForeignKey
    102                 # get the imagefield
--> 103                 image = getattr(image, ratiofield.image_fk_field)
    104             if not image:
    105                 continue

AttributeError: 'NoneType' object has no attribute 'picture'

I'm using:
Django==1.6.6
django-image-cropping==0.9

Hi there,

I didn't see an option to allow an arbitrary crop size or a one axis fixed size of the selection box - any plans to include that too?

e.g.:

cropping_free = ImageRatioField('image', '')
cropping_fixed_x = ImageRatioField('image', '150x')
cropping_fixed_y = ImageRatioField('image', 'x200')

Cheers,
Robert

Hi, following your instructions the thumbnail preprocessor fails to follow the box settings.

My images are uploaded into S3. Might there be a problem with this set-up/Do you have experience in this set-up?

Regards
Michael

The documentation only shows how to get a thumbnail image on django template.

I'm trying to display the thumbnails in admin list_display. Is it possible to return the thumbnail image path in python code using the image and cropping fields?

Thank you

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. I'm not comfortable with the above approach because it could easily break if you release a new version of the app in which calling image_cropping.init() multiple times on the same page causes errors.

Hi guys,

I am using django 1.7. and its migrations. I did following steps:

1. Added 2 fields into my existing model
   company_logo = models.ImageField(null=True, blank=True, upload_to='logos')
   company_small_logo = ImageRatioField('company_logo', '150x150')
2. Ran makemigrations and it asked me to enter default value for company_small_logo.
3. After I ran migrate command it showed following error:
   django.db.utils.IntegrityError: table__new.company_small_logo may not be NULL

Actually, I managed to add ImageRatioField into new Model with zero rows, but all my attempts to extend the table with ImageRatioField failed.
Adding 'null':True into field_kwargs in ImageRatioField.init method helped to solve the issue.
Can you check this issue? Did I miss something that I had experienced integrityerror?

Thank you,
Peter

I see that there is many cached images when we're cropping the photo. I have a couple of questions:

1. How can we clean it?
2. How can we delete the old photo in the image field when we change it to a new file? I guess It should be there

Thank you

Hi,

easy_thumbnails should be installed as a dependency as django-image-cropping doesn't work without it at all. If that's not possible (e.g. because a different version is needed for different python versions) then at least add it to the install documentation (to the pip install line). Though automatic install would be the best.

I've got everything working perfectly locally, but it breaks in our staging environment, where the get_thumbnailer method returns a url to an image that never made it to our s3 bucket. For example, profile_image.jpg will be in our bucket but not profile_image.jpg.430x360_q85_box-177%2C0%2C383%2C206_crop_detail.jpg, which is the get_thumbnailer generated url.

I'm trying to dig into the code now to see what's going on but thought I'd post it here in case you have any ideas.

Hello,

I've followed along with the tutorial and am unable to get the cropper to load with my application.

I have added easy_thumbnails and image_cropping to my settings.py along with THUMBNAIL_PROCESSOR snippet provided in the setup

My environment:

PYTHON PACKAGES

pytz==2012d

DJANGO

django==1.6.4
django-shop==0.2.0
jsonfield==0.9.20
south==0.8.4
django-reversion==1.8.0
django-wysiwyg==0.5.1
django-tinymce==1.5.2
django-image-cropping==0.8.2

CACHING

django-memcached==0.1.2

DJANGO CMS DEPENDENCIES

django-cms==3.0.1
django-classy-tags==0.5.1
django-mptt==0.6.0
django-sekizai==0.7
html5lib==0.999
djangocms-admin-style==0.2.2
djangocms-text-ckeditor==2.1.4
djangocms-snippet==1.0.2
djangocms-style==1.3
djangocms-link==1.3.4
djangocms-file==0.0.1
djangocms-flash==0.0.2
djangocms-googlemap==0.0.5
djangocms-picture==0.0.2
cmsplugin-htmlsitemap==0.1.3
djangocms-video==0.0.1
djangocms-teaser==0.0.1
djangocms-stacks==0.2.3
Django-Select2==4.2.2

DJANGO REST

djangorestframework==2.3.12
markdown==2.3.1
django-filter==0.7
django-picklefield

AMAZON S3 STORAGE

django-s3-folder-storage==0.2

IMAGE HANDLING

sorl-thumbnail==11.12
easy_thumbnails==1.4
Pillow==2.4.0
django-filer==0.9.4
cmsplugin-filer==0.9.5
django-fancy-autocomplete==0.1a1
imagestore==2.7.6
cmsplugin_gallery==0.5.5
django-tagging==0.3.2
six==1.6.1

SEARCH

haystack==0.15
django-haystack==1.2.7

My Models.py:

from django.db import models
from image_cropping import ImageRatioField
import uuid
import os.path

def generate_filename(instance, filename):
f, ext = os.path.splitext(filename)
return 'images/case_studies/' + '%s%s' % (uuid.uuid4().hex, ext)

def generate_filename2(instance, filename):
f, ext = os.path.splitext(filename)
return 'images/case_studies/filmstrip/' + '%s%s' % (uuid.uuid4().hex, ext)

class CaseStudy(models.Model):
title = models.CharField(max_length=50, blank=False)
short_description = models.CharField(max_length=255)
long_description = models.TextField(blank=True)
image = models.ImageField(blank=True, null=True, upload_to=generate_filename)
cropping = ImageRatioField('image', '575x385', size_warning=True, allow_fullsize=True)
date_added = models.DateTimeField(blank=False, auto_now_add=True)
date_updated = models.DateTimeField(auto_now_add=True)
class Meta:
db_table = 'case_study'
verbose_name = 'Case Study'
verbose_name_plural = 'Case Studies'

My Admin.py

from django.contrib import admin
from .models import ImageSlider as Image
from image_cropping import ImageCroppingMixin

class CaseStudyAdmin(ImageCroppingMixin, admin.ModelAdmin):
pass

admin.site.register(CaseStudy, CaseStudyAdmin)

Any help would be appreciated on what I might be doing wrong???

Hi,
I am using the django-image-cropping widget to allow users to upload an image.
However, I would also like to let them easily choose from several static images.
Is there a way to programmatically (either client-side or server-side) load a static resource image into the widget/model field ?
Cropping is not critical in that case (meaning if selecting static image, no cropping is required)
Thank you so much for this widget

Installed django-image-cropping on an existing Django 1.7.4 / Python 3.4 project that had easy_thumbnails installed. Settings are verbatim to the docs for installed apps, processors, etc.

My model is defined as:

class Profile(models.Model):
    uuid = UUIDField(auto=True)

    image = ImageCropField(upload_to=get_profile_upload_to, blank=True, null=True,
        help_text='Must be jpg, png or gif.')
    image_cropping = ImageRatioField('image', '200x200')

my form is:

class ProfileForm(forms.ModelForm):

    class Meta:
        exclude = ('user', 'is_active',)
        model = Profile

When I:

print(form.media)

in my view:

@login_required
def preferences(request):
    profile = Profile.get_profile(request)
    form = ProfileForm(request.POST or None, request.FILES or None, instance=profile)

    if request.method == 'POST':
        if form.is_valid():
            form.save()
            messages.success(request, 'Your preferences have been updated.')
            return HttpResponseRedirect(reverse('accounts:profile_home'))

    return render(request, 'accounts/preferences.html',
        {'profile': profile, 'form': form, 'active_nav': 'edit'})

I do not get:

<link href="/static/image_cropping/css/jquery.Jcrop.min.css" type="text/css" media="all" rel="stylesheet" />
<link href="/static/image_cropping/css/image_cropping.css" type="text/css" media="all" rel="stylesheet" />
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/image_cropping/js/jquery.Jcrop.min.js"></script>
<script type="text/javascript" src="/static/image_cropping/image_cropping.js"></script>

as shown in the example application. Even when I add the CSS and JavaScript by hand, the cropping fields aren't being shown with their respective widgets. Instead when I save the form, my view is just redirecting as it did previously.

What am I missing here? Not to be rude, but literally nothing happens with this application installed. I can see no differences in my installed libraries, Django or Python version (virtualenv is identical), nor my models or forms, templatetags, etc, yet somehow the example application magically works.

Is there a way to enable crop for only width or height or for both?

With options like free_crop=( widthOnly, heightOnly or both )

The new version of jCrop is compatible with the new jQuery, but I am guessing that the API has changed because when I tried swapping it in, the cropping django widget stopped working. Perhaps you could simply manually merge in this jCrop commit with your version of jCrop to solve the problem...

I follow the steps list on the page and do the migration job for the project. But when I open the backend, i can only see the original image backend admin.

Hi,

Even when I start your example application I don't see cropping field in admin edit page (display: none in HTML). I tried to understand .js code and think, that it happens here:
// skip this image if it's empty and hide the whole field, within admin and by itself
if (!$image_input.length || $image_input.data('thumbnail-url') === undefined) {
$this.hide().parents('div.form-row:first').hide();
return;
}
In my last project all worked fine but now it doesn't. Can you help me?

I understand that it is possible to use easy_thumbnails 'thumbnail' tag instead of 'cropped_thumbnail' like showed here https://django-image-cropping.readthedocs.org/en/latest/#frontend but it would be nice if cropped_thumbnail accepted a registered easy_thumbnails alias too.

Something like

{% cropped_thumbnail yourmodelinstance "ratiofieldname" alias=alias_name %}

See here https://github.com/SmileyChris/easy-thumbnails/blob/master/easy_thumbnails/templatetags/thumbnail.py#L82

Hi!
When I use django-image-cropping on my admin the preview area inside the field distorts, check ss pls: http://prntscr.com/1hd0et

Hello everybody, i installed and configured package into my application, but it's doesn't work. I hope you can help me. Thanks.

models.py

from image_cropping import ImageRatioField, ImageCropField
from django.db import models
from django.contrib.auth.models import User

class UserInfo(models.Model):
    ...
    user = models.OneToOneField(User, related_name='user', verbose_name='User Info', primary_key=True)
    photo = ImageCropField(upload_to=upload_to, verbose_name='Аватар', null=True)
    photo_cropping = ImageRatioField('photo', '100x100')
    ...

admin.py

from image_cropping import ImageCroppingMixin
from .models import UserInfo

class UserAdmin(ImageCroppingMixin, UserAdmin):
    ...

forms.py

from cabinet.models import UserInfo

class UserInfoForm(forms.ModelForm):
    class Meta:
        model = UserInfo
        fields = ('photo', 'photo_cropping')

in html

{% load cropping thumbnail %}
<img style="width: 100%;" src="{% thumbnail request.user.user.photo 100x100 box=request.user.user.photo_cropping crop detail %}" alt="User avatar"/>

settings.py

INSTALLED_APPS = (
    ...
    'image_cropping',
    'easy_thumbnails',
)

...
from easy_thumbnails.conf import Settings as Thumbnail_settings
THUMBNAIL_PROCESSORS = (
    'image_cropping.thumbnail_processors.crop_corners',
) + Thumbnail_settings.THUMBNAIL_PROCESSORS

Without exceptions, without errors, just doesn't work...

Adding a preview of the selected area should be a nice and simple addition:
http://odyniec.net/projects/imgareaselect/examples-callback.html#selection-area-preview

First of all, sorry for asking here but I didn't fin another way to ask you.

In the description you say "The original images are kept intact and only get cropped when they are displayed", so my question is: ¿the image is cropped on every request (in which the image is displayed) or there is some sort of cache (not cropped if the cropped version already exist)?

I can't manage to get django-image-cropping to run. After installation and configuration of my settings.py file, I'm getting the following error:

ImportError: Settings cannot be imported, because environment variable DJANGO_SETTINGS_MODULE is undefined.

I am trying to put the image into the form page, but I can't.

I am using this code:

forms.py:

from image_cropping import ImageCropWidget

class UserEditForm(forms.ModelForm):

class Meta:
    model = UserProfile
    fields = ( 'image')
    widgets = {
           'image': ImageCropWidget,
    }

html file:

While installing:

pip install django-appconf==0.6
Downloading/unpacking django-appconf==0.6
  Could not find a version that satisfies the requirement django-appconf==0.6 (from versions: 1.0.1, 1.0.1)
Cleaning up...
No distributions matching the version for django-appconf==0.6
Storing debug log for failure in ~/.pip/pip.log

when i crop an image its show a difrant crop when i show the image

Easy thumbnails can send a signal to pregenerate thumbnails. How could this work with django image cropping?