Move image corners into the design area

Umut on the DEEG hero image: "It should be rounded, but it was done from
somewhere, and the corners look odd. And the editor has no image corner
rounding at all, does it?"

It did have one - per block, under Design > Bild > Bildecken. What it did not
have was the 12px that enhancements.css set on .block-image for every
installation: rounded on screen, present in no field, and only removable by
overriding it on each block. On a template that is square throughout it shows,
because the elements above the image - the gradient, the sign, the blue call
to action - are square and stick out of the rounded corner.

The radius is now theme.base.imageRadius, validated like the container width,
emitted as --k-image-radius and used by the stylesheet. The default stays 12px
so existing sites look the same; 0px makes every image square. The per-block
setting still wins.

DEEG is set to 0px, in the seed script and in the installation.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
kantarciandClaude Opus 5 committed 2026-09-16 09:18:27 +02:00
1 parent a8368068aa
commit 23fdca4edb
7 files changed
+57 -3

No files matched your search

+28
View File
@@ -3111,6 +3111,34 @@ final class CmsTest extends TestCase
$code->assertScriptsUnchanged($added, $before);
}
public function testImageCornersComeFromTheDesignAreaAndCanBeSquare(): void
{
// Die Ecken jedes Bildes standen fest im Stylesheet: sichtbar gerundet, in keinem Feld
// zu finden, nur durch einen eigenen Wert am Block loszuwerden. Jetzt gehoeren sie dem
// Designbereich - mit derselben Vorgabe wie vorher, damit sich nichts veraendert.
$theme = $this->themes->load();
self::assertSame('12px', $theme['base']['imageRadius'], 'Die Vorgabe bleibt, was vorher im Stylesheet stand.');
$document = DemoContent::starter('Mit Bild');
$document['blocks'][0]['children'][] = ['id' => 'bild', 'type' => 'image', 'props' => ['src' => '/assets/image-placeholder.svg', 'alt' => 'Platzhalter', 'decorative' => false, 'width' => 1000, 'height' => 600]];
$id = $this->publishedPage('ecken', 'Ecken');
$stand = $this->pages->findForEditor($id);
$this->pages->publish($id, $this->pages->saveDraft($id, $document, $stand['version']), $this->pages->findForEditor($id)['version']);
self::assertStringContainsString('--k-image-radius:12px', $this->request('/ecken')->getContent());
// Eckig, wie es eine Vorlage ohne Rundungen braucht.
$this->themes->save($theme['colors'], $theme['fonts'], [...$theme['base'], 'imageRadius' => '0px']);
self::assertStringContainsString('--k-image-radius:0px', $this->request('/ecken')->getContent());
// Und was keine Groessenangabe ist, wird abgewiesen - wie bei der Inhaltsbreite.
try {
$this->themes->save($theme['colors'], $theme['fonts'], [...$theme['base'], 'imageRadius' => 'rund']);
self::fail('„rund“ ist keine Groessenangabe.');
} catch (InvalidPage) {
}
}
public function testSavingTextTwiceKeepsAmpersandsAndLineBreaksAsTheyAre(): void
{
// Umut: „Beim Startseitenbild wird & umgewandelt, aber nach dem Speichern steht &amp;