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.
Project description
clean-image-crop-uploader (CICU)
================================
``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 croped.
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
------------
* jQuery = 1.8.3
* Twitter-Bootstrap
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 CicuUploderInput
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': CicuUploderInput(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="{{ STATIC_URL }}css/bootstrap.css" rel="stylesheet" type="text/css"/>
<script src="{{ STATIC_URL }}js/bootstrap.js"></script>
{{ form.media }}
....
</head>
Run the example
---------------
The Example is available only in github repository: https://github.com/asaglimbeni/clean-image-crop-uploader/tree/master/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/>
================================
``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 croped.
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
------------
* jQuery = 1.8.3
* Twitter-Bootstrap
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 CicuUploderInput
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': CicuUploderInput(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="{{ STATIC_URL }}css/bootstrap.css" rel="stylesheet" type="text/css"/>
<script src="{{ STATIC_URL }}js/bootstrap.js"></script>
{{ form.media }}
....
</head>
Run the example
---------------
The Example is available only in github repository: https://github.com/asaglimbeni/clean-image-crop-uploader/tree/master/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/>
Project details
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Close
Hashes for clean-image-crop-uploader-0.2.2.tar.gz
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | c713b8534acb46018ec19e6eae5fb67d2c981e8018f016cbcc7658383996765f |
|
| MD5 | f1c7401b943fbae11bfa096f24c0f684 |
|
| BLAKE2b-256 | 664c0fb2ec5245a5523e361411fa6435faa16c3d538007e3ff66f30d2b795588 |
