Camomilla

# 🖼️ Use Media

Camomilla has full media management. Everything is stored in the Media model.

To attach medias to a custom model just assign a ForeignKey or a ManyToMany relation.

class MyModel(models.Model):
    image = models.ForeignKey(
        "camomilla.Media",
        blank=True,
        null=True,
        on_delete=models.SET_NULL,
    )
    gallery = models.ManyToManyField("camomilla.Media", blank=True)

Every media can be associated to a MediaFolder. The MediaFolder is a tree structure of folders (like a fs).

The media takes care of optimizing images. The optimization consists in a resize to a max width-height and to a DPI scaling. You can disable optimization or change sizes and dpi from settings:

CAMOMILLA = {
    "MEDIA": {
        "OPTIMIZE": {"MAX_WIDTH": 1980, "MAX_HEIGHT": 1400, "DPI": 30, "ENABLE": True},
    },
}

Camomilla creates also image thumbnails. You can change, thumbnails size from settings:

CAMOMILLA = {
    "MEDIA": {
        "THUMBNAIL": {"FOLDER": "", "WIDTH": 50, "HEIGHT": 50}
    },
}

# 🗂️ Media API

The media model has its own api methods to upload file.

⚠️ Beware!

Remember to add camomilla api url to your urlpatterns. You can find more info here.

# Upload new media

URL: /api/camomilla/media METHOD: POST MODE: MultipartFormData

PAYLOAD:

alt_text: Text
title: Text
description: Text
file: Multipart File
folder: Folder id

# Update existing media

URL: /api/camomilla/media/<media_id> METHOD: PUT | PATCH MODE: MultipartFormData

PAYLOAD:

alt_text: Text
title: Text
description: Text
file: Multipart File
folder: Folder id

# Get media detail

URL: /api/camomilla/media/<media_id> METHOD: GET

Response:

{
    "id": 6,
    "links": [],
    "is_image": true,
    "alt_text": null,
    "title": null,
    "description": null,
    "file": "http://mydomain.it/media/sample-image.jpg",
    "thumbnail": "http://mydomain.it/media/thumbnails/sample-image_thumb.jpg",
    "created": "2023-07-24T13:47:26.986873Z",
    "size": 680313,
    "mime_type": "image/jpeg",
    "image_props": {
        "mode": "RGB",
        "width": 1980,
        "format": "JPEG",
        "height": 1319
    },
    "folder": null
}

To navigate media you need to navigate folder structure. In the main url you will get all media and all folders without a parent folder (root elements).

URL: /api/camomilla/media-folder METHOD: GET

Response:

{
    "folders": [
        {
            "id": 1,
            "title": "Folder 1",
            "slug": "folder-1",
            "creation_date": "2023-07-31T15:17:37.612115Z",
            "last_modified": "2023-07-31T15:17:37.612173Z",
            "path": "/folder-1",
            "updir": null
        }
    ],
    "media": {
        "items": [
            {
                "id": 6,
                "is_image": true,
                "alt_text": null,
                "title": null,
                "description": null,
                "file": "http://mydomain.com/media/sample-image.jpg",
                "thumbnail": "http://mydomain.com/media/thumbnails/sample-image_thumb.jpg",
                "created": "2023-07-24T13:47:26.986873Z",
                "size": 680313,
                "mime_type": "image/jpeg",
                "image_props": {
                    "mode": "RGB",
                    "width": 1980,
                    "format": "JPEG",
                    "height": 1319
                },
                "folder": null,
            }
        ],
        "paginator": {
            "count": 1,
            "page": 1,
            "has_next": false,
            "has_previous": false,
            "pages": 1,
            "page_size": 18
        }
    },
    "parent_folder": {
        "title": "",
        "path": "",
        "updir": null
    }
}

To navigate a subfolder just add its id to the url path:

URL: /api/camomilla/media-folder/<folder_id> METHOD: GET

The media endpoint response is always paginated. The pagination is made only for media elements. For subfolder you will get always all subfolder in a folder.