Documentation

No third-party CSS. No JavaScript. Every shape is generated as an SVG path on the server and embedded in the page at render time. The image inside the shape is just a regular <img> — fully crawlable, fully indexable, fully focusable for screen readers.

WebProCMS lets editors clip any image on a page to one of eight geometric shapes — pentagon, hexagon, octagon, diamond, squircle, circle, arch, or blob — with two sliders that adjust the corner roundness and the rotation of the shape. The image inside the shape stays upright and untouched; only the visible outline changes.

The problem

Stock image grids on most CMSs look the same: rounded rectangles in a row. The moment an editor wants a pentagon, a hexagon, or a soft organic blob, they're sent to Photoshop or some online "clip path generator" tool, asked to download a transparent PNG with the shape pre-cut, and then to upload the cut file to the media library. The original is now baked into a specific shape — re-cropping or replacing later means redoing the whole process. And every variant of the image (different shapes, different rotations) needs its own file.

There's a second problem: even when a CMS exposes CSS clip-path directly, editors get a textarea full of polygon() coordinates and no visual feedback. "Round the corners by 12 pixels" isn't expressible in that syntax — polygon() points are always sharp.

The fix

Pick the shape from a dropdown. Drag a slider to soften the corners. Drag another to rotate it. The image is never modified — the same uploaded file works across every shape and every page that displays it, and replacing the image later changes nothing about the shape.

Under the hood, WebProCMS generates the SVG path for the chosen shape with the chosen corner radius and rotation, embeds an inline <clipPath clipPathUnits="objectBoundingBox"> next to the image, and points the image's wrapper at it via clip-path: url(#…). The path scales with the box, so the same shape works at 200px wide on mobile and 552px wide on desktop without re-cutting.

The eight shapes

The two sliders

Corner Radius (0–50) softens the corners of polygon shapes. At 0, the polygon has sharp points. As the slider increases, each corner is replaced with an arc tangent to both adjacent edges; at 50 (the maximum), the corners are rounded as far as they can go without adjacent arcs overlapping. The slider's effect varies per shape — diamond hits the ceiling sooner than octagon because diamond's edges are shorter — but the same 0–50 scale works for every shape so the UX stays predictable.

Rotation (-180° to 180°) rotates the shape around the image's center. The image inside the shape does not rotate — only the visible outline does. This lets editors tilt a pentagon to put a corner at the bottom, spin a hexagon for a flat-top look, or face a blob in a different direction, without sacrificing the photo's natural orientation.

How to use it

1. Open the page editor for any page that has an image.
2. Click the image in the preview to drill into its field group, then click the paintbrush icon on the Image card to switch to the Design tab.
3. Expand Shape. Pick a shape from the dropdown.
4. Drag Corner Radius to soften the corners. Drag Rotation to tilt the shape.

The preview updates live as you drag. There's no Save-and-reload step.

Where it works

The shape picker is available on every image-bearing component in the design library:

• <x-dl.image> — used by most rows in the design library that show a hero image, feature card image, team headshot, location photo, blog post thumbnail, etc.
• <x-dl.media> — used by rows that have one fixed image spot (no prefix-based field keys).

Inside grids and repeaters, each image in the grid can pick its own shape independently — the shape isn't a row-level setting.

What it doesn't change

• The image file. The uploaded image stays in the media library at full quality. Replacing the image later swaps the content without resetting the shape.
• The image's srcset. Glide's responsive image variants still serve at every breakpoint; the clip-path is applied on top of the rendered <img>, not baked into it.
• Alt text or accessibility. The image is still a regular <img> with its alt attribute intact — screen readers read it the same way, search engines crawl it the same way.
• Hover state. Plain images stay as-is. (Hover-rotation is on the roadmap but ships as a separate enhancement, not as part of the base shape feature.)

Technical notes

• The SVG <clipPath> is generated in objectBoundingBox units (0–1 coordinate space), so the same path scales to any element size. A 200×200 mobile thumbnail and a 552×552 desktop card both get clipped correctly by the same path declaration.
• The path is computed server-side in PHP (app/Support/DesignLibrary/DlClipShapes.php) and embedded inline. There is no JavaScript dependency for shapes to render — they work with JS disabled.
• Each image's clipPath gets a unique ID derived from slug + prefix + shape + radius + rotation. Two images with the same shape + radius + rotation on the same page produce two SVG defs (one per image), which is harmless — the second one shadows the first and the visual outcome is identical.
• The shape value is baked into the row's blade via the same field-{key}= attribute pathway used by every other field; saving the page persists the shape into the file on disk, no separate database row is needed for the per-page override.

Limitations and future work

• Radius slider has discrete polygon ceiling. Above the per-shape maximum corner radius, the slider stops changing the visual output. Editors see this as the shape "stopping changing" past a certain point — expected behaviour, but worth knowing.
• Arch and blob ignore the rotation handle differently. Arch rotates the dome around the box center; blob rotates the organic curves. Both work but feel different than rotating a polygon. Documented here in case an editor expects "rotation" to mean exactly one thing.
• Hover-rotation is not in v1. The reference design that inspired the feature had the pentagon rotate further on hover. We can ship that as a follow-up by reading the rotation slider's value into a CSS variable and adding a :hover rule that increments it.