@@ -0,0 +45,4 @@
+        raise TraversalError()
+
+
+class DataDirectory(Directory):

@@ -2292,2 +2293,4 @@
     position_template = None
 
+    # images options
+    columns_number = 4

@@ -0,0 +16,4 @@
+  {% endfor %}
+
+  <style>
+    .buttons-with-images .content {

@@ -0,0 +2,4 @@
+
+{% block widget-control %}
+  <style>
+    :root {

@@ -0,0 +2,4 @@
+
+{% block widget-control %}
+  <style>
+    :root {

@@ -0,0 +16,4 @@
+      type="checkbox"
+      {% if widget.readonly %}value="yes" disabled {% else %}name="{{ option.name }}" value="yes"{% endif %}
+    ><label for="{{ widget.get_name_for_id }}_op_{{ forloop.counter0 }}" style="max-width:{{ widget.field.image_desktop_width }}px">
+      {% if option.options.image_url %}<picture><img src="{{ option.options.image_url }}" title="{{ option.label }}" /></picture>{% endif %}

@@ -629,0 +635,4 @@
+		label {
+			margin-bottom: 5px;
+			padding: 10px;
+			max-width: calc(var(--image-desktop-width) - 20px);

@@ -114,0 +120,4 @@
+
+    def get_file_url(self, file_digest):
+        context = {'carddef_slug': self.formdef.url_name, 'data_id': self.id, 'file_digest': file_digest}
+        token = get_session().create_autocomplete_token(context)

@@ -114,0 +121,4 @@
+    def get_file_url(self, file_digest):
+        context = {'carddef_slug': self.formdef.url_name, 'data_id': self.id, 'file_digest': file_digest}
+        token = get_session().create_autocomplete_token(context)
+        return "/api/file/%s" % token.id

@@ -250,3 +251,2 @@
-def get_items(data_source, include_disabled=False, mode=None):
-    structured_items = get_structured_items(data_source, mode=mode, include_disabled=include_disabled)
+def get_tuppled_items(structured_items):
     tupled_items = []

@@ -2571,0 +2588,4 @@
+            'image_desktop_size',
+            title=_('Image size on desktop'),
+            value=self.image_desktop_size,
+            validation_function=ComputedExpressionWidget.validate_template,

@@ -2700,1 +2743,4 @@
 
+    # images options
+    image_desktop_size = 150
+    image_mobile_size = 75

@@ -0,0 +29,4 @@
+	&--picture {
+		margin-bottom: 5px;
+		grid-area: picture;
+		align-items: end;

@@ -0,0 +39,4 @@
+	}
+	&--input {
+		grid-area: input;
+		align-items: baseline;

@@ -431,0 +431,4 @@
+class CardFileByTokenDirectory(Directory):
+    def _q_lookup(self, component):
+        get_request().ignore_session = True
+        context = get_session().get_autocomplete_token(component).data

@@ -307,0 +310,4 @@
+    def has_image_field(self):
+        for f in self.fields:
+            if not f.key == 'file' or f.varname != 'image':
+                continue

@@ -0,0 +14,4 @@
+}
+
+.item-with-image {
+	margin-bottom: 5px;

@@ -0,0 +8,4 @@
+			--image-size: var(--image-desktop-size);
+		}
+		&:focus-within {
+			outline: 1px dashed var(--primary-color);

@@ -0,0 +17,4 @@
+  {% endfor %}
+
+{% endblock %}
+

@@ -0,0 +2,4 @@
+
+{% block widget-attrs %}
+  {{ block.super }}
+  style="--image-desktop-size: {{ widget.field.image_desktop_size }}px;--image-mobile-size: {{ widget.field.image_mobile_size }}px;"