From ba96c2091e8d7730553514e11daef96902b03f89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mauro=20Ferr=C3=A3o?= <maurofmferrao@gmail.com>
Date: Thu, 8 Feb 2024 14:06:02 +0000
Subject: [PATCH] xiboImageRender not working for templates and elements
 (#2358)

relates to xibosignageltd/xibo-private#614
---
 modules/forecastio.xml                        |  2 +-
 modules/templates/article-elements.xml        |  2 +-
 modules/templates/article-static.xml          | 12 ++--
 modules/templates/currency-elements.xml       |  2 +-
 modules/templates/currency-static.xml         |  6 +-
 modules/templates/dataset-elements.xml        |  2 +-
 modules/templates/dataset-static.xml          | 57 +++++++++----------
 modules/templates/event-static.xml            | 20 +++----
 modules/templates/global-elements.xml         |  7 ++-
 modules/templates/message-static.xml          |  3 +-
 .../templates/product-category-elements.xml   |  2 +-
 modules/templates/product-elements.xml        |  2 +-
 modules/templates/social-media-elements.xml   |  4 +-
 modules/templates/social-media-static.xml     | 28 ++++-----
 modules/templates/stock-static.xml            |  6 +-
 modules/text.xml                              |  6 +-
 ui/src/layout-editor/main.js                  |  5 +-
 ui/src/playlist-editor/main.js                |  3 +
 18 files changed, 86 insertions(+), 83 deletions(-)

diff --git a/modules/forecastio.xml b/modules/forecastio.xml
index 82d34c9db4..0abde683a6 100755
--- a/modules/forecastio.xml
+++ b/modules/forecastio.xml
@@ -219,8 +219,8 @@ if (daysNum > 0) {
 }
 
 // Handle images and scaling
-$(target).find("img").xiboImageRender(properties);
 $content.xiboLayoutScaler(properties);
+$(target).find("img").xiboImageRender(properties);
     ]]></onRender>
     <assets>
         <asset id="animate" type="path" mimeType="text/css" path="/modules/assets/forecastio/animate.css"></asset>
