misc: improve list as images rendering (#81010)

tests/form_pages/test_item_field.py

@@ -1559,6 +1559,14 @@ def test_form_item_with_card_image_data_source(pub, http_requests):
     resp = app.get('/test/')
 
     assert len(resp.pyquery('div.RadiobuttonsWithImagesWidget')) == 1
+    assert (
+        '--image-desktop-width: 150px;--image-desktop-height: 150px'
+        in resp.pyquery('div.RadiobuttonsWithImagesWidget').attr['style']
+    )
+    assert (
+        '--image-mobile-width: 75px;--image-mobile-height: 75px;'
+        in resp.pyquery('div.RadiobuttonsWithImagesWidget').attr['style']
+    )
     assert len(resp.pyquery(':not(template) > label > img.item-with-image--picture')) == 3
 
     assert TransientData.count() == 3

wcs/fields/item.py

@@ -26,7 +26,6 @@ from wcs.qommon.form import (
     CheckboxWidget,
     ComputedExpressionWidget,
     HiddenWidget,
-    IntWidget,
     JsonpSingleSelectWidget,
     MapMarkerSelectionWidget,
     RadiobuttonsWidget,
@@ -60,20 +59,32 @@ class ItemWithImageFieldMixin:
     image_mobile_size = 75
 
     def fill_image_options_admin_form(self, form, **kwargs):
+        def validate_image_size(value):
+            if value.isnumeric():
+                return
+            elif 'x' in value:
+                width, height = value.split('x')
+                if not (width.isnumeric() and height.isnumeric()):
+                    raise ValueError(_('Wrong format'))
+            else:
+                raise ValueError(_('Wrong format'))
+
         form.add(
-            IntWidget,
+            StringWidget,
             'image_desktop_size',
             title=_('Image size on desktop'),
             value=self.image_desktop_size,
+            validation_function=validate_image_size,
             hint=_('In pixels.'),
             **kwargs,
         )
 
         form.add(
-            IntWidget,
+            StringWidget,
             'image_mobile_size',
             title=_('Image size on mobile'),
             value=self.image_mobile_size,
+            validation_function=validate_image_size,
             hint=_('In pixels.'),
             **kwargs,
         )

wcs/qommon/static/css/item-with-image.scss

@@ -1,11 +1,13 @@
 .CheckboxesWithImagesWidget, .RadiobuttonsWithImagesWidget {
 	.content {
-		--image-size: var(--image-mobile-size);
+		--image-width: var(--image-mobile-width);
+		--image-height: var(--image-mobile-height);
 		display: flex;
 		flex-wrap: wrap;
 		margin-top: 5px;
 		@media (min-width: 761px) {
-			--image-size: var(--image-desktop-size);
+			--image-width: var(--image-desktop-width);
+			--image-height: var(--image-desktop-height);
 		}
 		&:focus-within {
 			outline: 1px dashed var(--primary-color, #bbb);
@@ -34,10 +36,10 @@
 .item-with-image {
 	box-sizing: content-box;
 	padding: 10px;
-	flex: 0 0 var(--image-size);
+	flex: 0 0 var(--image-width);
 	display: grid;
 	grid-template-columns: auto 1fr;
-	grid-template-rows: max-content auto;
+	grid-template-rows: var(--image-height) auto;
 	grid-row-gap: 5px;
 	grid-template-areas:
 		"picture picture"
@@ -47,7 +49,8 @@
 	&--picture {
 		margin-bottom: 5px;
 		grid-area: picture;
-		width: var(--image-size);
+		width: var(--image-width);
+		height: var(--image-height);
 		object-fit: contain;
 		object-position: bottom;
 	}

wcs/qommon/templates/qommon/forms/widgets/checkboxes-with-images.html

@@ -1,8 +1,7 @@
 {% extends "qommon/forms/widgets/checkboxes.html" %}
 
 {% block widget-style-attributes %}
-  --image-desktop-size: {{ widget.field.image_desktop_size }}px;--image-mobile-size: {{ widget.field.image_mobile_size }}px;
-  {{ block.super }}
+  {% if widget.field.image_desktop_size %}--image-desktop-width: {{ widget.field.image_desktop_size|split:'x'|first }}px;--image-desktop-height: {{ widget.field.image_desktop_size|split:'x'|last }}px;{% endif %}{% if widget.field.image_mobile_size %}--image-mobile-width: {{ widget.field.image_mobile_size|split:'x'|first }}px;--image-mobile-height: {{ widget.field.image_mobile_size|split:'x'|last }}px;{% endif %}{{ block.super }}
 {% endblock %}
 
 {% block widget-control %}

wcs/qommon/templates/qommon/forms/widgets/radiobuttons-with-images.html

@@ -1,8 +1,7 @@
 {% extends "qommon/forms/widgets/radiobuttons.html" %}
 
 {% block widget-style-attributes %}
-  --image-desktop-size: {{ widget.field.image_desktop_size }}px;--image-mobile-size: {{ widget.field.image_mobile_size }}px;
-  {{ block.super }}
+  {% if widget.field.image_desktop_size %}--image-desktop-width: {{ widget.field.image_desktop_size|split:'x'|first }}px;--image-desktop-height: {{ widget.field.image_desktop_size|split:'x'|last }}px;{% endif %}{% if widget.field.image_mobile_size %}--image-mobile-width: {{ widget.field.image_mobile_size|split:'x'|first }}px;--image-mobile-height: {{ widget.field.image_mobile_size|split:'x'|last }}px;{% endif %}{{ block.super }}
 {% endblock %}
 
 {% block widget-control %}