Skip to content

Clean Image Crop Uploader (CICU) provides AJAX file upload and image CROP functionalities for ImageFields with a simple widget replacement in the form. It use Modal from twitter-bootstrap.

License

Notifications You must be signed in to change notification settings

mborsz/clean-image-crop-uploader

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

30 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

clean-image-crop-uploader (CICU)

https://d2weczhvl823v0.cloudfront.net/asaglimbeni/django-datetime-widget/trend.png https://pypip.in/v/clean-image-crop-uploader/badge.png https://pypip.in/d/clean-image-crop-uploader/badge.png

clean-image-crop-uploader is a django widget to upload an image via Ajax and crop it using Jcrop. It provides a simple workflow: first one, using modal, (by twitter bootstrap) the image can be uploaded and cropped. Second one, you can see the image cropping preview in the form and finally submit the result.

clean-image-crop-uploader is perfect when you use an ImageField on your model where is necessary to have a specific portion of image. It's easy to configure and to use. You can use different configurations , with fixed aspect ratio or minimal image size.

It works with jQuery = 1.8.3 and twitter bootstrap.

Screenshot:

  1. Modal window with upload button:

http://asaglimbeni.github.com/clean-image-crop-uploader/images/screenshot1.jpg

  1. Modal window with crop area:

http://asaglimbeni.github.com/clean-image-crop-uploader/images/screenshot2.jpg

  1. Form with preview

http://asaglimbeni.github.com/clean-image-crop-uploader/images/screenshot3.jpg

Installation

  1. Install django-image-cropping using pip. For example:

    pip install clean-image-crop-uploader
    
  2. Add south and cicu to your INSTALLED_APPS.

  3. run migrate commando to your django project:

    python manage.py migrate
    

Dependencies

  • jQuery = 1.8.3
  • Twitter-Bootstrap

Configuration

  1. Add into url.py

    (r'^ajax-upload/', include('startproject.cicu.urls'))
    
  2. Create your model-form and set CicuUploaderInput widget to your imageField

    from cicu.widgets import CicuUploaderInput
    
    class yourCrop(forms.ModelForm):
        class Meta:
            model = yourModel
            cicuOptions = {
                'ratioWidth': '600',       #fix-width ratio, default 0
                'ratioHeight':'400',       #fix-height ratio , default 0
                'sizeWarning': 'False',    #if True the crop selection have to respect minimal ratio size defined above. Default 'False'
            }
            widgets = {
                'image': CicuUploaderInput(options=cicuOptions)
            }
    
  3. Download twitter bootstrap to your static file folder.

  4. Add in your form template links to jquery, bootstrap, form.media:

    <head>
    ....
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <link href="{{ STATIC_URL }}css/bootstrap.css" rel="stylesheet" type="text/css"/>
        <script src="{{ STATIC_URL }}js/bootstrap.js"></script>
        {{ form.media }}
    
    ....
    </head>
    

Run the example

To run the example inside this package follow these commands:

> cd ./example/
> python manage.py syncdb
> python manage.py migrate # only if you use South!!!
> python manage.py collectstatic
> python manage.py runserver domain:8000

Go to examples :

  1. Free crop : <http://domain:8000/cicu-freecrop/>
  2. Fixed aspect ratio: <http://domain:8000/cicu-fixedratio/>
  3. Fixed aspect ratio with minimal size: <http://domain:8000/cicu-warningsize/>

About

Clean Image Crop Uploader (CICU) provides AJAX file upload and image CROP functionalities for ImageFields with a simple widget replacement in the form. It use Modal from twitter-bootstrap.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 71.0%
  • Python 23.1%
  • CSS 5.9%