ImageKit génère automatiquement des vignettes depuis ImageField dans Django

À propos de l'utilisation d'images avec Django.

ImageField

Django peut définir un champ appelé ImageField. Il s'agit d'un champ qui hérite de FileField.

Pour une utilisation détaillée http://qiita.com/kojionilk/items/da20c732642ee7377a78 C'est très bien organisé ici.

Cependant, si vous souhaitez simplement supprimer le fichier lors de la suppression de l'enregistrement,

models.py

model.objects.delete(False)

Il semble que cela devrait être fait.

https://docs.djangoproject.com/en/1.10/ref/models/fields/#django.db.models.fields.files.FieldFile.delete

Je ne savais même pas.

ImageKit

Désormais, lorsque vous travaillez avec des images sur le Web, il ne suffit pas d'enregistrer. Il est nécessaire de préparer des images de différentes qualités et tailles d'image telles que des miniatures et de grandes images.

Cependant, il est difficile de le faire soi-même ...

C'est pourquoi Imagekit est là.

https://github.com/matthewwithanm/django-imagekit

console

pip install -U django-imagekit

Vous pouvez l'installer avec.

Oreiller est nécessaire, donc si vous ne l'avez pas installé

console

pip install -U Pillow

Faisons le.

Ajoutez ʻimagekit à ʻINSTALLED_APPS dans settings.py de django.

Vous pouvez maintenant l'utiliser.

Qu'est-ce qu'ImageKit?

ImageKit est un module qui convertit une image en qualité et en taille définies dans le modèle lorsque vous téléchargez un fichier.

Je pense que le processus lui-même est terminé lorsque le modèle est appelé pour la première fois.

Models.py

Définissez-le comme ça.

J'ai défini ʻImageField`, qui est le champ d'origine. Les autres champs sont les paramètres ImageKit. Définit la taille et la qualité du redimensionnement.

models.py

from django.db import models
from imagekit.models import ImageSpecField, ProcessedImageField
from imagekit.processors import ResizeToFill


class Image(models.Model):

    origin = models.ImageField(upload_to="photos/%y/%m/%d/")

    big = ImageSpecField(source="origin",
                         processors=[ResizeToFill(1280, 1024)],
                         format='JPEG'
                         )

    thumbnail = ImageSpecField(source='origin',
                            processors=[ResizeToFill(250,250)],
                            format="JPEG",
                            options={'quality': 60}
                            )

    middle = ImageSpecField(source='origin',
                        processors=[ResizeToFill(600, 400)],
                        format="JPEG",
                        options={'quality': 75}
                        )

    small = ImageSpecField(source='origin',
                            processors=[ResizeToFill(75,75)],
                            format="JPEG",
                            options={'quality': 50}
                            )

modèle

Ceci est un exemple de description du modèle.

template.html

<ul class="list-unstyled image-list">
    {% for image in image_list %}
    <li>
        <a href="{% url 'image_detail' image.id %}">
            <img src="{{ image.thumbnail.url }}" width="250">
        </a>
    </li>
    {% endfor %}
</ul>

De plus, l'image générée est

settings.py

MEDIA_ROOT = os.path.join(ROOT_DIR, "media")  #Exemple
# ROOT_DIR/media/CACHE/...

Un répertoire `` CACHE '' est créé et enregistré dans MEDIA_ROOT. Par conséquent, l'URL est également

settings.py

MEDIA_URL = "/media/"  #Exemple
# /media/CACHE/...

Il sera livré à partir de.

views.py

Ce qui est bien, c'est que views.py ne fait rien. Si vous le gardez comme d'habitude, ImageKit fera la bonne chose pour vous.

views.py

from django.views.generic import ListView

from images.models import Image


class ImageListView(ListView):
    model = Image
    context_object_name = 'image_list'

forms.py

La forme ne change pas du tout. Le formulaire de téléchargement de fichier habituel est OK.

forms.py

from django.forms import ModelForm
from images.models import Image

class UploadFileForm(ModelForm):
    class Meta:
        model = Image
        fields = ["origin", ]

Lorsque vous écrivez un formulaire dans un modèle, faites attention car il ne sera pas téléchargé si vous oubliez ʻenc type = "multipart / form-data" `. J'ai perdu quelques heures. Je l'ai fait plusieurs fois.

upload.html

{% extends 'base.html' %}

{% block content %}

<form method="POST" action="{% url 'image_upload' %}" enctype="multipart/form-data">
  {% csrf_token %}
  {% load crispy_form_tags %}
  {{ form|crispy }}

  <button class="btn btn-primary" type="submit">télécharger</button>
</form>

{% endblock %}

Résumé

Il semble y avoir d'autres champs utiles, mais je les omettrai. Je pense que lire uniquement le README sur github suffit pour l'utiliser.