{% comment %} NOTE: Drag and drop support has been removed for now, this file is kept for reference on the old implementation / assets DOCS: https://html.spec.whatwg.org/multipage/embedded-content.html#introduction-3:viewport-based-selection-2 the browser assumes size="100vw" by default, which means "assume this image will be displayed at full width on the current viewport and pick an image from srcset accordingly". {# only load js and css required for dnd upload if toolbar is available #} {% if request.toolbar and request.toolbar.show_toolbar and request.toolbar.edit_mode %} {% addtoblock "css" %}{% endaddtoblock %} {% addtoblock "js" %}{% endaddtoblock %} {% addtoblock "js" %}{% endaddtoblock %} {% endif %} {% endcomment %} {% comment %} # attached before the image {% if request.toolbar and request.toolbar.show_toolbar and request.toolbar.edit_mode %} {% if has_dnd_support %} {% endif %} {% endif %} # attached after the image {% if request.toolbar and request.toolbar.show_toolbar and request.toolbar.edit_mode %} {% if has_dnd_support %} {% endif %}{# has_dnd_support #} {% endif %} # attached to the css {% if request.toolbar and request.toolbar.show_toolbar and request.toolbar.edit_mode %}js-original-image {% endif %} {% endcomment %} {% comment %} The raw image (original image) can be accessed via: * {{ instance.file.url }} There are additional parameters available for thumbnailing purposes: * {{ instance.srcset.lg }} large * {{ instance.srcset.md }} medium * {{ instance.srcset.sm }} small * {{ instance.srcset.xs }} extra small Example: {% thumbnail instance.file instance.srcset.lg.size ... %} In addition, an iterable object is available via ``instance.srcset.items`` to access all size settings at once. Example: {% for device, src in instance.srcset.items %} {% endcomment %}