feat(dynamic-images): add dynamic image template feature

Lets workspaces create image templates (text, image, and QR code layers)
that render personalized images per-contact via a public URL, so flows
and broadcasts can send dynamically generated images.

Author: Deathgiver

apps/builder/messages/ar.json

@@ -870,6 +870,9 @@
     "qrCode": {
       "label": "رمز QR"
     },
+    "dynamicImage": {
+      "label": "صورة ديناميكية"
+    },
     "savePayloadToCustomField": {
       "label": "حفظ الحمولة في حقل مخصص"
     },
@@ -2054,6 +2057,9 @@
       "label": "الأحداث",
       "placeholder": "اكتب اسم حدث واضغط Enter",
       "description": "أضف اسم حدث واحدًا أو أكثر. عندما يربط n8n خطاف ويب بأحد هذه الأحداث، تُرسل إليه البيانات عند تشغيل هذه الخطوة."
+    },
+    "enabled": {
+      "label": "مفعّل"
     }
   },
   "flows": {
@@ -3533,6 +3539,67 @@
     "title": "رموز QR",
     "description": "أنشئ رموز QR مرتبطة بمسارات البوت."
   },
+  "dynamicImages": {
+    "title": "الصور الديناميكية",
+    "description": "أنشئ صورًا مخصصة لكل جهة اتصال من خلفية وطبقات نص/صورة/رمز QR.",
+    "publicUrl": {
+      "label": "الرابط العام",
+      "hint": "انسخ الرابط والصقه في المسار أو البث أو التسلسل الخاص بك لإرسال صور مخصصة."
+    },
+    "editor": {
+      "addElement": "إضافة عنصر",
+      "addImage": "إضافة صورة",
+      "addText": "إضافة نص",
+      "addQrCode": "إضافة رمز QR",
+      "template": "قالب",
+      "templateDialogTitle": "اختر قالبًا",
+      "templateDialogDescription": "اختيار قالب سيستبدل جميع الطبقات الحالية.",
+      "layers": "الطبقات",
+      "noLayers": "لا توجد طبقات بعد. أضف عنصرًا للبدء.",
+      "deleteLayer": "حذف الطبقة",
+      "layerNameImage": "صورة",
+      "layerNameText": "نص",
+      "layerNameQrCode": "رمز QR",
+      "editElement": "تعديل العنصر",
+      "selectElementHint": "حدد عنصرًا في اللوحة لتعديل خصائصه.",
+      "width": "العرض",
+      "height": "الارتفاع",
+      "priority": "الأولوية",
+      "imageType": "نوع الصورة",
+      "imageTypeUrl": "رابط الصورة",
+      "imageTypeAvatarUser": "صورة جهة الاتصال",
+      "imageTypeCustomField": "حقل مخصص",
+      "imageUrl": "رابط الصورة",
+      "uploadImage": "رفع صورة",
+      "customField": "حقل مخصص",
+      "imageStyle": "نمط الصورة",
+      "imageStyleSquare": "مربع",
+      "imageStyleCircle": "دائري",
+      "qrText": "محتوى رمز QR",
+      "qrSize": "الحجم",
+      "qrColor": "اللون",
+      "qrLogo": "الشعار",
+      "uploadLogo": "رفع شعار",
+      "textContent": "محتوى النص",
+      "fontSize": "حجم الخط",
+      "fontFamily": "نوع الخط",
+      "fontFamilyArial": "Arial",
+      "fontFamilySerif": "Serif",
+      "fontFamilyRoboto": "Roboto",
+      "fontFamilyGreatVibes": "Great Vibes",
+      "align": "المحاذاة",
+      "alignLeft": "يسار",
+      "alignCenter": "وسط",
+      "alignRight": "يمين",
+      "color": "اللون",
+      "bold": "غامق",
+      "italic": "مائل",
+      "uppercase": "أحرف كبيرة"
+    },
+    "preview": {
+      "error": "فشل تحميل الصورة الديناميكية المرتبطة. ربما تم حذفها."
+    }
+  },
   "magicLinks": {
     "title": "الروابط السحرية",
     "description": "أنشئ روابط عميقة تعيد التوجيه إلى عنوان URL الخاص بك مع معاملات الاستعلام."

apps/builder/messages/da.json

@@ -796,6 +796,9 @@
     "qrCode": {
       "label": "QR Kode"
     },
+    "dynamicImage": {
+      "label": "Dynamisk billede"
+    },
     "savePayloadToCustomField": {
       "label": "Gem payload til brugerdefineret felt"
     },
@@ -1980,6 +1983,9 @@
       "label": "Hændelser",
       "placeholder": "Skriv et hændelsenavn og tryk på Enter",
       "description": "Tilføj et eller flere hændelsenavne. Når n8n tilføjer et webhook for en af disse hændelser, sendes data til det, når dette trin køres."
+    },
+    "enabled": {
+      "label": "Aktiveret"
     }
   },
   "flows": {
@@ -3533,6 +3539,67 @@
     "title": "QR-koder",
     "description": "Opret QR codes at link til din chatbot flows."
   },