diff --git a/modules/templates/article-elements.xml b/modules/templates/article-elements.xml
index 28f979f6f7..e46a315d3c 100644
--- a/modules/templates/article-elements.xml
+++ b/modules/templates/article-elements.xml
@@ -109,7 +109,7 @@ if (
     </template>
     <template>
         <id>article_image</id>
-        <extends override="url" with="data.image">global-image</extends>
+        <extends override="url" with="data.image">global_image</extends>
         <title>Image</title>
         <type>element</type>
         <dataType>article</dataType>
diff --git a/modules/templates/article-static.xml b/modules/templates/article-static.xml
index b3e7166b25..5f62cc55e5 100644
--- a/modules/templates/article-static.xml
+++ b/modules/templates/article-static.xml
@@ -142,10 +142,9 @@ for (var index = 0; index < items.length; index++) {
 }
 
 // Render
-$(target).find('img').xiboImageRender(properties);
-
 $(target).xiboLayoutScaler(properties);
 $(target).xiboTextRender(properties, $(target).find('#content > *'));
+$(target).find('img').xiboImageRender(properties);
         ]]></onTemplateRender>
         <onTemplateVisible><![CDATA[
 // Start effects for this template
@@ -254,9 +253,9 @@ if (
 }
 
 // Render
-$(target).find('img').xiboImageRender(properties);
 $(target).xiboLayoutScaler(properties);
 $(target).xiboTextRender(properties, $(target).find('#content > .image, #content > .copyright'));
+$(target).find('img').xiboImageRender(properties);
         ]]></onTemplateRender>
         <onTemplateVisible><![CDATA[
 // Start effects for this template
@@ -473,9 +472,9 @@ if (
 }
 
 // Render
-$(target).find('img').xiboImageRender(properties);
 $(target).xiboLayoutScaler(properties);
 $(target).xiboTextRender(properties, $(target).find('#content > .image, #content > .copyright'));
+$(target).find('img').xiboImageRender(properties);
         ]]></onTemplateRender>
         <onTemplateVisible><![CDATA[
 // Start effects for this template
@@ -676,9 +675,9 @@ if (
 }
 
 // Render
-$(target).find('img').xiboImageRender(properties);
 $(target).xiboLayoutScaler(properties);
 $(target).xiboTextRender(properties, $(target).find('#content > .image, #content > .copyright'));
+$(target).find('img').xiboImageRender(properties);
         ]]></onTemplateRender>
         <onTemplateVisible><![CDATA[
 // Start effects for this template
@@ -1442,10 +1441,9 @@ if (
 }
 
 // Render
-$(target).find('img').xiboImageRender(properties);
-
 $(target).xiboLayoutScaler(properties);
 $(target).xiboTextRender(properties, $(target).find('#content > *'));
+$(target).find('img').xiboImageRender(properties);
         ]]></onTemplateRender>
         <onTemplateVisible><![CDATA[
 // Start effects for this template
diff --git a/modules/templates/currency-elements.xml b/modules/templates/currency-elements.xml
index 4625fbbee6..ea25b213cb 100644
--- a/modules/templates/currency-elements.xml
+++ b/modules/templates/currency-elements.xml
@@ -140,7 +140,7 @@ if (elementData !== null && elementData.hasOwnProperty('ChangeStyle')) {
     </template>
     <template>
         <id>currency_logo</id>
-        <extends override="url" with="data.NameShort">global-image</extends>
+        <extends override="url" with="data.NameShort">global_image</extends>
         <title>Currency Logo</title>
         <type>element</type>
         <dataType>currency</dataType>
diff --git a/modules/templates/currency-static.xml b/modules/templates/currency-static.xml
index 514b3230f8..181d9c0bb5 100644
--- a/modules/templates/currency-static.xml
+++ b/modules/templates/currency-static.xml
@@ -100,7 +100,6 @@
 // target: The target element to render
 // items: The items to render
 // properties: The properties for the widget
-$(target).find('img').xiboImageRender(properties);
 $(target).xiboLayoutScaler(properties);
 
 // Get body
@@ -117,6 +116,7 @@ if (templateItems.length > 0) {
     // Hide container
     $(body).hide();
 }
+$(target).find('img').xiboImageRender(properties);
         ]]></onTemplateRender>
         <onTemplateVisible><![CDATA[
 // Start effects for this template
@@ -335,7 +335,6 @@ body {
 // target: The target element to render
 // items: The items to render
 // properties: The properties for the widget
-$(target).find("img").xiboImageRender(properties);
 $(target).xiboLayoutScaler(properties);
 
 // Get items
@@ -352,6 +351,7 @@ if (templateItems.length > 0) {
     // Hide container
     $(body).hide();
 }
+$(target).find("img").xiboImageRender(properties);
         ]]></onTemplateRender>
         <onTemplateVisible><![CDATA[
 // Start effects for this template
@@ -613,7 +613,6 @@ body {
 // target: The target element to render
 // items: The items to render
 // properties: The properties for the widget
-$(target).find("img").xiboImageRender(properties);
 $(target).xiboLayoutScaler(properties);
 
 // Get template items
@@ -623,6 +622,7 @@ var templateItems = $(target).find(".template-item");
 var body = $(target).find(".template-container");
 
 $(target).find("#content").xiboFinanceRender(properties, templateItems, body);
+$(target).find("img").xiboImageRender(properties);
         ]]></onTemplateRender>
         <onTemplateVisible><![CDATA[
 // Start effects for this template
diff --git a/modules/templates/dataset-elements.xml b/modules/templates/dataset-elements.xml
index a069f39a1c..c1e3e56f50 100644
--- a/modules/templates/dataset-elements.xml
+++ b/modules/templates/dataset-elements.xml
@@ -151,7 +151,7 @@
     </template>
     <template>
         <id>dataset_data_img</id>
-        <extends override="url">global-image</extends>
+        <extends override="url">global_image</extends>
         <title>Image</title>
         <type>element</type>
         <dataType>dataset</dataType>
diff --git a/modules/templates/dataset-static.xml b/modules/templates/dataset-static.xml
index 113aa72cc1..4c9c8bc1f1 100644
--- a/modules/templates/dataset-static.xml
+++ b/modules/templates/dataset-static.xml
@@ -254,11 +254,11 @@ $datasetTableContainer.appendTo($(target).find('#content'));
 // Scale the layout
 $(target).xiboLayoutScaler(properties);
 
-// Image render
-$datasetTableContainer.find('img').xiboImageRender(properties);
-
 // Call render
 $datasetTableContainer.dataSetRender(properties);
+
+// Image render
+$datasetTableContainer.find('img').xiboImageRender(properties);
         ]]></onTemplateRender>
         <assets>
             <asset id="empty" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/dataset/0-empty.png" />
@@ -800,11 +800,11 @@ $datasetTableContainer.appendTo($(target).find('#content'));
 // Scale the layout
 $(target).xiboLayoutScaler(properties);
 
-// Image render
-$datasetTableContainer.find('img').xiboImageRender(properties);
-
 // Call render
 $datasetTableContainer.dataSetRender(properties);
+
+// Image render
+$datasetTableContainer.find('img').xiboImageRender(properties);
         ]]></onTemplateRender>
         <assets>
             <asset id="empty" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/dataset/0-empty.png" />
@@ -1082,11 +1082,11 @@ $datasetTableContainer.appendTo($(target).find('#content'));
 // Scale the layout
 $(target).xiboLayoutScaler(properties);
 
-// Image render
-$datasetTableContainer.find('img').xiboImageRender(properties);
-
 // Call render
 $datasetTableContainer.dataSetRender(properties);
+
+// Image render
+$datasetTableContainer.find('img').xiboImageRender(properties);
         ]]></onTemplateRender>
         <assets>
             <asset id="light-green" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/dataset/1-light-green.png" />
