1 files changed, 25 insertions, 0 deletions
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.ts
index 2bf9f8de5..1dc6692a2 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.ts
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Template.ts
@@ -4,6 +4,8 @@ import { TemplateFieldType, TemplateLayouts } from './TemplateBackend';
 import { DynamicField } from './TemplateFieldTypes/DynamicField';
 import { FieldSettings, TemplateField, ViewType } from './TemplateFieldTypes/TemplateField';
 import { Conditional } from './Backend/TemplateManager';
+import { ImageField } from '../../../../../fields/URLField';
+import { Doc } from '../../../../../fields/Doc';
 
 export class Template {
     _mainField: DynamicField;
@@ -110,6 +112,29 @@ export class Template {
         this.conditionalLogic[field] = this.conditionalLogic[field]?.filter(cond => cond !== statement);
     }
 
+    setImageAsBackground(url: string, makeTransparent: boolean = false) {
+        const fieldSettings: FieldSettings = {
+            tl: [-1, -1],
+            br: [1, 1],
+            opts: {},
+            viewType: ViewType.IMG,
+        }
+
+        const field: TemplateField = TemplateField.CreateField(fieldSettings, Math.random() * 100 + 100, this._mainField);
+        field.setContent(url);
+
+        if (makeTransparent) {
+            this.allFields.forEach(field => {
+                field.updateDocSetting('backgroundColor', 'transparent');
+                field.updateDocSetting('borderWidth', '0');
+            });
+        }
+
+        this._mainField.addField(field);
+        
+        this._mainField.refreshRenderedDoc();
+    }
+
     getMatches = (cols: Col[]): number[][] => {
         const numFields = this.contentFields.length;