+  "dynamicImages": {
+    "title": "Dynamiske billeder",
+    "description": "Generer personaliserede billeder pr. kontakt fra en baggrund og tekst-/billede-/QR-lag.",
+    "publicUrl": {
+      "label": "Offentlig URL",
+      "hint": "Kopiér og indsæt URL'en i dit flow, din udsendelse eller sekvens for at sende personaliserede billeder."
+    },
+    "editor": {
+      "addElement": "Tilføj element",
+      "addImage": "Tilføj billede",
+      "addText": "Tilføj tekst",
+      "addQrCode": "Tilføj QR-kode",
+      "template": "Skabelon",
+      "templateDialogTitle": "Vælg en skabelon",
+      "templateDialogDescription": "Valg af en skabelon udskifter alle nuværende lag.",
+      "layers": "Lag",
+      "noLayers": "Ingen lag endnu. Tilføj et element for at komme i gang.",
+      "deleteLayer": "Slet lag",
+      "layerNameImage": "Billede",
+      "layerNameText": "Tekst",
+      "layerNameQrCode": "QR-kode",
+      "editElement": "Rediger element",
+      "selectElementHint": "Vælg et element på canvasset for at redigere dets egenskaber.",
+      "width": "Bredde",
+      "height": "Højde",
+      "priority": "Prioritet",
+      "imageType": "Billedtype",
+      "imageTypeUrl": "Billed-URL",
+      "imageTypeAvatarUser": "Kontaktens profilbillede",
+      "imageTypeCustomField": "Brugerdefineret felt",
+      "imageUrl": "Billed-URL",
+      "uploadImage": "Upload billede",
+      "customField": "Brugerdefineret felt",
+      "imageStyle": "Billedstil",
+      "imageStyleSquare": "Kvadratisk",
+      "imageStyleCircle": "Cirkel",
+      "qrText": "QR-kodeindhold",
+      "qrSize": "Størrelse",
+      "qrColor": "Farve",
+      "qrLogo": "Logo",
+      "uploadLogo": "Upload logo",
+      "textContent": "Tekstindhold",
+      "fontSize": "Skriftstørrelse",
+      "fontFamily": "Skrifttype",
+      "fontFamilyArial": "Arial",
+      "fontFamilySerif": "Serif",
+      "fontFamilyRoboto": "Roboto",
+      "fontFamilyGreatVibes": "Great Vibes",
+      "align": "Justering",
+      "alignLeft": "Venstre",
+      "alignCenter": "Centreret",
+      "alignRight": "Højre",
+      "color": "Farve",
+      "bold": "Fed",
+      "italic": "Kursiv",
+      "uppercase": "Store bogstaver"
+    },
+    "preview": {
+      "error": "Kunne ikke indlæse det tilknyttede dynamiske billede. Det er muligvis blevet slettet."
+    }
+  },
   "magicLinks": {
     "title": "Magic Links",
     "description": "Opret deep links at redirect til din URL med query parameters."

apps/builder/messages/de.json

@@ -796,6 +796,9 @@
     "qrCode": {
       "label": "QR-Code"
     },
+    "dynamicImage": {
+      "label": "Dynamisches Bild"
+    },
     "savePayloadToCustomField": {
       "label": "Nutzdaten in benutzerdefiniertem Feld speichern"
     },
@@ -1980,6 +1983,9 @@
       "label": "Ereignisse",
       "placeholder": "Ereignisnamen eingeben und Enter drücken",
       "description": "Fügen Sie einen oder mehrere Ereignisnamen hinzu. Wenn n8n einen Webhook mit einem dieser Ereignisse verknüpft, werden beim Ausführen dieses Schritts Daten an ihn gesendet."
+    },
+    "enabled": {
+      "label": "Aktiviert"
     }
   },
   "flows": {
@@ -3533,6 +3539,67 @@
     "title": "QR-Codes",
     "description": "Erstellen Sie QR-Codes, die auf Ihre Chatbot-Flows verweisen."
   },