@@ -1355,11 +1355,11 @@ $datasetTableContainer.appendTo($(target).find('#content'));
 // Scale the layout
 $(target).xiboLayoutScaler(properties);
 
-// Image render
-$datasetTableContainer.find('img').xiboImageRender(properties);
-
 // Call render
 $datasetTableContainer.dataSetRender(properties);
+
+// Image render
+$datasetTableContainer.find('img').xiboImageRender(properties);
         ]]></onTemplateRender>
         <assets>
             <asset id="simple-round-table" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/dataset/2-simple-round-table.png" />
@@ -1626,11 +1626,11 @@ $datasetTableContainer.appendTo($(target).find('#content'));
 // Scale the layout
 $(target).xiboLayoutScaler(properties);
 
-// Image render
-$datasetTableContainer.find('img').xiboImageRender(properties);
-
 // Call render
 $datasetTableContainer.dataSetRender(properties);
+
+// Image render
+$datasetTableContainer.find('img').xiboImageRender(properties);
         ]]></onTemplateRender>
         <assets>
             <asset id="transparent-blue" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/dataset/3-transparent-blue.png" />
@@ -1895,11 +1895,11 @@ $datasetTableContainer.appendTo($(target).find('#content'));
 // Scale the layout
 $(target).xiboLayoutScaler(properties);
 
-// Image render
-$datasetTableContainer.find('img').xiboImageRender(properties);
-
 // Call render
 $datasetTableContainer.dataSetRender(properties);
+
+// Image render
+$datasetTableContainer.find('img').xiboImageRender(properties);
         ]]></onTemplateRender>
         <assets>
             <asset id="orange-grey-striped" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/dataset/4-orange-grey-striped.png" />
@@ -2162,11 +2162,11 @@ $datasetTableContainer.appendTo($(target).find('#content'));
 // Scale the layout
 $(target).xiboLayoutScaler(properties);
 
-// Image render
-$datasetTableContainer.find('img').xiboImageRender(properties);
-
 // Call render
 $datasetTableContainer.dataSetRender(properties);
+
+// Image render
+$datasetTableContainer.find('img').xiboImageRender(properties);
         ]]></onTemplateRender>
         <assets>
             <asset id="split-rows-" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/dataset/5-split-rows-.png" />
@@ -2424,11 +2424,11 @@ $datasetTableContainer.appendTo($(target).find('#content'));
 // Scale the layout
 $(target).xiboLayoutScaler(properties);
 
-// Image render
-$datasetTableContainer.find('img').xiboImageRender(properties);
-
 // Call render
 $datasetTableContainer.dataSetRender(properties);
+
+// Image render
+$datasetTableContainer.find('img').xiboImageRender(properties);
         ]]></onTemplateRender>
         <assets>
             <asset id="dark-round" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/dataset/6-dark-round.png" />
@@ -2728,11 +2728,11 @@ $datasetTableContainer.appendTo($(target).find('#content'));
 // Scale the layout
 $(target).xiboLayoutScaler(properties);
 
