Settings¶

Settings related to the package were included in a dict named DJANGO_GALLERY_FIELD_CONFIG.

DJANGO_GALLERY_FIELD_CONFIG¶

Default:

{
    "assets": {
        "jquery.js": "jquery/dist/jquery.min.js",
        "jquery-ui.js": "jquery-ui-dist/jquery-ui.min.js",
       ...
        "extra_js": [],
        "extra_css": [],
    },

    "thumbnails": {
        "size": "120x120",
        "quality": 80
    },

    "widget_hidden_input_css_class": "django-galleryfield",
    "prompt_alert_if_changed_on_window_reload": True,
    "jquery_file_upload_ui_options": {
        "autoUpload": False,
        "imageMaxWidth": 1024,
        "imageMaxHeight": 1024,
        ...
    }
}

See details below.

assets¶

Default:

{

    "jquery.js": "jquery/dist/jquery.min.js",
    "jquery-ui.js": "jquery-ui-dist/jquery-ui.min.js",
    ...
    "extra_js": [],
    "extra_css": []
}

The first part is the static assets required to render the galleryfield.widgets.GalleryWidget. The value includes 2 parts. The second part, i.e., extra_js and extra_css allow user to add customized static files when customize the rendering of the widget. The first part is the static assets required to render the galleryfield.widgets.GalleryWidget. The default value for this part is listed in galleryfield.defaults.DEFAULT_ASSETS.

galleryfield.defaults.DEFAULT_ASSETS¶: dict: The default assets used to render the GalleryWidget instance.

DEFAULT_ASSETS = {
    # js assets
    "jquery.js": "jquery/dist/jquery.min.js",
    "jquery-ui.js": "jquery-ui-dist/jquery-ui.min.js",
    "jquery.ui.widget.min.js":
        "blueimp-file-upload/js/vendor/jquery.ui.widget.js",
    "blueimp-tmpl.js":
        "blueimp-tmpl/js/tmpl.min.js",
    "load-image.all.min.js":
        "blueimp-load-image/js/load-image.all.min.js",
    "blueimp-canvas-to-blob.js":
        "blueimp-canvas-to-blob/js/canvas-to-blob.min.js",
    "bootstrap.js":
        "bootstrap/dist/js/bootstrap.min.js",
    "jquery.iframe-transport.js":
        "blueimp-file-upload/js/jquery.iframe-transport.js",
    "jquery.fileupload.js": "blueimp-file-upload/js/jquery.fileupload.js",
    "jquery.fileupload-process.js":
        "blueimp-file-upload/js/jquery.fileupload-process.js",
    "jquery.fileupload-image.js":
        "blueimp-file-upload/js/jquery.fileupload-image.js",
    "jquery.fileupload-audio.js":
        "blueimp-file-upload/js/jquery.fileupload-audio.js",
    "jquery.fileupload-video.js":
        "blueimp-file-upload/js/jquery.fileupload-video.js",
    "jquery.fileupload-validate.js":
        "blueimp-file-upload/js/jquery.fileupload-validate.js",
    "jquery.fileupload-ui.js":
        "blueimp-file-upload/js/jquery.fileupload-ui.js",
    "jquery.blueimp-gallery.js":
        "blueimp-gallery/js/jquery.blueimp-gallery.min.js",
    "blueimp-gallery-fullscreen.js":
        "blueimp-gallery/js/blueimp-gallery-fullscreen.js",
    "blueimp-gallery-indicator.js":
        "blueimp-gallery/js/blueimp-gallery-indicator.js",
    "cropper.js": "cropper/dist/cropper.min.js",

    # css assets
    "bootstrap.css": "bootstrap/dist/css/bootstrap.min.css",
    "jquery-ui.theme.css": "jquery-ui-dist/jquery-ui.theme.min.css",
    "jquery.fileupload.css": "blueimp-file-upload/css/jquery.fileupload.css",
    "jquery.fileupload-ui.css":
        "blueimp-file-upload/css/jquery.fileupload-ui.css",
    "blueimp-gallery.css": "blueimp-gallery/css/blueimp-gallery.min.css",
    "blueimp-gallery-indicator.css":
        "blueimp-gallery/css/blueimp-gallery-indicator.css",
    "font-awesome.css": "font-awesome/css/font-awesome.min.css",
    "cropper.css": "cropper/dist/cropper.min.css",
}

Warning

This project relies heavily on CSS and JS frameworks/packages, so we strongly suggest using django-npm to manage the static assets for convenience. If you have other options, for example, not willing to have a local copy of those assets, you need to make sure ALL the items in galleryfield.defaults.DEFAULT_ASSET properly configure in this setting and can be accessed properly.

BTW, trying to ignore some commonly used framework such as Bootstrap (because you already has it in your instance) will result in failure in rendering the widget in Admin.

thumbnails¶

Default:

"thumbnails": {
    "size": "120x120",
    "quality": 80
},

We use sorl.thumbnail to generate the thumbnails in the project. The term size correspond to geometry in sorl.thumbnail. Currently, we accept the following format of size:

'120x80'
(120, 80)  # same as '120x80'
('120', '80')  # same as '120x80'
[120, 80]  # same as '120x80'
['120', '80'] # same as '120x80'
120  # same as '120x120'

The size can be overridden when initializing galleryfield.widgets.GalleryWidget via thumbnail_size.

For quality, please refer to quality option in sorl.thumbnail.

jquery_file_upload_ui_options¶

The default value is listed in galleryfield.defaults.JQUERY_FILE_UPLOAD_UI_DEFAULT_OPTIONS.

galleryfield.defaults.JQUERY_FILE_UPLOAD_UI_DEFAULT_OPTIONS¶: dict: The default options for jQuery-File-Upload module.

JQUERY_FILE_UPLOAD_UI_DEFAULT_OPTIONS = {
    "autoUpload": False,
    "imageMaxWidth": 1024,
    "imageMaxHeight": 1024,
    "loadImageFileTypes": r"/^image\/(gif|jpeg|png|bmp|svg\+xml)$/",
    "sequentialUploads": "true",
    "acceptFileTypes": r"/(\.|\/)(png|gif|bmp|jpe?g)$/i",
    "imageOrientation": True,
    "maxFileSize": 1.5 * 1024 ** 2,  # 1.5Mb
    "minFileSize": 0.0001 * 1024 ** 2,  # 0.0001Mb
    "disableImageResize": "/Android(?!.*Chrome)|Opera/.test(window.navigator "
                          "&& navigator.userAgent)",
}

The value can be overridden when initializing galleryfield.widgets.GalleryWidget via jquery_file_upload_ui_options. Please refer to available options for the details and more options.

Warning

Options previewMaxWidth and previewMaxHeight were ignored in favor of thumbnail settings. Option maxNumberOfFiles will be ignored and should be configured in the formfield. See example in galleryfield.fields.GalleryFormField. Options fileInput, paramName and singleFileUploads were also ignored (overridden).