Coder Social home page Coder Social logo

Comments (13)

jonasvp avatar jonasvp commented on June 15, 2024

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...

from django-image-cropping.

tiwei avatar tiwei commented on June 15, 2024

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!

from django-image-cropping.

jonasvp avatar jonasvp commented on June 15, 2024

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!

from django-image-cropping.

tiwei avatar tiwei commented on June 15, 2024

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!

from django-image-cropping.

tiwei avatar tiwei commented on June 15, 2024

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.

from django-image-cropping.

jonasvp avatar jonasvp commented on June 15, 2024

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

from django-image-cropping.

avatar commented on June 15, 2024

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

from django-image-cropping.

jonasvp avatar jonasvp commented on June 15, 2024

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.

from django-image-cropping.

avatar commented on June 15, 2024

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:

<script type="text/javascript"> window.$ = image_cropping.$; </script>

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

from django-image-cropping.

jonasvp avatar jonasvp commented on June 15, 2024

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!

from django-image-cropping.

avatar commented on June 15, 2024

Done :)

from django-image-cropping.

georgikoyrushki95 avatar georgikoyrushki95 commented on June 15, 2024

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.

from django-image-cropping.

jonathan-daniel avatar jonathan-daniel commented on June 15, 2024

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

from django-image-cropping.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.