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:
1 parent
a8368068aa
commit
23fdca4edb
7 files changed
+57
-3
No files matched your search
@@ -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 &
|
||||
|
||||
Reference in new issue
Block a user