-// Image render
-$datasetTableContainer.find('img').xiboImageRender(properties);
-
 // Call render
 $datasetTableContainer.dataSetRender(properties);
+
+// Image render
+$datasetTableContainer.find('img').xiboImageRender(properties);
         ]]></onTemplateRender>
         <assets>
             <asset id="pill-colored" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/dataset/7-pill-colored.png" />
@@ -3487,10 +3487,9 @@ if (
 }
 
 // Render
-$(target).find('img').xiboImageRender(properties);
-
 $(target).xiboLayoutScaler(properties);
 $(target).xiboTextRender(properties, $(target).find('#content > *'));
+$(target).find('img').xiboImageRender(properties);
         ]]></onTemplateRender>
         <onTemplateVisible><![CDATA[
 // Start effects for this template
diff --git a/modules/templates/event-static.xml b/modules/templates/event-static.xml
index 10644d142c..65c6650634 100644
--- a/modules/templates/event-static.xml
+++ b/modules/templates/event-static.xml
@@ -124,10 +124,9 @@ for (var index = 0; index < numItems; index++) {
 }
 
 // Render
-$(target).find('img').xiboImageRender(properties);
-
 $(target).xiboLayoutScaler(properties);
 $(target).xiboTextRender(properties, $(target).find('#content > .event'));
+$(target).find('img').xiboImageRender(properties);
         ]]></onTemplateRender>
     <onTemplateVisible><![CDATA[
 // Start effects for this template
@@ -572,7 +571,6 @@ ol, li {
 // properties: The properties for the widget
 moment.locale(properties.lang || globalOptions.locale);
 
-$(target).find("img").xiboImageRender(properties);
 $(target).xiboLayoutScaler(properties);
 
 // Add the calendar type to options
@@ -580,6 +578,7 @@ properties.calendarType = 2;
 
 // Run calendar render
 $(target).xiboCalendarRender(properties, items);
+$(target).find('img').xiboImageRender(properties);
         ]]></onTemplateRender>
         <assets>
             <asset id="daily_light" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/event/daily_light.png" />
@@ -1020,7 +1019,6 @@ ol, li {
 // properties: The properties for the widget
 moment.locale(properties.lang || globalOptions.locale);
 
-$(target).find("img").xiboImageRender(properties);
 $(target).xiboLayoutScaler(properties);
 
 // Add the calendar type to options
@@ -1028,6 +1026,7 @@ properties.calendarType = 2;
 
 // Run calendar render
 $(target).xiboCalendarRender(properties, items);
+$(target).find('img').xiboImageRender(properties);
         ]]></onTemplateRender>
         <assets>
             <asset id="daily_dark" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/event/daily_dark.png" />
@@ -1490,8 +1489,6 @@ ol, li {
 // items: The items to render
 // properties: The properties for the widget
 moment.locale(properties.lang || globalOptions.locale);
-
-$(target).find("img").xiboImageRender(properties);
 $(target).xiboLayoutScaler(properties);
 
 // Add the calendar type to options
@@ -1499,6 +1496,7 @@ properties.calendarType = 3;
 
 // Run calendar render
 $(target).xiboCalendarRender(properties, items);
+$(target).find('img').xiboImageRender(properties);
         ]]></onTemplateRender>
         <assets>
             <asset id="weekly_light" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/event/weekly_light.png" />
@@ -1959,7 +1957,6 @@ ol, li {
 // properties: The properties for the widget
 moment.locale(properties.lang || globalOptions.locale);
 
-$(target).find("img").xiboImageRender(properties);
 $(target).xiboLayoutScaler(properties);
 
 // Add the calendar type to options
@@ -1967,6 +1964,7 @@ properties.calendarType = 3;
 
 // Run calendar render
 $(target).xiboCalendarRender(properties, items);
+$(target).find('img').xiboImageRender(properties);
         ]]></onTemplateRender>
         <assets>
             <asset id="weekly_dark" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/event/weekly_dark.png" />
@@ -2355,7 +2353,6 @@ li {
 // properties: The properties for the widget
 moment.locale(properties.lang || globalOptions.locale);
 
-$(target).find("img").xiboImageRender(properties);
 $(target).xiboLayoutScaler(properties);
 
 // Add the calendar type to options
@@ -2363,6 +2360,7 @@ properties.calendarType = 4;
 
 // Run calendar render
 $(target).xiboCalendarRender(properties, items);
+$(target).find('img').xiboImageRender(properties);
         ]]></onTemplateRender>
         <assets>
             <asset id="monthly_light" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/event/monthly_light.png" />
