Skip to main content

Installation

run  pip install django-html5croppingtools

Configure settings.py

Add html5croppingtools to INSTALLED_APPS

manage.py

run manage.py collectstatic

Examples

Admin example without saving original image

#models.py
class MyModel(models.Model):
    ...
    image = models.ImageField(upload_to='<upload path>')
    ...

#admin.py
....
from html5croppingtools.fields import CropImageField
from html5croppingtools.forms import CropImageFormMixin
....

class MyModelForm(CropImageFormMixin, ModelForm):
    """
    :param max_size maximum size of image width or height(depends on which is greater) in pixels
    :param width_ratio and height_ratio using this two parameters code calculates ratio
           between width and height of image and helps when selecting cropping area in admin by fixing ratio between sides
    """
    image = CropImageField(max_size=900, width_ratio=500,height_ratio=300)
    ....


@admin.register(MyModel)
class MyModelAdmin(admin.ModelAdmin):
    form = MyModel
    ....

Admin example with saving original image

...
class MyModel(models.Model):
        ...
        image = models.ImageField(upload_to='<upload path>')
        original_image = models.ImageField(upload_to='<upload path>')
        ...
...
class MyModelForm(CropImageFormMixin, ModelForm):
    """
    :param original_field name of corresponding model's field where you want to save original image
    """
    image = CropImageField(
        original_field='original_image', max_size=900,
        width_ratio=500, height_ratio=300,
    )
    ....

On the fly cropping

Add html5croppingtools.imagecrop.ImageCropMiddleware to MIDDLEWARE_CLASSES

after adding html5croppingtools.imagecrop.ImageCropMiddleware to MIDDLEWARE_CLASSES
you can add "quality=<int>&dimensions=<int x0 >x<int y0 >x<int x1 >x<int y1>" this parameters to GET querystring
and middleware will serve corresponding image cropped and resized

Middleware working steps:

  1. If “quality” is supplied, image will be resized

  2. If crop “dimensions” are supplied, image will be cropped

  3. return image

Note: “dimensions” and “quality” parameters are optional

Example

/media/image/my_image_guid.jpeg?quality=1200&dimensions=300x200x900x800

  1. middleware will resize image proportionally making It’s bigger side equal to 1200 pixels

  2. after shrinking it will crop x1=300 y1=200 x2=900 y2=800 rectangle

  3. return image

Template example

{% load croppingtools_extra %}
<img src="{% html5crop MyModel.image dimensions='100x100x300x300' quality=500 %}">

takes “ImageFiled”, “dimensions” and “quality” parameters and returns url “/media/image/my_image_guid.jpeg?quality=500&dimensions=100x100x300x300” after which middleware will serve cropped and resized image

Note: “dimensions” and “quality” parameters are optional

Metadata

Release files for django-html5croppingtools 0.1.3

For a detailed explanation of source distributions (sdists) and built distributions (wheels), please see the package formats documentation.

Source distribution (sdist)

Source distribution for django-html5croppingtools 0.1.3
File Size Uploaded
django-html5croppingtools-0.1.3.tar.gz 67.6 kB Details

Built distribution (wheel)

Table of built distributions (wheels) for django-html5croppingtools 0.1.3
File Interpreter ABI Platform
django_html5croppingtools-0.1.3-py3-none-any.whl Python 3 none any Details

Total release size: 142.5 kB

Release files / django-html5croppingtools-0.1.3.tar.gz

Download URL django-html5croppingtools-0.1.3.tar.gz
Size 67.6 kB
Tags Source
SHA-256 checksum
How to use checksums
3b91fdfc8b9bab4b6c73dd451361da6f104424aa0fbeb9e4e767a648daccb1ea
BLAKE2b-256 checksum
How to use checksums
16d560711e09d27f6283cec63c48c32c44b3018346e03f0471e2d9c2841824e9
Upload date
Uploaded using Trusted Publishing?
What is trusted publishing?
No

Release files / django_html5croppingtools-0.1.3-py3-none-any.whl

Download URL django_html5croppingtools-0.1.3-py3-none-any.whl
Size 74.9 kB
Tags Python 3
SHA-256 checksum
How to use checksums
817cc0a6054e0b7168fda3757bd69a49383ab2125766079229e49f42e34a7265
BLAKE2b-256 checksum
How to use checksums
1206b304387ef8c73f06de6ea032d23cabcead755f2378d9a6032d61966e5446
Upload date
Uploaded using Trusted Publishing?
What is trusted publishing?
No

Release history Release notifications | RSS feed

This release

0.1.3 This release

2 release files

0.1.2

0.1.1

1 release file

0.1

1 release file

Anthropic, PBC Visionary sponsor Bloomberg Visionary sponsor Hudson River Trading Visionary sponsor Meta Visionary sponsor NVIDIA Visionary sponsor Microsoft Sustainability sponsor Depot Continuous Integration AWS Cloud computing and Security Sponsor Datadog Monitoring Fastly CDN Google Download Analytics Sentry Error logging StatusPage Status page