+  "dynamicImages": {
+    "title": "Dynamische Bilder",
+    "description": "Generieren Sie personalisierte Bilder pro Kontakt aus einem Hintergrund und Text-/Bild-/QR-Ebenen.",
+    "publicUrl": {
+      "label": "Öffentliche URL",
+      "hint": "Kopieren Sie die URL und fügen Sie sie in Ihren Flow, Broadcast oder Ihre Sequenz ein, um personalisierte Bilder zu senden."
+    },
+    "editor": {
+      "addElement": "Element hinzufügen",
+      "addImage": "Bild hinzufügen",
+      "addText": "Text hinzufügen",
+      "addQrCode": "QR-Code hinzufügen",
+      "template": "Vorlage",
+      "templateDialogTitle": "Vorlage auswählen",
+      "templateDialogDescription": "Die Auswahl einer Vorlage ersetzt alle aktuellen Ebenen.",
+      "layers": "Ebenen",
+      "noLayers": "Noch keine Ebenen. Fügen Sie ein Element hinzu, um zu beginnen.",
+      "deleteLayer": "Ebene löschen",
+      "layerNameImage": "Bild",
+      "layerNameText": "Text",
+      "layerNameQrCode": "QR-Code",
+      "editElement": "Element bearbeiten",
+      "selectElementHint": "Wählen Sie ein Element auf der Zeichenfläche aus, um seine Eigenschaften zu bearbeiten.",
+      "width": "Breite",
+      "height": "Höhe",
+      "priority": "Priorität",
+      "imageType": "Bildtyp",
+      "imageTypeUrl": "Bild-URL",
+      "imageTypeAvatarUser": "Kontakt-Avatar",
+      "imageTypeCustomField": "Benutzerdefiniertes Feld",
+      "imageUrl": "Bild-URL",
+      "uploadImage": "Bild hochladen",
+      "customField": "Benutzerdefiniertes Feld",
+      "imageStyle": "Bildstil",
+      "imageStyleSquare": "Quadratisch",
+      "imageStyleCircle": "Kreis",
+      "qrText": "QR-Code-Inhalt",
+      "qrSize": "Größe",
+      "qrColor": "Farbe",
+      "qrLogo": "Logo",
+      "uploadLogo": "Logo hochladen",
+      "textContent": "Textinhalt",
+      "fontSize": "Schriftgröße",
+      "fontFamily": "Schriftart",
+      "fontFamilyArial": "Arial",
+      "fontFamilySerif": "Serif",
+      "fontFamilyRoboto": "Roboto",
+      "fontFamilyGreatVibes": "Great Vibes",
+      "align": "Ausrichtung",
+      "alignLeft": "Links",
+      "alignCenter": "Zentriert",
+      "alignRight": "Rechts",
+      "color": "Farbe",
+      "bold": "Fett",
+      "italic": "Kursiv",
+      "uppercase": "Großbuchstaben"
+    },
+    "preview": {
+      "error": "Das verknüpfte dynamische Bild konnte nicht geladen werden. Es wurde möglicherweise gelöscht."
+    }
+  },
   "magicLinks": {
     "title": "Magic Links",
     "description": "Erstellen Sie Deep Links, die mit Query-Parametern zu Ihrer URL weiterleiten."

apps/builder/messages/en.json

@@ -870,6 +870,9 @@
     "qrCode": {
       "label": "QR Code"
     },
+    "dynamicImage": {
+      "label": "Dynamic Image"
+    },
     "savePayloadToCustomField": {
       "label": "Save payload to custom field"
     },
@@ -2054,6 +2057,9 @@
       "label": "Events",
       "placeholder": "Type an event name and press Enter",
       "description": "Add one or more event names. When n8n attaches a webhook for one of these events, data is sent to it when this step runs."
+    },
+    "enabled": {
+      "label": "Enabled"
     }
   },
   "metaConversions": {
@@ -3629,6 +3635,67 @@
     "title": "QR Codes",
     "description": "Create QR codes that link to your chatbot flows."
   },