@@ -2748,7 +2746,6 @@ li {
 // properties: The properties for the widget
 moment.locale(properties.lang || globalOptions.locale);
 
-$(target).find("img").xiboImageRender(properties);
 $(target).xiboLayoutScaler(properties);
 
 // Add the calendar type to options
@@ -2756,6 +2753,7 @@ properties.calendarType = 4;
 
 // Run calendar render
 $(target).xiboCalendarRender(properties, items);
+$(target).find('img').xiboImageRender(properties);
         ]]></onTemplateRender>
         <assets>
             <asset id="monthly_dark" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/event/monthly_dark.png" />
@@ -3052,7 +3050,6 @@ ol, li {
 // properties: The properties for the widget
 moment.locale(properties.lang || globalOptions.locale);
 
-$(target).find("img").xiboImageRender(properties);
 $(target).xiboLayoutScaler(properties);
 
 // Add the calendar type to options
@@ -3060,6 +3057,7 @@ properties.calendarType = 1;
 
 // Run calendar render
 $(target).xiboCalendarRender(properties, items);
+$(target).find('img').xiboImageRender(properties);
         ]]></onTemplateRender>
         <assets>
             <asset id="schedule_light" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/event/schedule_light.png" />
@@ -3353,7 +3351,6 @@ ol, li {
 // properties: The properties for the widget
 moment.locale(properties.lang || globalOptions.locale);
 
-$(target).find("img").xiboImageRender(properties);
 $(target).xiboLayoutScaler(properties);
 
 // Add the calendar type to options
@@ -3361,6 +3358,7 @@ properties.calendarType = 1;
 
 // Run calendar render
 $(target).xiboCalendarRender(properties, items);
+$(target).find('img').xiboImageRender(properties);
         ]]></onTemplateRender>
         <assets>
             <asset id="schedule_dark" type="path" mimeType="image/png" cmsOnly="true" path="/modules/assets/template-thumbnails/event/schedule_dark.png" />
