Michael/Socialflow
1
0 Fork 0
mirror of https://github.com/R0m1k3/Socialflow.git synced 2026-10-24 07:28:11 +02:00
Code Issues Packages Projects Releases Wiki Activity

Improve image editor's ribbon and price badge placement

Browse Source 
Refactor ribbon overlay to use a simple rectangle and adjust price badge to use a starburst character for a centered effect.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/dE5lg1s
This commit is contained in:
michaelschal committed 2025-10-11 08:33:47 +00:00
1 parent 323c942e42
commit c3ecaaf05d
3 files changed
+12 -23
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

attached_assets/image_1760171388112.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 650 KiB

attached_assets/image_1760171481083.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 459 KiB

client/src/pages/image-editor.tsx
+12 -23
View File
@@ -130,44 +130,33 @@ export default function ImageEditor() {
transformations.push(`e_${filters.effect}`); transformations.push(`e_${filters.effect}`);
} }
// Ribbon overlay (corner banner/triangle like in the example image) // Ribbon overlay (simple rectangle in corner - NO rotation)
if (ribbon.enabled) { if (ribbon.enabled) {
const ribbonColor = ribbon.color === "red" ? "FF0000" : "FFC107"; const ribbonColor = ribbon.color === "red" ? "FF0000" : "FFC107";
// URL encode the text to handle accents and special characters // URL encode the text to handle accents and special characters
const ribbonText = encodeURIComponent(ribbon.text); const ribbonText = encodeURIComponent(ribbon.text);
// Create corner banner effect
// Position determines rotation and offset
const isTopLeft = ribbon.position === "north_west";
const rotation = isTopLeft ? "-45" : "45";
const offsetX = isTopLeft ? "60" : "-60";
const offsetY = isTopLeft ? "60" : "-60";
transformations.push( transformations.push(
// Long rectangle banner with padding, rotated 45 degrees // Simple rectangle with padding, positioned in corner
`l_text:Arial_32_bold: ${ribbonText} ,co_white,b_rgb:${ribbonColor}`, `l_text:Arial_50_bold: ${ribbonText} ,co_white,b_rgb:${ribbonColor}`,
`a_${rotation}`, `fl_layer_apply,g_${ribbon.position},x_0,y_0`
`fl_layer_apply,g_${ribbon.position},x_${offsetX},y_${offsetY}`
); );
} }
// Price badge overlay (burst/starburst effect with large background) // Price badge overlay (starburst/éclaté effect with centered price)
if (priceBadge.enabled && priceBadge.price) { if (priceBadge.enabled && priceBadge.price) {
const badgeColor = priceBadge.color === "red" ? "DC2626" : "FFC107"; const badgeColor = priceBadge.color === "red" ? "DC2626" : "FFC107";
// URL encode the price text // URL encode the price text
const priceText = encodeURIComponent(`€${priceBadge.price}`); const priceText = encodeURIComponent(`€${priceBadge.price}`);
// Create burst/starburst badge effect with layered circles // Create burst/éclaté effect using starburst character
transformations.push( transformations.push(
// Outer burst circle (largest) // Large starburst background (éclaté shape)
`l_text:Arial_120_bold:★,co_rgb:${badgeColor}`, `l_text:Arial_180_bold:✦,co_rgb:${badgeColor}`,
`fl_layer_apply,g_${priceBadge.position},x_40,y_40`, `fl_layer_apply,g_${priceBadge.position},x_30,y_30`,
// Inner circle for depth // Price text centered on top
`l_text:Arial_90_bold:●,co_rgb:${badgeColor}`, `l_text:Arial_44_bold:${priceText},co_white`,
`fl_layer_apply,g_${priceBadge.position},x_40,y_40`, `fl_layer_apply,g_${priceBadge.position},x_30,y_30`
// Price text on top (smaller)
`l_text:Arial_32_bold:${priceText},co_white`,
`fl_layer_apply,g_${priceBadge.position},x_40,y_40`
); );
} }