setting: Add Image Ratio Buttons (981)

Author: glanzel

meinberlin/assets/extra_css/_ckeditor.scss

@@ -258,3 +258,37 @@
 .ck-content .text-huge {
     font-size: 1.8em;
 }
+
+.ck-content::after {
+  content: "";
+  display: block;
+  clear: both;
+}
+
+
+/* Custom Image Aspect Ratio Styles */
+
+/* 4:3 Aspect Ratio Container */
+.ck-content figure.image-aspect-ratio-43 {
+    max-width: 50%;
+    
+    img {
+        aspect-ratio: 4/3 !important;
+        width: 100% !important;
+        height: 100% !important;
+        object-fit: cover;
+        object-position: center;
+    }
+}
+
+/* 2:1 Aspect Ratio Container */
+.ck-content figure.image-aspect-ratio-21 {
+  min-width: 100%;
+  img {
+      aspect-ratio: 2/1 !important;
+      width: 100% !important;
+      height: 100% !important;
+      object-fit: cover;
+      object-position: center;
+    }
+}

meinberlin/config/settings/base.py

@@ -614,11 +614,26 @@
                 "imageStyle:inline",
                 "imageStyle:wrapText",
                 "imageStyle:breakText",
+                "imageStyle:side",
                 "imageStyle:alignLeft",
                 "imageStyle:alignRight",
+                "imageAspectRatio43",
+                "imageAspectRatio21",
             ],
             "insert": {"type": "auto"},
         },
+        "htmlSupport": {
+            "allow": [
+                {
+                    "name": "figure",
+                    "classes": [
+                        "image",
+                        "image-aspect-ratio-43",
+                        "image-aspect-ratio-21",
+                    ],
+                }
+            ]
+        },
         "list": {
             "properties": {
                 "styles": "true",
@@ -663,9 +678,23 @@
                 "imageStyle:breakText",
                 "imageStyle:alignLeft",
                 "imageStyle:alignRight",
+                "imageAspectRatio43",
+                "imageAspectRatio21",
             ],
             "insert": {"type": "auto"},
         },
+        "htmlSupport": {
+            "allow": [
+                {
+                    "name": "figure",
+                    "classes": [
+                        "image",
+                        "image-aspect-ratio-43",
+                        "image-aspect-ratio-21",
+                    ],
+                }
+            ]
+        },
         "list": {
             "properties": {
                 "styles": "true",

requirements/base.txt

@@ -21,7 +21,7 @@ zeep==4.3.1
 celery==5.4.0
 django-allauth==0.61.1
 django-autoslug==1.9.9
-https://github.com/liqd/django-ckeditor-5/releases/download/v0.2.13-liqd/django_ckeditor_5-0.2.13-py3-none-any.whl
+https://raw.githubusercontent.com/liqd/django-ckeditor-5/gg_2025_10_picture_upload/dist/django_ckeditor_5-0.2.14-py3-none-any.whl
 django-filter==24.3
 django-widget-tweaks==1.5.0
 Django==4.2.22

requirements/dev.txt

@@ -7,7 +7,7 @@ Faker==33.1.0
 flake8==7.1.1
 freezegun==1.5.1
 isort==5.13.2
-psycopg[binary]==3.1.18
+psycopg[binary]==3.2.3
 pytest==8.3.4
 pytest-cov==6.0.0
 pytest-django==4.9.0