diff --git a/modules/templates/global-elements.xml b/modules/templates/global-elements.xml
index 303af7b338..11c9d8792c 100644
--- a/modules/templates/global-elements.xml
+++ b/modules/templates/global-elements.xml
@@ -363,7 +363,7 @@ $(target).find('.date').each(function(_idx, dateEl){
         </assets>
     </template>
     <template>
-        <id>global-image</id>
+        <id>global_image</id>
         <type>element</type>
         <dataType>global</dataType>
         <title>Image</title>
@@ -459,13 +459,16 @@ $(target).find('.date').each(function(_idx, dateEl){
 </div>
             ]]></hbs>
         </stencil>
+        <onTemplateRender><![CDATA[
+$(target).find('img').xiboImageRender(properties);
+        ]]></onTemplateRender>
         <assets>
             <asset id="image" type="path" cmsOnly="true" mimeType="image/png" path="/modules/assets/template-thumbnails/global/image.png" />
         </assets>
     </template>
     <template>
         <id>global_library_image</id>
-        <extends override="url" with="mediaId">global-image</extends>
+        <extends override="url" with="mediaId">global_image</extends>
         <type>element</type>
         <title>Library Image</title>
         <dataType>global</dataType>
diff --git a/modules/templates/message-static.xml b/modules/templates/message-static.xml
index 16572cb237..ce729d7460 100644
--- a/modules/templates/message-static.xml
+++ b/modules/templates/message-static.xml
@@ -113,10 +113,9 @@ for (var index = 0; index < items.length; index++) {
 }
 
 // Render
-$(target).find('img').xiboImageRender(properties);
-
 $(target).xiboLayoutScaler(properties);
 $(target).xiboTextRender(properties, $(target).find('#content > *'));
+$(target).find('img').xiboImageRender(properties);
         ]]></onTemplateRender>
         <onTemplateVisible><![CDATA[
 // Start effects for this template
diff --git a/modules/templates/product-category-elements.xml b/modules/templates/product-category-elements.xml
index 1dd242deb6..1be943b777 100644
--- a/modules/templates/product-category-elements.xml
+++ b/modules/templates/product-category-elements.xml
@@ -43,7 +43,7 @@
     </template>
     <template>
         <id>product_category_photo</id>
-        <extends override="url" with="data.image">global-image</extends>
+        <extends override="url" with="data.image">global_image</extends>
         <type>element</type>
         <dataType>product-category</dataType>
         <icon>fas fa-image</icon>
diff --git a/modules/templates/product-elements.xml b/modules/templates/product-elements.xml
index 6ab0ad02e9..491f972235 100644
--- a/modules/templates/product-elements.xml
+++ b/modules/templates/product-elements.xml
@@ -127,7 +127,7 @@ return value;
     </template>
     <template>
         <id>product_photo</id>
-        <extends override="url" with="data.image">global-image</extends>
+        <extends override="url" with="data.image">global_image</extends>
         <type>element</type>
         <dataType>product</dataType>
         <icon>fas fa-image</icon>
diff --git a/modules/templates/social-media-elements.xml b/modules/templates/social-media-elements.xml
index 61a7cf5f32..5beac85651 100644
--- a/modules/templates/social-media-elements.xml
+++ b/modules/templates/social-media-elements.xml
@@ -21,7 +21,7 @@
 <templates>
     <template>
         <id>profile_photo</id>
-        <extends override="url" with="data.userProfileImage">global-image</extends>
+        <extends override="url" with="data.userProfileImage">global_image</extends>
         <type>element</type>
         <dataType>social-media</dataType>
         <title>Profile Photo</title>
@@ -75,7 +75,7 @@
     </template>
     <template>
         <id>post_photo</id>
-        <extends override="url" with="data.photo">global-image</extends>
+        <extends override="url" with="data.photo">global_image</extends>
         <type>element</type>
         <dataType>social-media</dataType>
         <title>Post Photo</title>
diff --git a/modules/templates/social-media-static.xml b/modules/templates/social-media-static.xml
index ef061311f4..90e82ca2ca 100644
--- a/modules/templates/social-media-static.xml
+++ b/modules/templates/social-media-static.xml
@@ -173,8 +173,8 @@ body {
         </stencil>
         <onTemplateRender><![CDATA[
 $(target).xiboLayoutScaler(properties);
-$(target).find('img').xiboImageRender(properties);
 $(target).xiboTextRender(properties, $(target).find('#content > .social-media-item'));
+$(target).find('img').xiboImageRender(properties);
         ]]></onTemplateRender>
         <onTemplateVisible><![CDATA[
 // Start effects for this template
@@ -393,8 +393,8 @@ div.message-container {
         </stencil>
         <onTemplateRender><![CDATA[
 $(target).xiboLayoutScaler(properties);
-$(target).find('img').xiboImageRender(properties);
 $(target).xiboTextRender(properties, $(target).find('#content > .main-container'));
+$(target).find('img').xiboImageRender(properties);
         ]]></onTemplateRender>
         <onTemplateVisible><![CDATA[
 // Start effects for this template
@@ -630,8 +630,8 @@ div.message-container {
         </stencil>
         <onTemplateRender><![CDATA[
 $(target).xiboLayoutScaler(properties);
-$(target).find('img').xiboImageRender(properties);
 $(target).xiboTextRender(properties, $(target).find('#content > .main-container'));
+$(target).find('img').xiboImageRender(properties);
         ]]></onTemplateRender>
         <onTemplateVisible><![CDATA[
 // Start effects for this template
@@ -769,8 +769,8 @@ $(target).xiboLayoutAnimate(properties);
         </stencil>
         <onTemplateRender><![CDATA[
 $(target).xiboLayoutScaler(properties);
-$(target).find('img').xiboImageRender(properties);
 $(target).xiboTextRender(properties, $(target).find('#content > .main-container'));
+$(target).find('img').xiboImageRender(properties);
         ]]></onTemplateRender>
         <onTemplateVisible><![CDATA[
 // Start effects for this template
@@ -922,8 +922,8 @@ $(target).xiboLayoutAnimate(properties);
         </stencil>
         <onTemplateRender><![CDATA[
 $(target).xiboLayoutScaler(properties);
-$(target).find('img').xiboImageRender(properties);
 $(target).xiboTextRender(properties, $(target).find('#content > .main-container'));
+$(target).find('img').xiboImageRender(properties);
         ]]></onTemplateRender>
         <onTemplateVisible><![CDATA[
 // Start effects for this template
@@ -1076,8 +1076,8 @@ $(target).xiboLayoutAnimate(properties);
         </stencil>
         <onTemplateRender><![CDATA[
 $(target).xiboLayoutScaler(properties);
-$(target).find('img').xiboImageRender(properties);
 $(target).xiboTextRender(properties, $(target).find('#content > .main-container'));
+$(target).find('img').xiboImageRender(properties);
         ]]></onTemplateRender>
         <onTemplateVisible><![CDATA[
 // Start effects for this template
@@ -1291,8 +1291,8 @@ body {
         </stencil>
         <onTemplateRender><![CDATA[
 $(target).xiboLayoutScaler(properties);
-$(target).find('img').xiboImageRender(properties);
 $(target).xiboTextRender(properties, $(target).find('#content > .main-container'));
+$(target).find('img').xiboImageRender(properties);
         ]]></onTemplateRender>
         <onTemplateVisible><![CDATA[
 // Start effects for this template
@@ -1521,8 +1521,8 @@ body {
         </stencil>
         <onTemplateRender><![CDATA[
 $(target).xiboLayoutScaler(properties);
-$(target).find('img').xiboImageRender(properties);
 $(target).xiboTextRender(properties, $(target).find('#content > .main-container'));
+$(target).find('img').xiboImageRender(properties);
         ]]></onTemplateRender>
         <onTemplateVisible><![CDATA[
 // Start effects for this template
@@ -1762,8 +1762,8 @@ body {
         </stencil>
         <onTemplateRender><![CDATA[
 $(target).xiboLayoutScaler(properties);
-$(target).find('img').xiboImageRender(properties);
 $(target).xiboTextRender(properties, $(target).find('#content > .main-container'));
+$(target).find('img').xiboImageRender(properties);
         ]]></onTemplateRender>
         <onTemplateVisible><![CDATA[
 // Start effects for this template
@@ -1989,8 +1989,8 @@ body {
         </stencil>
         <onTemplateRender><![CDATA[
 $(target).xiboLayoutScaler(properties);
-$(target).find('img').xiboImageRender(properties);
 $(target).xiboTextRender(properties, $(target).find('#content > .main-container'));
+$(target).find('img').xiboImageRender(properties);
         ]]></onTemplateRender>
         <onTemplateVisible><![CDATA[
 // Start effects for this template
@@ -2221,8 +2221,8 @@ body {
         </stencil>
         <onTemplateRender><![CDATA[
 $(target).xiboLayoutScaler(properties);
-$(target).find('img').xiboImageRender(properties);
 $(target).xiboTextRender(properties, $(target).find('#content > .main-container'));
+$(target).find('img').xiboImageRender(properties);
         ]]></onTemplateRender>
         <onTemplateVisible><![CDATA[
 // Start effects for this template
@@ -2461,8 +2461,8 @@ body {
         </stencil>
         <onTemplateRender><![CDATA[
 $(target).xiboLayoutScaler(properties);
-$(target).find('img').xiboImageRender(properties);
 $(target).xiboTextRender(properties, $(target).find('#content > .main-container'));
+$(target).find('img').xiboImageRender(properties);
         ]]></onTemplateRender>
         <onTemplateVisible><![CDATA[
 // Start effects for this template
@@ -2707,8 +2707,8 @@ body {
         </stencil>
         <onTemplateRender><![CDATA[
 $(target).xiboLayoutScaler(properties);
-$(target).find('img').xiboImageRender(properties);
 $(target).xiboTextRender(properties, $(target).find('#content > .main-container'));
+$(target).find('img').xiboImageRender(properties);
         ]]></onTemplateRender>
         <onTemplateVisible><![CDATA[
 // Start effects for this template
@@ -3065,7 +3065,7 @@ for (var i = 1; i <= 8; i++) {
 $metroRenderContainer.xiboMetroRender(properties, itemsHTML, colors);
 
 // Render the images
-$metroRenderContainer.find('.cell').xiboImageRender(properties);
+$metroRenderContainer.find('img').xiboImageRender(properties);
         ]]></onTemplateRender>
         <onTemplateVisible><![CDATA[
 // Start effects for this template
diff --git a/modules/templates/stock-static.xml b/modules/templates/stock-static.xml
index e3bf4fa31b..8467f5046c 100644
--- a/modules/templates/stock-static.xml
+++ b/modules/templates/stock-static.xml
@@ -98,7 +98,6 @@
 // target: The target element to render
 // items: The items to render
 // properties: The properties for the widget
-$(target).find("img").xiboImageRender(properties);
 $(target).xiboLayoutScaler(properties);
 
 // Get items
@@ -108,6 +107,7 @@ var items = $(target).find(".template-item");
 var body = $(target).find(".template-container");
 
 $(target).find("#content").xiboFinanceRender(properties, items, body);
+$(target).find("img").xiboImageRender(properties);
         ]]></onTemplateRender>
         <onTemplateVisible><![CDATA[
 // Start effects for this template
@@ -419,7 +419,6 @@ body {
 // target: The target element to render
 // items: The items to render
 // properties: The properties for the widget
-$(target).find("img").xiboImageRender(properties);
 $(target).xiboLayoutScaler(properties);
 
 // Get items
@@ -429,6 +428,7 @@ var items = $(target).find(".template-item");
 var body = $(target).find(".template-container");
 
 $(target).find("#content").xiboFinanceRender(properties, items, body);
+$(target).find("img").xiboImageRender(properties);
         ]]></onTemplateRender>
         <onTemplateVisible><![CDATA[
 // Start effects for this template
@@ -740,7 +740,6 @@ h1 {
 // target: The target element to render
 // items: The items to render
 // properties: The properties for the widget
-$(target).find("img").xiboImageRender(properties);
 $(target).xiboLayoutScaler(properties);
 
 // Get items
@@ -750,6 +749,7 @@ var items = $(target).find(".template-item");
 var body = $(target).find(".template-container");
 
 $(target).find("#content").xiboFinanceRender(properties, items, body);
+$(target).find("img").xiboImageRender(properties);
         ]]></onTemplateRender>
         <onTemplateVisible><![CDATA[
 // Start effects for this template
diff --git a/modules/text.xml b/modules/text.xml
index 115a41567f..c64f37d954 100755
--- a/modules/text.xml
+++ b/modules/text.xml
@@ -164,13 +164,13 @@ properties.type = 'text';
 // Replace content with the parsed text
 $(target).find('#content').html(properties.text);
 
-// Image render
-$(target).find('img').xiboImageRender(properties);
-
 // Scale the layout
 $('body').xiboLayoutScaler(properties);
 
 $(target).xiboTextRender(Object.assign(properties, globalOptions), $(target).find('#content > *'));
+
+// Image render
+$(target).find('img').xiboImageRender(properties);
     ]]></onRender>
     <onVisible><![CDATA[
 // If we have a clock, create method and start it
diff --git a/ui/src/layout-editor/main.js b/ui/src/layout-editor/main.js
index 03dbc38dcd..48c6cecbec 100644
--- a/ui/src/layout-editor/main.js
+++ b/ui/src/layout-editor/main.js
@@ -26,6 +26,9 @@ require('../../public_path');
 window.Handlebars = require('handlebars/dist/handlebars.min.js');
 require('../../../modules/src/handlebars-helpers.js');
 
+// Add image render lib
+import '/modules/src/xibo-image-render.js';
+
 // Include handlebars templates
 const designerMainTemplate = require('../templates/layout-editor.hbs');
 const messageTemplate = require('../templates/message.hbs');
@@ -1926,7 +1929,7 @@ lD.dropItemAdd = function(droppable, draggable, dropPosition) {
                 draggableData.templateId = 'global_library_image';
                 draggableData.dataType = 'global';
                 draggableData.subType = 'global';
-                draggableData.extendsTemplate = 'global-image';
+                draggableData.extendsTemplate = 'global_image';
                 draggableData.extendsOverride = 'url';
                 draggableData.templateStartWidth = template.startWidth;
                 draggableData.templateStartHeight = template.startHeight;
diff --git a/ui/src/playlist-editor/main.js b/ui/src/playlist-editor/main.js
index b260fb069e..83cfd977e5 100644
--- a/ui/src/playlist-editor/main.js
+++ b/ui/src/playlist-editor/main.js
@@ -21,6 +21,9 @@
 // Include public path for webpack
 require('../../public_path');
 
+// Add image render lib
+import '/modules/src/xibo-image-render.js';
+
 // Include handlebars templates
 const playlistEditorTemplate =
   require('../templates/playlist-editor.hbs');