search

asaglimbeni / clean-image-crop-uploader

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.
http://asaglimbeni.github.com/clean-image-crop-uploader/
Other
40 stars 36 forks source link

readme

clean-image-crop-uploader (CICU)

.. image:: https://d2weczhvl823v0.cloudfront.net/asaglimbeni/django-datetime-widget/trend.png :target: https://bitdeli.com/free .. image:: https://pypip.in/v/clean-image-crop-uploader/badge.png :target: https://crate.io/packages/clean-image-crop-uploader .. image:: https://pypip.in/d/clean-image-crop-uploader/badge.png :target: https://crate.io/packages/clean-image-crop-uploader

clean-image-crop-uploader is a django widget to upload an image via Ajax and crop it using Jcrop <https://github.com/tapmodo/Jcrop>. It provides a simple workflow: first one, using modal, (by twitter bootstrap <http://twitter.github.com/bootstrap/javascript.html#modals>) 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:

. Modal window with upload button:

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

. Modal window with crop area:

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

. Form with preview

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

Installation

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

pip install clean-image-crop-uploader

. Add south and cicu to your INSTALLED_APPS.

. run migrate commando to your django project::

python manage.py migrate

Dependencies

Configuration

. Add into url.py ::

(r'^ajax-upload/', include('startproject.cicu.urls'))

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

. Download twitter bootstrap <http://twitter.github.com/bootstrap/>_ to your static file folder.

. 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="https://github.com/asaglimbeni/clean-image-crop-uploader/blob/master/{{ STATIC_URL }}css/bootstrap.css" rel="stylesheet" type="text/css"/>
    <script src="https://github.com/asaglimbeni/clean-image-crop-uploader/raw/master/{{ 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 :

. Free crop : http://domain:8000/cicu-freecrop/

. Fixed aspect ratio: http://domain:8000/cicu-fixedratio/

. Fixed aspect ratio with minimal size: http://domain:8000/cicu-warningsize/