+  "dynamicImages": {
+    "title": "Dynamic Images",
+    "description": "Generate personalized images per contact from a background and text/image/QR layers.",
+    "publicUrl": {
+      "label": "Public URL",
+      "hint": "Copy and paste the URL into your flow, broadcast, or sequence to send personalized images."
+    },
+    "editor": {
+      "addElement": "Add element",
+      "addImage": "Add image",
+      "addText": "Add text",
+      "addQrCode": "Add QR code",
+      "template": "Template",
+      "templateDialogTitle": "Choose a template",
+      "templateDialogDescription": "Selecting a template replaces all current layers.",
+      "layers": "Layers",
+      "noLayers": "No layers yet. Add an element to get started.",
+      "deleteLayer": "Delete layer",
+      "layerNameImage": "Image",
+      "layerNameText": "Text",
+      "layerNameQrCode": "QR code",
+      "editElement": "Edit element",
+      "selectElementHint": "Select an element on the canvas to edit its properties.",
+      "width": "Width",
+      "height": "Height",
+      "priority": "Priority",
+      "imageType": "Image type",
+      "imageTypeUrl": "Image URL",
+      "imageTypeAvatarUser": "Contact avatar",
+      "imageTypeCustomField": "Custom field",
+      "imageUrl": "Image URL",
+      "uploadImage": "Upload image",
+      "customField": "Custom field",
+      "imageStyle": "Image style",
+      "imageStyleSquare": "Square",
+      "imageStyleCircle": "Circle",
+      "qrText": "QR code content",
+      "qrSize": "Size",
+      "qrColor": "Color",
+      "qrLogo": "Logo",
+      "uploadLogo": "Upload logo",
+      "textContent": "Text content",
+      "fontSize": "Font size",
+      "fontFamily": "Font family",
+      "fontFamilyArial": "Arial",
+      "fontFamilySerif": "Serif",
+      "fontFamilyRoboto": "Roboto",
+      "fontFamilyGreatVibes": "Great Vibes",
+      "align": "Alignment",
+      "alignLeft": "Left",
+      "alignCenter": "Center",
+      "alignRight": "Right",
+      "color": "Color",
+      "bold": "Bold",
+      "italic": "Italic",
+      "uppercase": "Uppercase"
+    },
+    "preview": {
+      "error": "Failed to load the linked dynamic image. It may have been deleted."
+    }
+  },
   "magicLinks": {
     "title": "Magic Links",
     "description": "Create deep links that redirect to your URL with query parameters."