From 53dda3e789058c22b4ebb235dd0ba0c3c31d660d Mon Sep 17 00:00:00 2001
From: Maksym Shokin <maksym.sh@upplabs.com>
Date: Tue, 25 Aug 2020 18:18:10 +0300
Subject: [PATCH 1/4] images

---
 css/layout-css/agenda-style.upload.css        | 14 ++++++++
 css/layout-css/news-feed-style.upload.css     | 14 ++++++++
 css/layout-css/simple-list-style.upload.css   | 14 ++++++++
 css/layout-css/small-card-style.upload.css    | 14 ++++++++
 css/layout-css/small-h-card-style.upload.css  | 14 ++++++++
 js/build.templates.js                         | 10 +++---
 js/layout-javascript/agenda-code.js           | 31 ++++++++++++++++-
 js/layout-javascript/news-feed-code.js        | 31 ++++++++++++++++-
 js/layout-javascript/simple-list-code.js      | 33 +++++++++++++++++--
 js/layout-javascript/small-card-code.js       | 33 +++++++++++++++++--
 js/layout-javascript/small-h-card-code.js     | 31 ++++++++++++++++-
 js/utils.js                                   |  4 +++
 templates/build/agenda-cards-detail.build.hbs | 16 +++++++--
 templates/build/news-feed-detail.build.hbs    | 16 +++++++--
 templates/build/simple-list-detail.build.hbs  | 16 +++++++--
 templates/build/small-card-detail.build.hbs   | 16 +++++++--
 templates/build/small-h-card-detail.build.hbs | 18 ++++++++--
 17 files changed, 302 insertions(+), 23 deletions(-)

diff --git a/css/layout-css/agenda-style.upload.css b/css/layout-css/agenda-style.upload.css
index 24973885..1438552a 100644
--- a/css/layout-css/agenda-style.upload.css
+++ b/css/layout-css/agenda-style.upload.css
@@ -1522,6 +1522,20 @@
   display: none;
 }
 
+.agenda-multiple-images-holder {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+
+.agenda-multiple-images-item {
+  flex: 1 1 70px;
+  margin: 10px;
+  border-radius: 5px;
+  overflow: hidden;
+  cursor: pointer;
+}
+
 @media screen and (min-width: 640px) {
   .agenda-detail-overlay .agenda-detail-overlay-wrapper {
     position: absolute;
diff --git a/css/layout-css/news-feed-style.upload.css b/css/layout-css/news-feed-style.upload.css
index 6ae5e0ad..1d237deb 100644
--- a/css/layout-css/news-feed-style.upload.css
+++ b/css/layout-css/news-feed-style.upload.css
@@ -1514,6 +1514,20 @@ html.ie11 .new-news-feed-list-container .news-feed-list-item:not(.open) .slide-o
   padding: 20px 15px;
 }
 
+.news-feed-multiple-images-holder {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+
+.news-feed-multiple-images-item {
+  flex: 1 1 70px;
+  margin: 10px;
+  border-radius: 5px;
+  overflow: hidden;
+  cursor: pointer;
+}
+
 @media screen and (min-width: 640px) {
   .news-feed-detail-overlay .news-feed-detail-wrapper .news-feed-item-inner-content {
     padding: 20px 15px;
diff --git a/css/layout-css/simple-list-style.upload.css b/css/layout-css/simple-list-style.upload.css
index 145234cf..47bd362b 100644
--- a/css/layout-css/simple-list-style.upload.css
+++ b/css/layout-css/simple-list-style.upload.css
@@ -1180,6 +1180,20 @@ html.ie11 .simple-list-item .list-item-description {
   margin-left: 5px;
 }
 
+.simple-list-multiple-images-holder {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+
+.simple-list-multiple-images-item {
+  flex: 1 1 70px;
+  margin: 10px;
+  border-radius: 5px;
+  overflow: hidden;
+  cursor: pointer;
+}
+
 @media screen and (min-width: 640px) {
   .simple-list-detail-overlay .simple-list-detail-overlay-wrapper {
     position: absolute;
diff --git a/css/layout-css/small-card-style.upload.css b/css/layout-css/small-card-style.upload.css
index 3bd5a8db..737c3951 100644
--- a/css/layout-css/small-card-style.upload.css
+++ b/css/layout-css/small-card-style.upload.css
@@ -1191,6 +1191,20 @@
   display: none;
 }
 
+.small-card-multiple-images-holder {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+
+.small-card-list-multiple-images-item {
+  flex: 1 1 70px;
+  margin: 10px;
+  border-radius: 5px;
+  overflow: hidden;
+  cursor: pointer;
+}
+
 @media screen and (min-width: 640px) {
   .small-card-detail-overlay .small-card-detail-overlay-wrapper {
     position: absolute;
diff --git a/css/layout-css/small-h-card-style.upload.css b/css/layout-css/small-h-card-style.upload.css
index ef8a413c..adbe699a 100644
--- a/css/layout-css/small-h-card-style.upload.css
+++ b/css/layout-css/small-h-card-style.upload.css
@@ -512,6 +512,20 @@
   display: none;
 }
 
+.small-h-card-multiple-images-holder {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+
+.small-h-card-multiple-images-item {
+  flex: 1 1 70px;
+  margin: 10px;
+  border-radius: 5px;
+  overflow: hidden;
+  cursor: pointer;
+}
+
 @media screen and (min-width: 640px) {
   .small-h-card-detail-overlay .small-h-card-detail-overlay-wrapper {
     position: absolute;
diff --git a/js/build.templates.js b/js/build.templates.js
index eba433b8..143828a4 100644
--- a/js/build.templates.js
+++ b/js/build.templates.js
@@ -7,7 +7,7 @@ this["Fliplet"]["Widget"]["Templates"]["templates.build.agenda-base"] = Handleba
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.build.agenda-cards-detail"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "<div class=\"agenda-item-inner-content clearfix\" data-entry-id=\"{{id}}\">\n  <div class=\"agenda-item-content-holder\">\n    {{#if [Title]}}\n    <h2 class=\"agenda-item-title\">{{[Title]}}</h2>\n    {{/if}}\n    <div class=\"agenda-item-session-location\">\n      {{#if [Location]}}\n      <p class=\"agenda-item-location\">{{{[Location]}}}</p>\n      {{/if}}\n      <p class=\"agenda-item-start-date-time\">{{[Start Time]}}{{#ifCond [Start Time] '&&' [End Time]}} - {{/ifCond}}{{[End Time]}}{{#if [Full Date]}} / {{/if}}{{moment [Full Date] format=\"D MMM YYYY\"}}</p>\n    </div>\n\n    <div class=\"agenda-item-bookmark {{#if agendaButtonsEnabled}}more-buttons{{/if}}\">\n      <div class=\"agenda-item-bookmark-holder agenda-item-bookmark-holder-{{id}}\">\n        <div class=\"bookmark-wrapper btn-bookmark\">\n          <i class=\"fa fa-bookmark-o\"></i>Bookmark\n        </div>\n        <div class=\"bookmark-wrapper btn-bookmarked\">\n          <i class=\"fa fa-bookmark\"></i>Bookmarked\n        </div>\n\n        <div class=\"agenda-item-add-agenda\"></div>\n      </div>\n      {{#if pollButton}}\n      <div class=\"go-to-poll session-button\">\n        <i class=\"fa fa-pie-chart\"></i>Poll\n      </div>\n      {{/if}}\n      {{#if surveyButton}}\n      <div class=\"go-to-survey session-button\">\n        <i class=\"fa fa-pencil-square-o\"></i>Survey\n      </div>\n      {{/if}}\n      {{#if questionsButton}}\n      <div class=\"go-to-questions session-button\">\n        <i class=\"fa fa-question-circle-o\"></i>Questions\n      </div>\n      {{/if}}\n    </div>\n\n    <div class=\"agenda-item-description\">\n      {{#each entryDetails}}\n        <!-- Image template -->\n        {{#ifCond type '==' 'image'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"agenda-item-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"agenda-item-detail-body-text\">\n              <img src=\"{{validateImage content}}\">\n            </div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- Plain text template -->\n        {{#ifCond type '==' 'text'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"agenda-item-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"agenda-item-detail-body-text\">{{content}}</div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- HTML template -->\n        {{#ifCond type '==' 'html'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"agenda-item-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"agenda-item-detail-body-text\">{{{auth content}}}</div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- URL template -->\n        {{#ifCond type '==' 'url'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"agenda-item-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"agenda-item-detail-body-text\">\n              <a href=\"{{{auth content}}}\" target=\"_blank\">Tap to open</a>\n            </div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- Telephone template -->\n        {{#ifCond type '==' 'tel'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"agenda-item-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"agenda-item-detail-body-text\">\n              <a href=\"tel:{{removeSpaces content}}\" target=\"_blank\">{{content}}</a>\n            </div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- Email template -->\n        {{#ifCond type '==' 'mail'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"agenda-item-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"agenda-item-detail-body-text\">\n              <a href=\"mailto:{{content}}\" target=\"_blank\">{{content}}</a>\n            </div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- Date template -->\n        {{#ifCond type '==' 'date'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"agenda-item-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"agenda-item-detail-body-text\">{{formatDate content}}</div>\n          {{/if}}\n        {{/ifCond}}\n\n      {{/each}}\n    </div>\n\n    {{#ifCond editEntry '||' deleteEntry}}\n    <div class=\"dynamic-list-controls\">\n      {{#if editEntry}}\n      <div class=\"btn btn-default dynamic-list-edit-item\">Edit</div>\n      {{/if}}\n      {{#if deleteEntry}}\n      <div class=\"btn btn-danger dynamic-list-delete-item\">Delete</div>\n      {{/if}}\n    </div>\n    {{/ifCond}}\n  </div>\n</div>";
+    return "<div class=\"agenda-item-inner-content clearfix\" data-entry-id=\"{{id}}\">\n  <div class=\"agenda-item-content-holder\">\n    {{#if [Title]}}\n    <h2 class=\"agenda-item-title\">{{[Title]}}</h2>\n    {{/if}}\n    <div class=\"agenda-item-session-location\">\n      {{#if [Location]}}\n      <p class=\"agenda-item-location\">{{{[Location]}}}</p>\n      {{/if}}\n      <p class=\"agenda-item-start-date-time\">{{[Start Time]}}{{#ifCond [Start Time] '&&' [End Time]}} - {{/ifCond}}{{[End Time]}}{{#if [Full Date]}} / {{/if}}{{moment [Full Date] format=\"D MMM YYYY\"}}</p>\n    </div>\n\n    <div class=\"agenda-item-bookmark {{#if agendaButtonsEnabled}}more-buttons{{/if}}\">\n      <div class=\"agenda-item-bookmark-holder agenda-item-bookmark-holder-{{id}}\">\n        <div class=\"bookmark-wrapper btn-bookmark\">\n          <i class=\"fa fa-bookmark-o\"></i>Bookmark\n        </div>\n        <div class=\"bookmark-wrapper btn-bookmarked\">\n          <i class=\"fa fa-bookmark\"></i>Bookmarked\n        </div>\n\n        <div class=\"agenda-item-add-agenda\"></div>\n      </div>\n      {{#if pollButton}}\n      <div class=\"go-to-poll session-button\">\n        <i class=\"fa fa-pie-chart\"></i>Poll\n      </div>\n      {{/if}}\n      {{#if surveyButton}}\n      <div class=\"go-to-survey session-button\">\n        <i class=\"fa fa-pencil-square-o\"></i>Survey\n      </div>\n      {{/if}}\n      {{#if questionsButton}}\n      <div class=\"go-to-questions session-button\">\n        <i class=\"fa fa-question-circle-o\"></i>Questions\n      </div>\n      {{/if}}\n    </div>\n\n    <div class=\"agenda-item-description\">\n      {{#each entryDetails}}\n        <!-- Image template -->\n        {{#ifCond type '==' 'image'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"agenda-item-detail-label\">{{label}}</div>\n            {{/if}}\n\n            {{#if (isSingle content)}}\n              {{#each content}}\n              <div class=\"agenda-item-detail-body-text\">\n                <img src=\"{{validateImage this}}\">\n              </div>\n              {{/each}}\n            {{else}}\n            <div class=\"agenda-multiple-images-holder\">\n              {{#each content}}\n              <div class=\"agenda-multiple-images-item\">\n                <img src=\"{{validateImage this}}\">\n              </div>\n              {{/each}}\n            </div>\n            {{/if}}\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- Plain text template -->\n        {{#ifCond type '==' 'text'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"agenda-item-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"agenda-item-detail-body-text\">{{content}}</div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- HTML template -->\n        {{#ifCond type '==' 'html'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"agenda-item-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"agenda-item-detail-body-text\">{{{auth content}}}</div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- URL template -->\n        {{#ifCond type '==' 'url'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"agenda-item-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"agenda-item-detail-body-text\">\n              <a href=\"{{{auth content}}}\" target=\"_blank\">Tap to open</a>\n            </div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- Telephone template -->\n        {{#ifCond type '==' 'tel'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"agenda-item-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"agenda-item-detail-body-text\">\n              <a href=\"tel:{{removeSpaces content}}\" target=\"_blank\">{{content}}</a>\n            </div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- Email template -->\n        {{#ifCond type '==' 'mail'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"agenda-item-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"agenda-item-detail-body-text\">\n              <a href=\"mailto:{{content}}\" target=\"_blank\">{{content}}</a>\n            </div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- Date template -->\n        {{#ifCond type '==' 'date'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"agenda-item-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"agenda-item-detail-body-text\">{{formatDate content}}</div>\n          {{/if}}\n        {{/ifCond}}\n\n      {{/each}}\n    </div>\n\n    {{#ifCond editEntry '||' deleteEntry}}\n    <div class=\"dynamic-list-controls\">\n      {{#if editEntry}}\n      <div class=\"btn btn-default dynamic-list-edit-item\">Edit</div>\n      {{/if}}\n      {{#if deleteEntry}}\n      <div class=\"btn btn-danger dynamic-list-delete-item\">Delete</div>\n      {{/if}}\n    </div>\n    {{/ifCond}}\n  </div>\n</div>";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.build.agenda-cards-loop"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
@@ -35,7 +35,7 @@ this["Fliplet"]["Widget"]["Templates"]["templates.build.news-feed-comment"] = Ha
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.build.news-feed-detail"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "<div class=\"news-feed-details-content-holder\" data-entry-id=\"{{id}}\">\n  {{#if [Image]}}\n  <div class=\"news-feed-list-detail-image-wrapper\">\n    <img src=\"{{validateImage [Image]}}\">\n  </div>\n  {{/if}}\n  <div class=\"news-feed-list-detail-content-scroll-wrapper\">\n    <div class=\"news-feed-item-inner-content\">\n      <div class=\"news-feed-info-holder {{#ifCond [Date] '||' [Categories]}}has-date-category{{/ifCond}}\">\n        {{#ifCond [Date] '||' [Categories]}}\n        <div class=\"news-feed-date-category\">{{formatDate [Date]}} {{#ifCond [Date] '&&' [Categories]}}/{{/ifCond}} {{[Categories]}}</div>\n        {{/ifCond}}\n        {{#if likesEnabled}}\n        <div class=\"news-feed-like-holder news-feed-like-holder-{{id}}\">\n          <div class=\"news-feed-like-wrapper btn-like\">\n            <span class=\"count\"></span><i class=\"fa fa-heart-o fa-lg\"></i>\n          </div>\n          <div class=\"news-feed-like-wrapper btn-liked\">\n            <span class=\"count\"></span><i class=\"fa fa-heart fa-lg animated bounceIn\"></i>\n          </div>\n        </div>\n        {{/if}}\n\n        {{#if bookmarksEnabled}}\n        <div class=\"news-feed-bookmark-holder news-feed-bookmark-holder-{{id}}\">\n          <div class=\"news-feed-bookmark-wrapper btn-bookmark\">\n            <i class=\"fa fa-bookmark-o fa-lg\"></i>\n          </div>\n          <div class=\"news-feed-bookmark-wrapper btn-bookmarked\">\n            <i class=\"fa fa-bookmark fa-lg animated fadeIn\"></i>\n          </div>\n        </div>\n        {{/if}}\n\n        {{#if commentsEnabled}}\n        <div class=\"news-feed-comment-holder news-feed-comemnt-holder-{{id}}\">\n          <!-- Like button will be here -->\n          <!-- Like placeholder -->\n          <i class=\"fa fa-comment-o fa-lg comment-placeholder\"></i>\n        </div>\n        {{/if}}\n      </div>\n      {{#if [Title]}}\n      <h2 class=\"news-feed-item-title\">{{[Title]}}</h2>\n      {{/if}}\n      {{#if [Content]}}\n      <div class=\"news-feed-item-description\">\n        {{{auth [Content]}}}\n      </div>\n      {{/if}}\n      <div class=\"news-feed-details-holder\">\n        {{#each entryDetails}}\n          <!-- Image template -->\n          {{#ifCond type '==' 'image'}}\n            {{#if content}}\n              {{#if labelEnabled}}\n              <div class=\"news-feed-detail-label\">{{label}}</div>\n              {{/if}}\n\n              <div class=\"news-feed-detail-value\">\n                <img src=\"{{validateImage content}}\">\n              </div>\n            {{/if}}\n          {{/ifCond}}\n\n          <!-- Plain text template -->\n          {{#ifCond type '==' 'text'}}\n            {{#if content}}\n              {{#if labelEnabled}}\n              <div class=\"news-feed-detail-label\">{{label}}</div>\n              {{/if}}\n\n              <div class=\"news-feed-detail-value\">{{content}}</div>\n            {{/if}}\n          {{/ifCond}}\n\n          <!-- HTML template -->\n          {{#ifCond type '==' 'html'}}\n            {{#if content}}\n              {{#if labelEnabled}}\n              <div class=\"news-feed-detail-label\">{{label}}</div>\n              {{/if}}\n\n              <div class=\"news-feed-detail-value\">{{{auth content}}}</div>\n            {{/if}}\n          {{/ifCond}}\n\n          <!-- URL template -->\n          {{#ifCond type '==' 'url'}}\n            {{#if content}}\n              {{#if labelEnabled}}\n              <div class=\"news-feed-detail-label\">{{label}}</div>\n              {{/if}}\n\n              <div class=\"news-feed-detail-value\">\n                <a href=\"{{{auth content}}}\" target=\"_blank\">Tap to open</a>\n              </div>\n            {{/if}}\n          {{/ifCond}}\n\n          <!-- Telephone template -->\n          {{#ifCond type '==' 'tel'}}\n            {{#if content}}\n              {{#if labelEnabled}}\n              <div class=\"news-feed-detail-label\">{{label}}</div>\n              {{/if}}\n\n              <div class=\"news-feed-detail-value\">\n                <a href=\"tel:{{removeSpaces content}}\" target=\"_blank\">{{content}}</a>\n              </div>\n            {{/if}}\n          {{/ifCond}}\n\n          <!-- Email template -->\n          {{#ifCond type '==' 'mail'}}\n            {{#if content}}\n              {{#if labelEnabled}}\n              <div class=\"news-feed-detail-label\">{{label}}</div>\n              {{/if}}\n\n              <div class=\"news-feed-detail-value\">\n                <a href=\"mailto:{{content}}\" target=\"_blank\">{{content}}</a>\n              </div>\n            {{/if}}\n          {{/ifCond}}\n\n          <!-- Date template -->\n          {{#ifCond type '==' 'date'}}\n            {{#if content}}\n              {{#if labelEnabled}}\n              <div class=\"news-feed-detail-label\">{{label}}</div>\n              {{/if}}\n\n              <div class=\"news-feed-detail-value\">{{formatDate content}}</div>\n            {{/if}}\n          {{/ifCond}}\n\n        {{/each}}\n      </div>\n      <div class=\"news-feed-inner-holder {{#ifCond editEntry '||' deleteEntry}}has-edit-controls{{/ifCond}}\">\n        {{#ifCond editEntry '||' deleteEntry}}\n        <div class=\"dynamic-list-controls\">\n          {{#if editEntry}}\n          <div class=\"btn btn-default dynamic-list-edit-item\">Edit</div>\n          {{/if}}\n          {{#if deleteEntry}}\n          <div class=\"btn btn-danger dynamic-list-delete-item\">Delete</div>\n          {{/if}}\n        </div>\n        {{/ifCond}}\n        {{#if commentsEnabled}}\n        <div class=\"news-feed-comment-holder news-feed-comemnt-holder-{{id}}\">\n          <!-- Like button will be here -->\n          <!-- Like placeholder -->\n          <i class=\"fa fa-comment-o fa-lg comment-placeholder\"></i>\n        </div>\n        {{/if}}\n      </div>\n    </div>\n  </div>\n</div>";
+    return "<div class=\"news-feed-details-content-holder\" data-entry-id=\"{{id}}\">\n  {{#if [Image]}}\n  <div class=\"news-feed-list-detail-image-wrapper\">\n    <img src=\"{{validateImage [Image]}}\">\n  </div>\n  {{/if}}\n  <div class=\"news-feed-list-detail-content-scroll-wrapper\">\n    <div class=\"news-feed-item-inner-content\">\n      <div class=\"news-feed-info-holder {{#ifCond [Date] '||' [Categories]}}has-date-category{{/ifCond}}\">\n        {{#ifCond [Date] '||' [Categories]}}\n        <div class=\"news-feed-date-category\">{{formatDate [Date]}} {{#ifCond [Date] '&&' [Categories]}}/{{/ifCond}} {{[Categories]}}</div>\n        {{/ifCond}}\n        {{#if likesEnabled}}\n        <div class=\"news-feed-like-holder news-feed-like-holder-{{id}}\">\n          <div class=\"news-feed-like-wrapper btn-like\">\n            <span class=\"count\"></span><i class=\"fa fa-heart-o fa-lg\"></i>\n          </div>\n          <div class=\"news-feed-like-wrapper btn-liked\">\n            <span class=\"count\"></span><i class=\"fa fa-heart fa-lg animated bounceIn\"></i>\n          </div>\n        </div>\n        {{/if}}\n\n        {{#if bookmarksEnabled}}\n        <div class=\"news-feed-bookmark-holder news-feed-bookmark-holder-{{id}}\">\n          <div class=\"news-feed-bookmark-wrapper btn-bookmark\">\n            <i class=\"fa fa-bookmark-o fa-lg\"></i>\n          </div>\n          <div class=\"news-feed-bookmark-wrapper btn-bookmarked\">\n            <i class=\"fa fa-bookmark fa-lg animated fadeIn\"></i>\n          </div>\n        </div>\n        {{/if}}\n\n        {{#if commentsEnabled}}\n        <div class=\"news-feed-comment-holder news-feed-comemnt-holder-{{id}}\">\n          <!-- Like button will be here -->\n          <!-- Like placeholder -->\n          <i class=\"fa fa-comment-o fa-lg comment-placeholder\"></i>\n        </div>\n        {{/if}}\n      </div>\n      {{#if [Title]}}\n      <h2 class=\"news-feed-item-title\">{{[Title]}}</h2>\n      {{/if}}\n      {{#if [Content]}}\n      <div class=\"news-feed-item-description\">\n        {{{auth [Content]}}}\n      </div>\n      {{/if}}\n      <div class=\"news-feed-details-holder\">\n        {{#each entryDetails}}\n          <!-- Image template -->\n          {{#ifCond type '==' 'image'}}\n            {{#if content}}\n              {{#if labelEnabled}}\n              <div class=\"news-feed-detail-label\">{{label}}</div>\n              {{/if}}\n\n              {{#if (isSingle content)}}\n                {{#each content}}\n                <div class=\"news-feed-detail-value\">\n                  <img src=\"{{validateImage this}}\">\n                </div>\n                {{/each}}\n              {{else}}\n              <div class=\"news-feed-multiple-images-holder\">\n                {{#each content}}\n                <div class=\"news-feed-multiple-images-item\">\n                  <img src=\"{{validateImage this}}\">\n                </div>\n                {{/each}}\n              </div>\n              {{/if}}\n            {{/if}}\n          {{/ifCond}}\n\n          <!-- Plain text template -->\n          {{#ifCond type '==' 'text'}}\n            {{#if content}}\n              {{#if labelEnabled}}\n              <div class=\"news-feed-detail-label\">{{label}}</div>\n              {{/if}}\n\n              <div class=\"news-feed-detail-value\">{{content}}</div>\n            {{/if}}\n          {{/ifCond}}\n\n          <!-- HTML template -->\n          {{#ifCond type '==' 'html'}}\n            {{#if content}}\n              {{#if labelEnabled}}\n              <div class=\"news-feed-detail-label\">{{label}}</div>\n              {{/if}}\n\n              <div class=\"news-feed-detail-value\">{{{auth content}}}</div>\n            {{/if}}\n          {{/ifCond}}\n\n          <!-- URL template -->\n          {{#ifCond type '==' 'url'}}\n            {{#if content}}\n              {{#if labelEnabled}}\n              <div class=\"news-feed-detail-label\">{{label}}</div>\n              {{/if}}\n\n              <div class=\"news-feed-detail-value\">\n                <a href=\"{{{auth content}}}\" target=\"_blank\">Tap to open</a>\n              </div>\n            {{/if}}\n          {{/ifCond}}\n\n          <!-- Telephone template -->\n          {{#ifCond type '==' 'tel'}}\n            {{#if content}}\n              {{#if labelEnabled}}\n              <div class=\"news-feed-detail-label\">{{label}}</div>\n              {{/if}}\n\n              <div class=\"news-feed-detail-value\">\n                <a href=\"tel:{{removeSpaces content}}\" target=\"_blank\">{{content}}</a>\n              </div>\n            {{/if}}\n          {{/ifCond}}\n\n          <!-- Email template -->\n          {{#ifCond type '==' 'mail'}}\n            {{#if content}}\n              {{#if labelEnabled}}\n              <div class=\"news-feed-detail-label\">{{label}}</div>\n              {{/if}}\n\n              <div class=\"news-feed-detail-value\">\n                <a href=\"mailto:{{content}}\" target=\"_blank\">{{content}}</a>\n              </div>\n            {{/if}}\n          {{/ifCond}}\n\n          <!-- Date template -->\n          {{#ifCond type '==' 'date'}}\n            {{#if content}}\n              {{#if labelEnabled}}\n              <div class=\"news-feed-detail-label\">{{label}}</div>\n              {{/if}}\n\n              <div class=\"news-feed-detail-value\">{{formatDate content}}</div>\n            {{/if}}\n          {{/ifCond}}\n\n        {{/each}}\n      </div>\n      <div class=\"news-feed-inner-holder {{#ifCond editEntry '||' deleteEntry}}has-edit-controls{{/ifCond}}\">\n        {{#ifCond editEntry '||' deleteEntry}}\n        <div class=\"dynamic-list-controls\">\n          {{#if editEntry}}\n          <div class=\"btn btn-default dynamic-list-edit-item\">Edit</div>\n          {{/if}}\n          {{#if deleteEntry}}\n          <div class=\"btn btn-danger dynamic-list-delete-item\">Delete</div>\n          {{/if}}\n        </div>\n        {{/ifCond}}\n        {{#if commentsEnabled}}\n        <div class=\"news-feed-comment-holder news-feed-comemnt-holder-{{id}}\">\n          <!-- Like button will be here -->\n          <!-- Like placeholder -->\n          <i class=\"fa fa-comment-o fa-lg comment-placeholder\"></i>\n        </div>\n        {{/if}}\n      </div>\n    </div>\n  </div>\n</div>";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.build.news-feed-filters"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
@@ -63,7 +63,7 @@ this["Fliplet"]["Widget"]["Templates"]["templates.build.simple-list-comment"] =
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.build.simple-list-detail"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "<div class=\"simple-list-details-holder\" data-entry-id=\"{{id}}\">\n  {{#each data}}\n    <!-- Image template -->\n    {{#ifCond type '==' 'image'}}\n      {{#if content}}\n        {{#if labelEnabled}}\n        <div class=\"simple-list-detail-label\">{{label}}</div>\n        {{/if}}\n\n        <div class=\"simple-list-detail-value\">\n          <img src=\"{{validateImage content}}\">\n        </div>\n      {{/if}}\n    {{/ifCond}}\n\n    <!-- Plain text template -->\n    {{#ifCond type '==' 'text'}}\n      {{#if content}}\n        {{#if labelEnabled}}\n        <div class=\"simple-list-detail-label\">{{label}}</div>\n        {{/if}}\n\n        <div class=\"simple-list-detail-value\">{{content}}</div>\n      {{/if}}\n    {{/ifCond}}\n\n    <!-- HTML template -->\n    {{#ifCond type '==' 'html'}}\n      {{#if content}}\n        {{#if labelEnabled}}\n        <div class=\"simple-list-detail-label\">{{label}}</div>\n        {{/if}}\n\n        <div class=\"simple-list-detail-value\">{{{auth content}}}</div>\n      {{/if}}\n    {{/ifCond}}\n\n    <!-- URL template -->\n    {{#ifCond type '==' 'url'}}\n      {{#if content}}\n        {{#if labelEnabled}}\n        <div class=\"simple-list-detail-label\">{{label}}</div>\n        {{/if}}\n\n        <div class=\"simple-list-detail-value\">\n          <a href=\"{{{auth content}}}\" target=\"_blank\">Tap to open</a>\n        </div>\n      {{/if}}\n    {{/ifCond}}\n\n    <!-- Telephone template -->\n    {{#ifCond type '==' 'tel'}}\n      {{#if content}}\n        {{#if labelEnabled}}\n        <div class=\"simple-list-detail-label\">{{label}}</div>\n        {{/if}}\n\n        <div class=\"simple-list-detail-value\">\n          <a href=\"tel:{{removeSpaces content}}\" target=\"_blank\">{{content}}</a>\n        </div>\n      {{/if}}\n    {{/ifCond}}\n\n    <!-- Email template -->\n    {{#ifCond type '==' 'mail'}}\n      {{#if content}}\n        {{#if labelEnabled}}\n        <div class=\"simple-list-detail-label\">{{label}}</div>\n        {{/if}}\n\n        <div class=\"simple-list-detail-value\">\n          <a href=\"mailto:{{content}}\" target=\"_blank\">{{content}}</a>\n        </div>\n      {{/if}}\n    {{/ifCond}}\n\n    <!-- Date template -->\n    {{#ifCond type '==' 'date'}}\n      {{#if content}}\n        {{#if labelEnabled}}\n        <div class=\"simple-list-detail-label\">{{label}}</div>\n        {{/if}}\n\n        <div class=\"simple-list-detail-value\">{{formatDate content}}</div>\n      {{/if}}\n    {{/ifCond}}\n\n  {{/each}}\n\n  <!-- Edit and Delete buttons -->\n  <div class=\"simple-list-overlay-inner-holder {{#ifCond editEntry '||' deleteEntry}}has-edit-controls{{/ifCond}}\">\n    {{#ifCond editEntry '||' deleteEntry}}\n    <div class=\"dynamic-list-controls\">\n      {{#if editEntry}}\n      <div class=\"btn btn-default dynamic-list-edit-item\">Edit</div>\n      {{/if}}\n      {{#if deleteEntry}}\n      <div class=\"btn btn-danger dynamic-list-delete-item\">Delete</div>\n      {{/if}}\n    </div>\n    {{/ifCond}}\n    <div class=\"simple-list-overlay-social-holder\">\n      {{#if likesEnabled}}\n      <div class=\"simple-list-like-holder simple-list-like-holder-{{id}}\">\n        <div class=\"simple-list-like-wrapper btn-like\">\n          <span class=\"count\"></span><i class=\"fa fa-heart-o fa-lg\"></i>\n        </div>\n        <div class=\"simple-list-like-wrapper btn-liked\">\n          <span class=\"count\"></span><i class=\"fa fa-heart fa-lg animated bounceIn\"></i>\n        </div>\n      </div>\n      {{/if}}\n\n      {{#if bookmarksEnabled}}\n      <div class=\"simple-list-bookmark-holder simple-list-bookmark-holder-{{id}}\">\n        <div class=\"simple-list-bookmark-wrapper btn-bookmark\">\n          <i class=\"fa fa-bookmark-o fa-lg\"></i>\n        </div>\n        <div class=\"simple-list-bookmark-wrapper btn-bookmarked\">\n          <i class=\"fa fa-bookmark fa-lg animated fadeIn\"></i>\n        </div>\n      </div>\n      {{/if}}\n\n      {{#if commentsEnabled}}\n      <div class=\"simple-list-comment-holder simple-list-comemnt-holder-{{id}}\">\n        <!-- Like button will be here -->\n        <!-- Like placeholder -->\n        <i class=\"fa fa-comment-o fa-lg comment-placeholder\"></i>\n      </div>\n      {{/if}}\n    </div>\n  </div>\n</div>";
+    return "<div class=\"simple-list-details-holder\" data-entry-id=\"{{id}}\">\n  {{#each data}}\n    <!-- Image template -->\n    {{#ifCond type '==' 'image'}}\n      {{#if content}}\n        {{#if labelEnabled}}\n        <div class=\"simple-list-detail-label\">{{label}}</div>\n        {{/if}}\n\n        {{#if (isSingle content)}}\n          {{#each content}}  \n          <div class=\"simple-list-detail-value\">\n            <img src=\"{{validateImage this}}\">\n          </div>\n          {{/each}}\n        {{else}}\n        <div class=\"simple-list-multiple-images-holder\">\n          {{#each content}}\n          <div class=\"simple-list-multiple-images-item\">\n            <img src=\"{{validateImage this}}\">\n          </div>\n          {{/each}}\n        </div>\n        {{/if}}\n      {{/if}}\n    {{/ifCond}}\n\n    <!-- Plain text template -->\n    {{#ifCond type '==' 'text'}}\n      {{#if content}}\n        {{#if labelEnabled}}\n        <div class=\"simple-list-detail-label\">{{label}}</div>\n        {{/if}}\n\n        <div class=\"simple-list-detail-value\">{{content}}</div>\n      {{/if}}\n    {{/ifCond}}\n\n    <!-- HTML template -->\n    {{#ifCond type '==' 'html'}}\n      {{#if content}}\n        {{#if labelEnabled}}\n        <div class=\"simple-list-detail-label\">{{label}}</div>\n        {{/if}}\n\n        <div class=\"simple-list-detail-value\">{{{auth content}}}</div>\n      {{/if}}\n    {{/ifCond}}\n\n    <!-- URL template -->\n    {{#ifCond type '==' 'url'}}\n      {{#if content}}\n        {{#if labelEnabled}}\n        <div class=\"simple-list-detail-label\">{{label}}</div>\n        {{/if}}\n\n        <div class=\"simple-list-detail-value\">\n          <a href=\"{{{auth content}}}\" target=\"_blank\">Tap to open</a>\n        </div>\n      {{/if}}\n    {{/ifCond}}\n\n    <!-- Telephone template -->\n    {{#ifCond type '==' 'tel'}}\n      {{#if content}}\n        {{#if labelEnabled}}\n        <div class=\"simple-list-detail-label\">{{label}}</div>\n        {{/if}}\n\n        <div class=\"simple-list-detail-value\">\n          <a href=\"tel:{{removeSpaces content}}\" target=\"_blank\">{{content}}</a>\n        </div>\n      {{/if}}\n    {{/ifCond}}\n\n    <!-- Email template -->\n    {{#ifCond type '==' 'mail'}}\n      {{#if content}}\n        {{#if labelEnabled}}\n        <div class=\"simple-list-detail-label\">{{label}}</div>\n        {{/if}}\n\n        <div class=\"simple-list-detail-value\">\n          <a href=\"mailto:{{content}}\" target=\"_blank\">{{content}}</a>\n        </div>\n      {{/if}}\n    {{/ifCond}}\n\n    <!-- Date template -->\n    {{#ifCond type '==' 'date'}}\n      {{#if content}}\n        {{#if labelEnabled}}\n        <div class=\"simple-list-detail-label\">{{label}}</div>\n        {{/if}}\n\n        <div class=\"simple-list-detail-value\">{{formatDate content}}</div>\n      {{/if}}\n    {{/ifCond}}\n\n  {{/each}}\n\n  <!-- Edit and Delete buttons -->\n  <div class=\"simple-list-overlay-inner-holder {{#ifCond editEntry '||' deleteEntry}}has-edit-controls{{/ifCond}}\">\n    {{#ifCond editEntry '||' deleteEntry}}\n    <div class=\"dynamic-list-controls\">\n      {{#if editEntry}}\n      <div class=\"btn btn-default dynamic-list-edit-item\">Edit</div>\n      {{/if}}\n      {{#if deleteEntry}}\n      <div class=\"btn btn-danger dynamic-list-delete-item\">Delete</div>\n      {{/if}}\n    </div>\n    {{/ifCond}}\n    <div class=\"simple-list-overlay-social-holder\">\n      {{#if likesEnabled}}\n      <div class=\"simple-list-like-holder simple-list-like-holder-{{id}}\">\n        <div class=\"simple-list-like-wrapper btn-like\">\n          <span class=\"count\"></span><i class=\"fa fa-heart-o fa-lg\"></i>\n        </div>\n        <div class=\"simple-list-like-wrapper btn-liked\">\n          <span class=\"count\"></span><i class=\"fa fa-heart fa-lg animated bounceIn\"></i>\n        </div>\n      </div>\n      {{/if}}\n\n      {{#if bookmarksEnabled}}\n      <div class=\"simple-list-bookmark-holder simple-list-bookmark-holder-{{id}}\">\n        <div class=\"simple-list-bookmark-wrapper btn-bookmark\">\n          <i class=\"fa fa-bookmark-o fa-lg\"></i>\n        </div>\n        <div class=\"simple-list-bookmark-wrapper btn-bookmarked\">\n          <i class=\"fa fa-bookmark fa-lg animated fadeIn\"></i>\n        </div>\n      </div>\n      {{/if}}\n\n      {{#if commentsEnabled}}\n      <div class=\"simple-list-comment-holder simple-list-comemnt-holder-{{id}}\">\n        <!-- Like button will be here -->\n        <!-- Like placeholder -->\n        <i class=\"fa fa-comment-o fa-lg comment-placeholder\"></i>\n      </div>\n      {{/if}}\n    </div>\n  </div>\n</div>";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.build.simple-list-filters"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
@@ -87,7 +87,7 @@ this["Fliplet"]["Widget"]["Templates"]["templates.build.small-card-base"] = Hand
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.build.small-card-detail"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "{{#if [Image]}}\n<div class=\"small-card-list-detail-image-wrapper\">\n  <div class=\"small-card-list-detail-image\" style=\"background-image: url('{{auth [Image]}}')\"></div>\n  {{#unless [Image]}}<i class=\"fa fa-user\"></i>{{/unless}}\n</div>\n{{/if}}\n<div class=\"small-card-list-detail-content-scroll-wrapper\" data-entry-id=\"{{id}}\">\n  <div class=\"small-card-list-detail-content-wrapper\">\n    {{#if bookmarksEnabled}}\n    <div class=\"small-card-bookmark-holder small-card-bookmark-holder-{{id}}\">\n      <div class=\"small-card-bookmark-wrapper btn-bookmark\">\n        <i class=\"fa fa-bookmark-o\"></i>\n      </div>\n      <div class=\"small-card-bookmark-wrapper btn-bookmarked\">\n        <i class=\"fa fa-bookmark animated fadeIn\"></i>\n      </div>\n    </div>\n    {{/if}}\n    {{#ifCond [First Name] '||' [Last Name] }}\n      <div class=\"small-card-list-detail-name\">{{[First Name]}} {{[Last Name]}}</div>\n    {{/ifCond}}\n    <div class=\"small-card-list-detail-role\">{{[Title]}}</div>\n    <div class=\"small-card-list-detail-location\">{{[Location]}}</div>\n    <div class=\"small-card-list-detail-buttons-wrapper\">\n      {{#if [Email]}}\n      <div class=\"small-card-list-detail-button\">\n        <a href=\"mailto:{{[Email]}}\" target=\"_blank\">\n          <div class=\"small-card-list-detail-button-image\"><span class=\"fa fa-envelope-o\"></span></div>\n          <div class=\"small-card-list-detail-button-text\">EMAIL</div>\n        </a>\n      </div>\n      {{/if}}\n      {{#if [Telephone]}}\n      <div class=\"small-card-list-detail-button\">\n        <a href=\"tel:{{[Telephone]}}\" target=\"_blank\">\n          <div class=\"small-card-list-detail-button-image\"><span class=\"fa fa-phone\"></span></div>\n          <div class=\"small-card-list-detail-button-text\">CALL</div>\n        </a>\n      </div>\n      {{/if}}\n      {{#if [Linkedin]}}\n      <div class=\"small-card-list-detail-button\">\n        <a href=\"{{[Linkedin]}}\" target=\"_blank\">\n          <div class=\"small-card-list-detail-button-image\"><span class=\"fa fa-linkedin\"></span></div>\n          <div class=\"small-card-list-detail-button-text\">LINKEDIN</div>\n        </a>\n      </div>\n      {{/if}}\n    </div>\n\n    <div class=\"small-card-details-holder\">\n      {{#each entryDetails}}\n        <!-- Image template -->\n        {{#ifCond type '==' 'image'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-card-list-detail-body-text\">\n              <img src=\"{{validateImage content}}\">\n            </div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- Plain text template -->\n        {{#ifCond type '==' 'text'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-card-list-detail-body-text\">{{content}}</div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- HTML template -->\n        {{#ifCond type '==' 'html'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-card-list-detail-body-text\">{{{auth content}}}</div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- URL template -->\n        {{#ifCond type '==' 'url'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-card-list-detail-body-text\">\n              <a href=\"{{{auth content}}}\" target=\"_blank\">Tap to open</a>\n            </div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- Telephone template -->\n        {{#ifCond type '==' 'tel'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-card-list-detail-body-text\">\n              <a href=\"tel:{{removeSpaces content}}\" target=\"_blank\">{{content}}</a>\n            </div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- Email template -->\n        {{#ifCond type '==' 'mail'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-card-list-detail-body-text\">\n              <a href=\"mailto:{{content}}\" target=\"_blank\">{{content}}</a>\n            </div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- Date template -->\n        {{#ifCond type '==' 'date'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-card-list-detail-body-text\">{{formatDate content}}</div>\n          {{/if}}\n        {{/ifCond}}\n\n      {{/each}}\n    </div>\n\n    <!-- Edit or Delete buttons -->\n    {{#ifCond editEntry '||' deleteEntry}}\n    <div class=\"dynamic-list-controls\">\n      {{#if editEntry}}\n      <div class=\"btn btn-default dynamic-list-edit-item\">Edit</div>\n      {{/if}}\n      {{#if deleteEntry}}\n      <div class=\"btn btn-danger dynamic-list-delete-item\">Delete</div>\n      {{/if}}\n    </div>\n    {{/ifCond}}\n  </div>\n</div>\n";
+    return "{{#if [Image]}}\n<div class=\"small-card-list-detail-image-wrapper\">\n  <div class=\"small-card-list-detail-image\" style=\"background-image: url('{{auth [Image]}}')\"></div>\n  {{#unless [Image]}}<i class=\"fa fa-user\"></i>{{/unless}}\n</div>\n{{/if}}\n<div class=\"small-card-list-detail-content-scroll-wrapper\" data-entry-id=\"{{id}}\">\n  <div class=\"small-card-list-detail-content-wrapper\">\n    {{#if bookmarksEnabled}}\n    <div class=\"small-card-bookmark-holder small-card-bookmark-holder-{{id}}\">\n      <div class=\"small-card-bookmark-wrapper btn-bookmark\">\n        <i class=\"fa fa-bookmark-o\"></i>\n      </div>\n      <div class=\"small-card-bookmark-wrapper btn-bookmarked\">\n        <i class=\"fa fa-bookmark animated fadeIn\"></i>\n      </div>\n    </div>\n    {{/if}}\n    {{#ifCond [First Name] '||' [Last Name] }}\n      <div class=\"small-card-list-detail-name\">{{[First Name]}} {{[Last Name]}}</div>\n    {{/ifCond}}\n    <div class=\"small-card-list-detail-role\">{{[Title]}}</div>\n    <div class=\"small-card-list-detail-location\">{{[Location]}}</div>\n    <div class=\"small-card-list-detail-buttons-wrapper\">\n      {{#if [Email]}}\n      <div class=\"small-card-list-detail-button\">\n        <a href=\"mailto:{{[Email]}}\" target=\"_blank\">\n          <div class=\"small-card-list-detail-button-image\"><span class=\"fa fa-envelope-o\"></span></div>\n          <div class=\"small-card-list-detail-button-text\">EMAIL</div>\n        </a>\n      </div>\n      {{/if}}\n      {{#if [Telephone]}}\n      <div class=\"small-card-list-detail-button\">\n        <a href=\"tel:{{[Telephone]}}\" target=\"_blank\">\n          <div class=\"small-card-list-detail-button-image\"><span class=\"fa fa-phone\"></span></div>\n          <div class=\"small-card-list-detail-button-text\">CALL</div>\n        </a>\n      </div>\n      {{/if}}\n      {{#if [Linkedin]}}\n      <div class=\"small-card-list-detail-button\">\n        <a href=\"{{[Linkedin]}}\" target=\"_blank\">\n          <div class=\"small-card-list-detail-button-image\"><span class=\"fa fa-linkedin\"></span></div>\n          <div class=\"small-card-list-detail-button-text\">LINKEDIN</div>\n        </a>\n      </div>\n      {{/if}}\n    </div>\n\n    <div class=\"small-card-details-holder\">\n      {{#each entryDetails}}\n        <!-- Image template -->\n        {{#ifCond type '==' 'image'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            {{#if (isSingle content)}}\n              {{#each content}}\n              <div class=\"small-card-list-detail-body-text\">\n                <img src=\"{{validateImage this}}\">\n              </div>\n              {{/each}}\n            {{else}}\n            <div class=\"small-card-multiple-images-holder\">\n              {{#each content}}\n              <div class=\"small-card-list-multiple-images-item\">\n                <img src=\"{{validateImage this}}\">\n              </div>\n              {{/each}}\n            </div>\n            {{/if}}\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- Plain text template -->\n        {{#ifCond type '==' 'text'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-card-list-detail-body-text\">{{content}}</div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- HTML template -->\n        {{#ifCond type '==' 'html'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-card-list-detail-body-text\">{{{auth content}}}</div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- URL template -->\n        {{#ifCond type '==' 'url'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-card-list-detail-body-text\">\n              <a href=\"{{{auth content}}}\" target=\"_blank\">Tap to open</a>\n            </div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- Telephone template -->\n        {{#ifCond type '==' 'tel'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-card-list-detail-body-text\">\n              <a href=\"tel:{{removeSpaces content}}\" target=\"_blank\">{{content}}</a>\n            </div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- Email template -->\n        {{#ifCond type '==' 'mail'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-card-list-detail-body-text\">\n              <a href=\"mailto:{{content}}\" target=\"_blank\">{{content}}</a>\n            </div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- Date template -->\n        {{#ifCond type '==' 'date'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-card-list-detail-body-text\">{{formatDate content}}</div>\n          {{/if}}\n        {{/ifCond}}\n\n      {{/each}}\n    </div>\n\n    <!-- Edit or Delete buttons -->\n    {{#ifCond editEntry '||' deleteEntry}}\n    <div class=\"dynamic-list-controls\">\n      {{#if editEntry}}\n      <div class=\"btn btn-default dynamic-list-edit-item\">Edit</div>\n      {{/if}}\n      {{#if deleteEntry}}\n      <div class=\"btn btn-danger dynamic-list-delete-item\">Delete</div>\n      {{/if}}\n    </div>\n    {{/ifCond}}\n  </div>\n</div>\n";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.build.small-card-filters"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
@@ -111,7 +111,7 @@ this["Fliplet"]["Widget"]["Templates"]["templates.build.small-h-card-base"] = Ha
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.build.small-h-card-detail"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "{{#if [Image]}}\n<div class=\"small-h-card-list-detail-image-wrapper\">\n  <div class=\"small-h-card-list-detail-image\" style=\"background-image: url('{{auth [Image]}}')\"></div>\n  {{#unless [Image]}}<i class=\"fa fa-user\"></i>{{/unless}}\n</div>\n{{/if}}\n<div class=\"small-h-card-list-detail-content-scroll-wrapper\" data-entry-id=\"{{id}}\">\n  <div class=\"small-h-card-list-detail-content-wrapper\">\n    <div class=\"small-h-card-list-detail-name\">{{[First Name]}} {{[Last Name]}}</div>\n    <div class=\"small-h-card-list-detail-role\">{{[Title]}}</div>\n    <div class=\"small-h-card-list-detail-location\">{{[Location]}}</div>\n    <div class=\"small-h-card-list-detail-buttons-wrapper\">\n      {{#if [Email]}}\n      <div class=\"small-h-card-list-detail-button\">\n        <a href=\"mailto:{{[Email]}}\" target=\"_blank\">\n          <div class=\"small-h-card-list-detail-button-image\"><span class=\"fa fa-envelope-o\"></span></div>\n          <div class=\"small-h-card-list-detail-button-text\">EMAIL</div>\n        </a>\n      </div>\n      {{/if}}\n      {{#if [Telephone]}}\n      <div class=\"small-h-card-list-detail-button\">\n        <a href=\"tel:{{[Telephone]}}\" target=\"_blank\">\n          <div class=\"small-h-card-list-detail-button-image\"><span class=\"fa fa-phone\"></span></div>\n          <div class=\"small-h-card-list-detail-button-text\">CALL</div>\n        </a>\n      </div>\n      {{/if}}\n      {{#if [Linkedin]}}\n      <div class=\"small-h-card-list-detail-button\">\n        <a href=\"{{[Linkedin]}}\" target=\"_blank\">\n          <div class=\"small-h-card-list-detail-button-image\"><span class=\"fa fa-linkedin\"></span></div>\n          <div class=\"small-h-card-list-detail-button-text\">LINKEDIN</div>\n        </a>\n      </div>\n      {{/if}}\n    </div>\n\n    <div class=\"small-h-card-details-holder\">\n      {{#each entryDetails}}\n        <!-- Image template -->\n        {{#ifCond type '==' 'image'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-h-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-h-card-list-detail-body-text\">\n              <img src=\"{{validateImage content}}\">\n            </div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- Plain text template -->\n        {{#ifCond type '==' 'text'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-h-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-h-card-list-detail-body-text\">{{content}}</div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- HTML template -->\n        {{#ifCond type '==' 'html'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-h-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-h-card-list-detail-body-text\">{{{auth content}}}</div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- URL template -->\n        {{#ifCond type '==' 'url'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-h-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-h-card-list-detail-body-text\">\n              <a href=\"{{{auth content}}}\" target=\"_blank\">Tap to open</a>\n            </div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- Telephone template -->\n        {{#ifCond type '==' 'tel'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-h-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-h-card-list-detail-body-text\">\n              <a href=\"tel:{{removeSpaces content}}\" target=\"_blank\">{{content}}</a>\n            </div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- Email template -->\n        {{#ifCond type '==' 'mail'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-h-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-h-card-list-detail-body-text\">\n              <a href=\"mailto:{{content}}\" target=\"_blank\">{{content}}</a>\n            </div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- Date template -->\n        {{#ifCond type '==' 'date'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-h-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-h-card-list-detail-body-text\">{{formatDate content}}</div>\n          {{/if}}\n        {{/ifCond}}\n\n      {{/each}}\n    </div>\n\n    <!-- Edit or Delete buttons -->\n    {{#ifCond editEntry '||' deleteEntry}}\n    <div class=\"dynamic-list-controls\">\n      {{#if editEntry}}\n      <div class=\"btn btn-default dynamic-list-edit-item\">Edit</div>\n      {{/if}}\n      {{#if deleteEntry}}\n      <div class=\"btn btn-danger dynamic-list-delete-item\">Delete</div>\n      {{/if}}\n    </div>\n    {{/ifCond}}\n  </div>\n</div>";
+    return "{{#if [Image]}}\n<div class=\"small-h-card-list-detail-image-wrapper\">\n  <div class=\"small-h-card-list-detail-image\" style=\"background-image: url('{{auth [Image]}}')\"></div>\n  {{#unless [Image]}}<i class=\"fa fa-user\"></i>{{/unless}}\n</div>\n{{/if}}\n<div class=\"small-h-card-list-detail-content-scroll-wrapper\" data-entry-id=\"{{id}}\">\n  <div class=\"small-h-card-list-detail-content-wrapper\">\n    <div class=\"small-h-card-list-detail-name\">{{[First Name]}} {{[Last Name]}}</div>\n    <div class=\"small-h-card-list-detail-role\">{{[Title]}}</div>\n    <div class=\"small-h-card-list-detail-location\">{{[Location]}}</div>\n    <div class=\"small-h-card-list-detail-buttons-wrapper\">\n      {{#if [Email]}}\n      <div class=\"small-h-card-list-detail-button\">\n        <a href=\"mailto:{{[Email]}}\" target=\"_blank\">\n          <div class=\"small-h-card-list-detail-button-image\"><span class=\"fa fa-envelope-o\"></span></div>\n          <div class=\"small-h-card-list-detail-button-text\">EMAIL</div>\n        </a>\n      </div>\n      {{/if}}\n      {{#if [Telephone]}}\n      <div class=\"small-h-card-list-detail-button\">\n        <a href=\"tel:{{[Telephone]}}\" target=\"_blank\">\n          <div class=\"small-h-card-list-detail-button-image\"><span class=\"fa fa-phone\"></span></div>\n          <div class=\"small-h-card-list-detail-button-text\">CALL</div>\n        </a>\n      </div>\n      {{/if}}\n      {{#if [Linkedin]}}\n      <div class=\"small-h-card-list-detail-button\">\n        <a href=\"{{[Linkedin]}}\" target=\"_blank\">\n          <div class=\"small-h-card-list-detail-button-image\"><span class=\"fa fa-linkedin\"></span></div>\n          <div class=\"small-h-card-list-detail-button-text\">LINKEDIN</div>\n        </a>\n      </div>\n      {{/if}}\n    </div>\n\n    <div class=\"small-h-card-details-holder\">\n      {{#each entryDetails}}\n        <!-- Image template -->\n        {{#ifCond type '==' 'image'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-h-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n \n            {{#if (isSingle content)}}\n              {{#each content}}\n              <div class=\"small-h-card-detail-value\">\n                <img src=\"{{validateImage this}}\">\n              </div>\n              {{/each}}\n            {{else}}\n            <div class=\"small-h-card-multiple-images-holder\">\n              {{#each content}}\n              <div class=\"small-h-card-multiple-images-item\">\n                <img src=\"{{validateImage this}}\">\n              </div>\n              {{/each}}\n            </div>\n            {{/if}}\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- Plain text template -->\n        {{#ifCond type '==' 'text'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-h-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-h-card-list-detail-body-text\">{{content}}</div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- HTML template -->\n        {{#ifCond type '==' 'html'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-h-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-h-card-list-detail-body-text\">{{{auth content}}}</div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- URL template -->\n        {{#ifCond type '==' 'url'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-h-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-h-card-list-detail-body-text\">\n              <a href=\"{{{auth content}}}\" target=\"_blank\">Tap to open</a>\n            </div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- Telephone template -->\n        {{#ifCond type '==' 'tel'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-h-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-h-card-list-detail-body-text\">\n              <a href=\"tel:{{removeSpaces content}}\" target=\"_blank\">{{content}}</a>\n            </div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- Email template -->\n        {{#ifCond type '==' 'mail'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-h-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-h-card-list-detail-body-text\">\n              <a href=\"mailto:{{content}}\" target=\"_blank\">{{content}}</a>\n            </div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- Date template -->\n        {{#ifCond type '==' 'date'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-h-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-h-card-list-detail-body-text\">{{formatDate content}}</div>\n          {{/if}}\n        {{/ifCond}}\n\n      {{/each}}\n    </div>\n\n    <!-- Edit or Delete buttons -->\n    {{#ifCond editEntry '||' deleteEntry}}\n    <div class=\"dynamic-list-controls\">\n      {{#if editEntry}}\n      <div class=\"btn btn-default dynamic-list-edit-item\">Edit</div>\n      {{/if}}\n      {{#if deleteEntry}}\n      <div class=\"btn btn-danger dynamic-list-delete-item\">Delete</div>\n      {{/if}}\n    </div>\n    {{/ifCond}}\n  </div>\n</div>";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.build.small-h-card-loop"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
diff --git a/js/layout-javascript/agenda-code.js b/js/layout-javascript/agenda-code.js
index d28bbb8e..95cfdb42 100644
--- a/js/layout-javascript/agenda-code.js
+++ b/js/layout-javascript/agenda-code.js
@@ -38,6 +38,10 @@ function DynamicList(id, data, container) {
   this.fetchedAllBookmarks = false;
   this.searchValue = '';
   this.activeFilters = {};
+  this.imagesData = {
+    images: [],
+    options: { index: null }
+  };
 
   this.listItems = [];
   this.agendasByDay = [];
@@ -738,6 +742,22 @@ DynamicList.prototype.attachObservers = function() {
       $(this).parents('.agenda-item-bookmark-holder').removeClass('not-bookmarked').addClass('bookmarked');
 
       record.bookmarkButton.like();
+    })
+    .on('click', '.agenda-multiple-images-item', function() {
+      _this.imagesData.options.index = $(this).index();
+
+      var agendaImageGallery = Fliplet.Navigate.previewImages(_this.imagesData);
+
+      agendaImageGallery.listen('afterChange', function() {
+        Fliplet.Page.Context.update({
+          agendaImageGalleryId: _this.data.id,
+          agendaImageGalleryIdOpenIndex: this.getCurrentIndex()
+        });
+      });
+
+      agendaImageGallery.listen('close', function() {
+        Fliplet.Page.Context.remove(['agendaImageGalleryId', 'agendaImageGalleryIdOpenIndex']);
+      });
     });
 }
 
@@ -2308,6 +2328,7 @@ DynamicList.prototype.addDetailViewData = function (entry) {
     var label = '';
     var labelEnabled = true;
     var content = '';
+    var field = entry.originalData[dynamicDataObj.column];
 
     // Define label
     if (dynamicDataObj.fieldLabel === 'column-name' && dynamicDataObj.column !== 'custom') {
@@ -2324,7 +2345,15 @@ DynamicList.prototype.addDetailViewData = function (entry) {
     if (dynamicDataObj.customFieldEnabled) {
       content = new Handlebars.SafeString(Handlebars.compile(dynamicDataObj.customField)(entry.originalData));
     } else {
-      content = entry.originalData[dynamicDataObj.column];
+      content = field;
+    }
+
+    if (dynamicDataObj.type === 'image') {
+      content = Array.isArray(field) ? content : field.split(/\n/); 
+
+      content.forEach(function(imageUrl) {
+        _this.imagesData.images.push({ url: imageUrl });
+      });
     }
 
     // Define data object
diff --git a/js/layout-javascript/news-feed-code.js b/js/layout-javascript/news-feed-code.js
index 227000ca..d0f5399e 100644
--- a/js/layout-javascript/news-feed-code.js
+++ b/js/layout-javascript/news-feed-code.js
@@ -43,6 +43,10 @@ function DynamicList(id, data, container) {
   this.fetchedAllBookmarks = false;
   this.searchValue = '';
   this.activeFilters = {};
+  this.imagesData = {
+    images: [],
+    options: { index: null }
+  };
 
   this.queryOpen = false;
   this.querySearch = false;
@@ -814,6 +818,22 @@ DynamicList.prototype.attachObservers = function() {
       $(this).parents('.news-feed-like-holder').removeClass('not-liked').addClass('liked');
       record.likeButton.like();
       $(this).find('.count').html(count);
+    })
+    .on('click', '.news-feed-multiple-images-item', function() {
+      _this.imagesData.options.index = $(this).index();
+
+      var newsFeedImageGallery = Fliplet.Navigate.previewImages(_this.imagesData);
+
+      newsFeedImageGallery.listen('afterChange', function() {
+        Fliplet.Page.Context.update({
+          newsFeedImageGalleryId: _this.data.id,
+          newsFeedImageGalleryIdOpenIndex: this.getCurrentIndex()
+        });
+      });
+
+      newsFeedImageGallery.listen('close', function() {
+        Fliplet.Page.Context.remove(['newsFeedImageGalleryId', 'newsFeedImageGalleryIdOpenIndex']);
+      });
     });
 }
 
@@ -2068,6 +2088,7 @@ DynamicList.prototype.addDetailViewData = function (entry) {
     var label = '';
     var labelEnabled = true;
     var content = '';
+    var field = entry.originalData[obj.column];
 
     // Define label
     if (obj.fieldLabel === 'column-name' && obj.column !== 'custom') {
@@ -2086,7 +2107,15 @@ DynamicList.prototype.addDetailViewData = function (entry) {
     } else if (_this.data.filterFields.indexOf(obj.column) > -1) {
       content = _this.Utils.String.splitByCommas(entry.originalData[obj.column]).join(', ');
     } else {
-      content = entry.originalData[obj.column];
+      content = field;
+    }
+
+    if (obj.type === 'image') {
+      content = Array.isArray(field) ? content : field.split(/\n/); 
+
+      content.forEach(function(imageUrl) {
+        _this.imagesData.images.push({ url: imageUrl });
+      });
     }
 
     // Define data object
diff --git a/js/layout-javascript/simple-list-code.js b/js/layout-javascript/simple-list-code.js
index 2faaf19c..fcbfa243 100644
--- a/js/layout-javascript/simple-list-code.js
+++ b/js/layout-javascript/simple-list-code.js
@@ -42,6 +42,10 @@ function DynamicList(id, data, container) {
   this.dataSourceColumns;
   this.searchValue = '';
   this.activeFilters = {};
+  this.imagesData = {
+    images: [],
+    options: { index: null }
+  };
 
   this.queryOpen = false;
   this.querySearch = false;
@@ -785,6 +789,22 @@ DynamicList.prototype.attachObservers = function() {
       $(this).parents('.simple-list-like-holder').removeClass('not-liked').addClass('liked');
       record.likeButton.like();
       $(this).find('.count').html(count);
+    })
+    .on('click', '.simple-list-multiple-images-item', function() {
+      _this.imagesData.options.index = $(this).index();
+
+      var simpleListImageGallery = Fliplet.Navigate.previewImages(_this.imagesData);
+
+      simpleListImageGallery.listen('afterChange', function() {
+        Fliplet.Page.Context.update({
+          simpleListImageGalleryId: _this.data.id,
+          simpleListImageGalleryIdOpenIndex: this.getCurrentIndex()
+        });
+      });
+
+      simpleListImageGallery.listen('close', function() {
+        Fliplet.Page.Context.remove(['simpleListImageGalleryId', 'simpleListImageGalleryIdOpenIndex']);
+      });
     });
 }
 
@@ -2026,6 +2046,7 @@ DynamicList.prototype.addDetailViewData = function (entry) {
     var label = '';
     var labelEnabled = true;
     var content = '';
+    var field = entry.originalData[obj.column];
 
     // Define label
     if (obj.fieldLabel === 'column-name' && obj.column !== 'custom') {
@@ -2042,9 +2063,17 @@ DynamicList.prototype.addDetailViewData = function (entry) {
     if (obj.customFieldEnabled) {
       content = new Handlebars.SafeString(Handlebars.compile(obj.customField)(entry.originalData));
     } else if (_this.data.filterFields.indexOf(obj.column) > -1) {
-      content = _this.Utils.String.splitByCommas(entry.originalData[obj.column]).join(', ');
+      content = _this.Utils.String.splitByCommas(field).join(', ');
     } else {
-      content = entry.originalData[obj.column];
+      content = field;
+    }
+
+    if (obj.type === 'image') {
+      content = Array.isArray(field) ? content : field.split(/\n/); 
+
+      content.forEach(function(imageUrl) {
+        _this.imagesData.images.push({ url: imageUrl });
+      });
     }
 
     // Define data object
diff --git a/js/layout-javascript/small-card-code.js b/js/layout-javascript/small-card-code.js
index 64ddb72e..767b71cc 100644
--- a/js/layout-javascript/small-card-code.js
+++ b/js/layout-javascript/small-card-code.js
@@ -41,6 +41,10 @@ function DynamicList(id, data, container) {
   this.directoryDetailWrapper;
   this.searchValue = '';
   this.activeFilters = {};
+  this.imagesData = {
+    images: [],
+    options: { index: null }
+  };
 
   this.queryOpen = false;
   this.querySearch = false;
@@ -639,6 +643,22 @@ DynamicList.prototype.attachObservers = function() {
 
       $(this).parents('.small-card-bookmark-holder').removeClass('not-bookmarked').addClass('bookmarked');
       record.bookmarkButton.like();
+    })
+    .on('click', '.small-card-list-multiple-images-item', function() {
+      _this.imagesData.options.index = $(this).index();
+
+      var smallCardImageGallery = Fliplet.Navigate.previewImages(_this.imagesData);
+
+      smallCardImageGallery.listen('afterChange', function() {
+        Fliplet.Page.Context.update({
+          smallCardImageGalleryId: _this.data.id,
+          smallCardImageGalleryIdOpenIndex: this.getCurrentIndex()
+        });
+      });
+
+      smallCardImageGallery.listen('close', function() {
+        Fliplet.Page.Context.remove(['smallCardImageGalleryId', 'smallCardImageGalleryIdOpenIndex']);
+      });
     });
 }
 
@@ -1669,6 +1689,7 @@ DynamicList.prototype.addDetailViewData = function (entry) {
     var label = '';
     var labelEnabled = true;
     var content = '';
+    var field = entry.originalData[dynamicDataObj.column];
 
     // Define label
     if (dynamicDataObj.fieldLabel === 'column-name' && dynamicDataObj.column !== 'custom') {
@@ -1685,9 +1706,17 @@ DynamicList.prototype.addDetailViewData = function (entry) {
     if (dynamicDataObj.customFieldEnabled) {
       content = new Handlebars.SafeString(Handlebars.compile(dynamicDataObj.customField)(entry.originalData));
     } else if (_this.data.filterFields.indexOf(dynamicDataObj.column) > -1) {
-      content = _this.Utils.String.splitByCommas(entry.originalData[dynamicDataObj.column]).join(', ');
+      content = _this.Utils.String.splitByCommas(field).join(', ');
     } else {
-      content = entry.originalData[dynamicDataObj.column];
+      content = field;
+    }
+
+    if (dynamicDataObj.type === 'image') {
+      content = Array.isArray(field) ? content : field.split(/\n/);
+
+      content.forEach(function(imageUrl) {
+        _this.imagesData.images.push({ url: imageUrl });
+      });
     }
 
     // Define data object
diff --git a/js/layout-javascript/small-h-card-code.js b/js/layout-javascript/small-h-card-code.js
index 2659f6bc..5611ea9c 100644
--- a/js/layout-javascript/small-h-card-code.js
+++ b/js/layout-javascript/small-h-card-code.js
@@ -25,6 +25,10 @@ function DynamicList(id, data, container) {
   this.myProfileData;
   this.modifiedProfileData;
   this.myUserData = {};
+  this.imagesData = {
+    images: [],
+    options: { index: null }
+  };
 
   this.listItems;
   this.modifiedListItems
@@ -327,6 +331,22 @@ DynamicList.prototype.attachObservers = function() {
       }).then(function() {
         Fliplet.UI.Actions(options);
       });
+    })
+    .on('click', '.small-h-card-multiple-images-item', function() {
+      _this.imagesData.options.index = $(this).index();
+
+      var smallHCardImageGallery = Fliplet.Navigate.previewImages(_this.imagesData);
+
+      smallHCardImageGallery.listen('afterChange', function() {
+        Fliplet.Page.Context.update({
+          smallHCardImageGalleryId: _this.data.id,
+          smallHCardImageGalleryIdOpenIndex: this.getCurrentIndex()
+        });
+      });
+
+      smallHCardImageGallery.listen('close', function() {
+        Fliplet.Page.Context.remove(['smallHCardImageGalleryId', 'smallHCardImageGalleryIdOpenIndex']);
+      });
     });
 }
 
@@ -715,6 +735,7 @@ DynamicList.prototype.addDetailViewData = function (entry) {
     var label = '';
     var labelEnabled = true;
     var content = '';
+    var field = entry.originalData[dynamicDataObj.column];
 
     // Define label
     if (dynamicDataObj.fieldLabel === 'column-name' && dynamicDataObj.column !== 'custom') {
@@ -731,7 +752,15 @@ DynamicList.prototype.addDetailViewData = function (entry) {
     if (dynamicDataObj.customFieldEnabled) {
       content = new Handlebars.SafeString(Handlebars.compile(dynamicDataObj.customField)(entry.originalData));
     } else {
-      content = entry.originalData[dynamicDataObj.column];
+      content = field;
+    }
+
+    if (dynamicDataObj.type === 'image') {
+      content = Array.isArray(field) ? content : field.split(/\n/);
+
+      content.forEach(function(imageUrl) {
+        _this.imagesData.images.push({ url: imageUrl });
+      });
     }
 
     // Define data object
diff --git a/js/utils.js b/js/utils.js
index fe39bd41..cf417732 100644
--- a/js/utils.js
+++ b/js/utils.js
@@ -107,6 +107,10 @@ Fliplet.Registry.set('dynamicListUtils', (function () {
 
     Handlebars.registerHelper('validateImage', validateImageUrl);
 
+    Handlebars.registerHelper('isSingle', function(value) {
+      return value.length === 1;
+    });
+
     Handlebars.registerHelper('formatComment', function(text) {
       var res = text;
 
diff --git a/templates/build/agenda-cards-detail.build.hbs b/templates/build/agenda-cards-detail.build.hbs
index f1531305..794b4d3b 100644
--- a/templates/build/agenda-cards-detail.build.hbs
+++ b/templates/build/agenda-cards-detail.build.hbs
@@ -47,9 +47,21 @@
             <div class="agenda-item-detail-label">\{{label}}</div>
             \{{/if}}
 
-            <div class="agenda-item-detail-body-text">
-              <img src="\{{validateImage content}}">
+            \{{#if (isSingle content)}}
+              \{{#each content}}
+              <div class="agenda-item-detail-body-text">
+                <img src="\{{validateImage this}}">
+              </div>
+              \{{/each}}
+            \{{else}}
+            <div class="agenda-multiple-images-holder">
+              \{{#each content}}
+              <div class="agenda-multiple-images-item">
+                <img src="\{{validateImage this}}">
+              </div>
+              \{{/each}}
             </div>
+            \{{/if}}
           \{{/if}}
         \{{/ifCond}}
 
diff --git a/templates/build/news-feed-detail.build.hbs b/templates/build/news-feed-detail.build.hbs
index fd64e0df..23531bff 100644
--- a/templates/build/news-feed-detail.build.hbs
+++ b/templates/build/news-feed-detail.build.hbs
@@ -57,9 +57,21 @@
               <div class="news-feed-detail-label">\{{label}}</div>
               \{{/if}}
 
-              <div class="news-feed-detail-value">
-                <img src="\{{validateImage content}}">
+              \{{#if (isSingle content)}}
+                \{{#each content}}
+                <div class="news-feed-detail-value">
+                  <img src="\{{validateImage this}}">
+                </div>
+                \{{/each}}
+              \{{else}}
+              <div class="news-feed-multiple-images-holder">
+                \{{#each content}}
+                <div class="news-feed-multiple-images-item">
+                  <img src="\{{validateImage this}}">
+                </div>
+                \{{/each}}
               </div>
+              \{{/if}}
             \{{/if}}
           \{{/ifCond}}
 
diff --git a/templates/build/simple-list-detail.build.hbs b/templates/build/simple-list-detail.build.hbs
index 0755fc76..22749bb9 100644
--- a/templates/build/simple-list-detail.build.hbs
+++ b/templates/build/simple-list-detail.build.hbs
@@ -7,9 +7,21 @@
         <div class="simple-list-detail-label">\{{label}}</div>
         \{{/if}}
 
-        <div class="simple-list-detail-value">
-          <img src="\{{validateImage content}}">
+        \{{#if (isSingle content)}}
+          \{{#each content}}  
+          <div class="simple-list-detail-value">
+            <img src="\{{validateImage this}}">
+          </div>
+          \{{/each}}
+        \{{else}}
+        <div class="simple-list-multiple-images-holder">
+          \{{#each content}}
+          <div class="simple-list-multiple-images-item">
+            <img src="\{{validateImage this}}">
+          </div>
+          \{{/each}}
         </div>
+        \{{/if}}
       \{{/if}}
     \{{/ifCond}}
 
diff --git a/templates/build/small-card-detail.build.hbs b/templates/build/small-card-detail.build.hbs
index a5ab8a89..87b9b0de 100644
--- a/templates/build/small-card-detail.build.hbs
+++ b/templates/build/small-card-detail.build.hbs
@@ -57,9 +57,21 @@
             <div class="small-card-list-detail-label">\{{label}}</div>
             \{{/if}}
 
-            <div class="small-card-list-detail-body-text">
-              <img src="\{{validateImage content}}">
+            \{{#if (isSingle content)}}
+              \{{#each content}}
+              <div class="small-card-list-detail-body-text">
+                <img src="\{{validateImage this}}">
+              </div>
+              \{{/each}}
+            \{{else}}
+            <div class="small-card-multiple-images-holder">
+              \{{#each content}}
+              <div class="small-card-list-multiple-images-item">
+                <img src="\{{validateImage this}}">
+              </div>
+              \{{/each}}
             </div>
+            \{{/if}}
           \{{/if}}
         \{{/ifCond}}
 
diff --git a/templates/build/small-h-card-detail.build.hbs b/templates/build/small-h-card-detail.build.hbs
index 73734510..344f7e71 100644
--- a/templates/build/small-h-card-detail.build.hbs
+++ b/templates/build/small-h-card-detail.build.hbs
@@ -44,10 +44,22 @@
             \{{#if labelEnabled}}
             <div class="small-h-card-list-detail-label">\{{label}}</div>
             \{{/if}}
-
-            <div class="small-h-card-list-detail-body-text">
-              <img src="\{{validateImage content}}">
+ 
+            \{{#if (isSingle content)}}
+              \{{#each content}}
+              <div class="small-h-card-detail-value">
+                <img src="\{{validateImage this}}">
+              </div>
+              \{{/each}}
+            \{{else}}
+            <div class="small-h-card-multiple-images-holder">
+              \{{#each content}}
+              <div class="small-h-card-multiple-images-item">
+                <img src="\{{validateImage this}}">
+              </div>
+              \{{/each}}
             </div>
+            \{{/if}}
           \{{/if}}
         \{{/ifCond}}
 

From 7dae02461c96dcd8dee1b7506216a8860e2fa141 Mon Sep 17 00:00:00 2001
From: Maksym Shokin <maksym.sh@upplabs.com>
Date: Tue, 1 Sep 2020 10:41:08 +0300
Subject: [PATCH 2/4] styling

---
 css/layout-css/agenda-style.upload.css       | 35 +++++++++++++++++---
 css/layout-css/news-feed-style.upload.css    | 35 +++++++++++++++++---
 css/layout-css/simple-list-style.upload.css  | 35 +++++++++++++++++---
 css/layout-css/small-card-style.upload.css   | 35 +++++++++++++++++---
 css/layout-css/small-h-card-style.upload.css | 35 +++++++++++++++++---
 widget.json                                  |  3 +-
 6 files changed, 152 insertions(+), 26 deletions(-)

diff --git a/css/layout-css/agenda-style.upload.css b/css/layout-css/agenda-style.upload.css
index 1438552a..43f8c492 100644
--- a/css/layout-css/agenda-style.upload.css
+++ b/css/layout-css/agenda-style.upload.css
@@ -1525,18 +1525,43 @@
 .agenda-multiple-images-holder {
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-around;
 }
 
 .agenda-multiple-images-item {
-  flex: 1 1 70px;
-  margin: 10px;
-  border-radius: 5px;
-  overflow: hidden;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  width: 149px;
+  height: 149px;
+  margin-top: 15px;
+  border-radius: 12px;
+  padding: 10px;
+  border: 1px solid rgba(127, 127, 127, 0.5);
   cursor: pointer;
 }
 
+.agenda-multiple-images-item:nth-of-type(2n+1) {
+  margin-right: 15px;
+}
+
+.agenda-multiple-images-item img {
+  object-fit: contain;
+  width: 100%;
+  height: 100%;
+}
+
 @media screen and (min-width: 640px) {
+  .agenda-multiple-images-item {
+    margin-right: 15px;
+    width: 163px;
+    height: 163px;
+  }
+  
+  .agenda-multiple-images-item:nth-of-type(3n) {
+    margin-right: 0;
+  }
+
   .agenda-detail-overlay .agenda-detail-overlay-wrapper {
     position: absolute;
     top: 0;
diff --git a/css/layout-css/news-feed-style.upload.css b/css/layout-css/news-feed-style.upload.css
index 1d237deb..b232e5ca 100644
--- a/css/layout-css/news-feed-style.upload.css
+++ b/css/layout-css/news-feed-style.upload.css
@@ -1517,18 +1517,43 @@ html.ie11 .new-news-feed-list-container .news-feed-list-item:not(.open) .slide-o
 .news-feed-multiple-images-holder {
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-around;
 }
 
 .news-feed-multiple-images-item {
-  flex: 1 1 70px;
-  margin: 10px;
-  border-radius: 5px;
-  overflow: hidden;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  width: 149px;
+  height: 149px;
+  margin-top: 15px;
+  border-radius: 12px;
+  padding: 10px;
+  border: 1px solid rgba(127, 127, 127, 0.5);
   cursor: pointer;
 }
 
+.news-feed-multiple-images-item:nth-of-type(2n+1) {
+  margin-right: 15px;
+}
+
+.news-feed-multiple-images-item img {
+  object-fit: contain;
+  width: 100%;
+  height: 100%;
+}
+
 @media screen and (min-width: 640px) {
+  .news-feed-multiple-images-item {
+    margin-right: 15px;
+    width: 163px;
+    height: 163px;
+  }
+  
+  .news-feed-multiple-images-item:nth-of-type(3n) {
+    margin-right: 0;
+  }
+
   .news-feed-detail-overlay .news-feed-detail-wrapper .news-feed-item-inner-content {
     padding: 20px 15px;
   }
diff --git a/css/layout-css/simple-list-style.upload.css b/css/layout-css/simple-list-style.upload.css
index 47bd362b..757cf656 100644
--- a/css/layout-css/simple-list-style.upload.css
+++ b/css/layout-css/simple-list-style.upload.css
@@ -1183,18 +1183,43 @@ html.ie11 .simple-list-item .list-item-description {
 .simple-list-multiple-images-holder {
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-around;
 }
 
 .simple-list-multiple-images-item {
-  flex: 1 1 70px;
-  margin: 10px;
-  border-radius: 5px;
-  overflow: hidden;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  width: 149px;
+  height: 149px;
+  margin-top: 15px;
+  border-radius: 12px;
+  padding: 10px;
+  border: 1px solid rgba(127, 127, 127, 0.5);
   cursor: pointer;
 }
 
+.simple-list-multiple-images-item:nth-of-type(2n+1) {
+  margin-right: 15px;
+}
+
+.simple-list-multiple-images-item img {
+  object-fit: contain;
+  width: 100%;
+  height: 100%;
+}
+
 @media screen and (min-width: 640px) {
+  .simple-list-multiple-images-item {
+    margin-right: 15px;
+    width: 163px;
+    height: 163px;
+  }
+  
+  .simple-list-multiple-images-item:nth-of-type(3n) {
+    margin-right: 0;
+  }
+
   .simple-list-detail-overlay .simple-list-detail-overlay-wrapper {
     position: absolute;
     top: 0;
diff --git a/css/layout-css/small-card-style.upload.css b/css/layout-css/small-card-style.upload.css
index 737c3951..d4328a33 100644
--- a/css/layout-css/small-card-style.upload.css
+++ b/css/layout-css/small-card-style.upload.css
@@ -1194,18 +1194,43 @@
 .small-card-multiple-images-holder {
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-around;
 }
 
 .small-card-list-multiple-images-item {
-  flex: 1 1 70px;
-  margin: 10px;
-  border-radius: 5px;
-  overflow: hidden;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  width: 149px;
+  height: 149px;
+  margin-top: 15px;
+  border-radius: 12px;
+  padding: 10px;
+  border: 1px solid rgba(127, 127, 127, 0.5);
   cursor: pointer;
 }
 
+.small-card-list-multiple-images-item:nth-of-type(2n+1) {
+  margin-right: 15px;
+}
+
+.small-card-list-multiple-images-item img {
+  object-fit: contain;
+  width: 100%;
+  height: 100%;
+}
+
 @media screen and (min-width: 640px) {
+  .small-card-list-multiple-images-item {
+    margin-right: 15px;
+    width: 163px;
+    height: 163px;
+  }
+  
+  .small-card-list-multiple-images-item:nth-of-type(3n) {
+    margin-right: 0;
+  }
+
   .small-card-detail-overlay .small-card-detail-overlay-wrapper {
     position: absolute;
     top: 0;
diff --git a/css/layout-css/small-h-card-style.upload.css b/css/layout-css/small-h-card-style.upload.css
index adbe699a..2685e1e3 100644
--- a/css/layout-css/small-h-card-style.upload.css
+++ b/css/layout-css/small-h-card-style.upload.css
@@ -515,18 +515,43 @@
 .small-h-card-multiple-images-holder {
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-around;
 }
 
 .small-h-card-multiple-images-item {
-  flex: 1 1 70px;
-  margin: 10px;
-  border-radius: 5px;
-  overflow: hidden;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  width: 149px;
+  height: 149px;
+  margin-top: 15px;
+  border-radius: 12px;
+  padding: 10px;
+  border: 1px solid rgba(127, 127, 127, 0.5);
   cursor: pointer;
 }
 
+.small-h-card-multiple-images-item:nth-of-type(2n+1) {
+  margin-right: 15px;
+}
+
+.small-h-card-multiple-images-item img {
+  object-fit: contain;
+  width: 100%;
+  height: 100%;
+}
+
 @media screen and (min-width: 640px) {
+  .small-h-card-multiple-images-item {
+    margin-right: 15px;
+    width: 163px;
+    height: 163px;
+  }
+  
+  .small-h-card-multiple-images-item:nth-of-type(3n) {
+    margin-right: 0;
+  }
+
   .small-h-card-detail-overlay .small-h-card-detail-overlay-wrapper {
     position: absolute;
     top: 0;
diff --git a/widget.json b/widget.json
index a680adfc..045cb6f4 100644
--- a/widget.json
+++ b/widget.json
@@ -68,7 +68,8 @@
       "animate-css",
       "fliplet-like:0.2",
       "fliplet-content:0.1",
-      "hammer.js"
+      "hammer.js",
+      "photoswipe"
     ],
     "assets": [
       "js/utils.js",

From 98071d77d224f7001fe8d882494d46419c2eefe3 Mon Sep 17 00:00:00 2001
From: Maksym Shokin <maksym.sh@upplabs.com>
Date: Tue, 8 Sep 2020 13:53:52 +0300
Subject: [PATCH 3/4] fixes

---
 css/layout-css/agenda-style.upload.css        | 18 +++++++----------
 css/layout-css/news-feed-style.upload.css     | 18 +++++++----------
 css/layout-css/simple-list-style.upload.css   | 18 +++++++----------
 css/layout-css/small-card-style.upload.css    | 20 ++++++++-----------
 css/layout-css/small-h-card-style.upload.css  | 18 +++++++----------
 js/build.templates.js                         | 10 +++++-----
 templates/build/agenda-cards-detail.build.hbs |  2 +-
 templates/build/news-feed-detail.build.hbs    |  2 +-
 templates/build/simple-list-detail.build.hbs  |  2 +-
 templates/build/small-card-detail.build.hbs   |  2 +-
 templates/build/small-h-card-detail.build.hbs |  2 +-
 widget.json                                   |  4 ++--
 12 files changed, 48 insertions(+), 68 deletions(-)

diff --git a/css/layout-css/agenda-style.upload.css b/css/layout-css/agenda-style.upload.css
index 43f8c492..8f0e32a1 100644
--- a/css/layout-css/agenda-style.upload.css
+++ b/css/layout-css/agenda-style.upload.css
@@ -1528,12 +1528,7 @@
 }
 
 .agenda-multiple-images-item {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  width: 149px;
-  height: 149px;
+  width: calc(50% - 7.5px);
   margin-top: 15px;
   border-radius: 12px;
   padding: 10px;
@@ -1545,17 +1540,18 @@
   margin-right: 15px;
 }
 
-.agenda-multiple-images-item img {
-  object-fit: contain;
+.agenda-multiple-images-item .image {
   width: 100%;
-  height: 100%;
+  padding-top: 100%;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
 }
 
 @media screen and (min-width: 640px) {
   .agenda-multiple-images-item {
+    width: calc(33.33% - 10px);
     margin-right: 15px;
-    width: 163px;
-    height: 163px;
   }
   
   .agenda-multiple-images-item:nth-of-type(3n) {
diff --git a/css/layout-css/news-feed-style.upload.css b/css/layout-css/news-feed-style.upload.css
index b232e5ca..c6f91200 100644
--- a/css/layout-css/news-feed-style.upload.css
+++ b/css/layout-css/news-feed-style.upload.css
@@ -1520,12 +1520,7 @@ html.ie11 .new-news-feed-list-container .news-feed-list-item:not(.open) .slide-o
 }
 
 .news-feed-multiple-images-item {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  width: 149px;
-  height: 149px;
+  width: calc(50% - 7.5px);
   margin-top: 15px;
   border-radius: 12px;
   padding: 10px;
@@ -1537,17 +1532,18 @@ html.ie11 .new-news-feed-list-container .news-feed-list-item:not(.open) .slide-o
   margin-right: 15px;
 }
 
-.news-feed-multiple-images-item img {
-  object-fit: contain;
+.news-feed-multiple-images-item .image {
   width: 100%;
-  height: 100%;
+  padding-top: 100%;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
 }
 
 @media screen and (min-width: 640px) {
   .news-feed-multiple-images-item {
+    width: calc(33.33% - 10px);
     margin-right: 15px;
-    width: 163px;
-    height: 163px;
   }
   
   .news-feed-multiple-images-item:nth-of-type(3n) {
diff --git a/css/layout-css/simple-list-style.upload.css b/css/layout-css/simple-list-style.upload.css
index 757cf656..e0d63947 100644
--- a/css/layout-css/simple-list-style.upload.css
+++ b/css/layout-css/simple-list-style.upload.css
@@ -1186,12 +1186,7 @@ html.ie11 .simple-list-item .list-item-description {
 }
 
 .simple-list-multiple-images-item {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  width: 149px;
-  height: 149px;
+  width: calc(50% - 7.5px);
   margin-top: 15px;
   border-radius: 12px;
   padding: 10px;
@@ -1203,17 +1198,18 @@ html.ie11 .simple-list-item .list-item-description {
   margin-right: 15px;
 }
 
-.simple-list-multiple-images-item img {
-  object-fit: contain;
+.simple-list-multiple-images-item .image {
   width: 100%;
-  height: 100%;
+  padding-top: 100%;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
 }
 
 @media screen and (min-width: 640px) {
   .simple-list-multiple-images-item {
+    width: calc(33.33% - 10px);
     margin-right: 15px;
-    width: 163px;
-    height: 163px;
   }
   
   .simple-list-multiple-images-item:nth-of-type(3n) {
diff --git a/css/layout-css/small-card-style.upload.css b/css/layout-css/small-card-style.upload.css
index d4328a33..94ca7236 100644
--- a/css/layout-css/small-card-style.upload.css
+++ b/css/layout-css/small-card-style.upload.css
@@ -1197,12 +1197,7 @@
 }
 
 .small-card-list-multiple-images-item {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  width: 149px;
-  height: 149px;
+  width: calc(50% - 7.5px);
   margin-top: 15px;
   border-radius: 12px;
   padding: 10px;
@@ -1210,21 +1205,22 @@
   cursor: pointer;
 }
 
-.small-card-list-multiple-images-item:nth-of-type(2n+1) {
+.small-card-list-multiple-images-item:nth-of-type(2n + 1) {
   margin-right: 15px;
 }
 
-.small-card-list-multiple-images-item img {
-  object-fit: contain;
+.small-card-list-multiple-images-item .image {
   width: 100%;
-  height: 100%;
+  padding-top: 100%;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
 }
 
 @media screen and (min-width: 640px) {
   .small-card-list-multiple-images-item {
+    width: calc(33.33% - 10px);
     margin-right: 15px;
-    width: 163px;
-    height: 163px;
   }
   
   .small-card-list-multiple-images-item:nth-of-type(3n) {
diff --git a/css/layout-css/small-h-card-style.upload.css b/css/layout-css/small-h-card-style.upload.css
index 2685e1e3..8e4bf101 100644
--- a/css/layout-css/small-h-card-style.upload.css
+++ b/css/layout-css/small-h-card-style.upload.css
@@ -518,12 +518,7 @@
 }
 
 .small-h-card-multiple-images-item {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  width: 149px;
-  height: 149px;
+  width: calc(50% - 7.5px);
   margin-top: 15px;
   border-radius: 12px;
   padding: 10px;
@@ -535,17 +530,18 @@
   margin-right: 15px;
 }
 
-.small-h-card-multiple-images-item img {
-  object-fit: contain;
+.small-h-card-multiple-images-item .image {
   width: 100%;
-  height: 100%;
+  padding-top: 100%;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
 }
 
 @media screen and (min-width: 640px) {
   .small-h-card-multiple-images-item {
+    width: calc(33.33% - 10px);
     margin-right: 15px;
-    width: 163px;
-    height: 163px;
   }
   
   .small-h-card-multiple-images-item:nth-of-type(3n) {
diff --git a/js/build.templates.js b/js/build.templates.js
index 143828a4..eff4886c 100644
--- a/js/build.templates.js
+++ b/js/build.templates.js
@@ -7,7 +7,7 @@ this["Fliplet"]["Widget"]["Templates"]["templates.build.agenda-base"] = Handleba
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.build.agenda-cards-detail"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "<div class=\"agenda-item-inner-content clearfix\" data-entry-id=\"{{id}}\">\n  <div class=\"agenda-item-content-holder\">\n    {{#if [Title]}}\n    <h2 class=\"agenda-item-title\">{{[Title]}}</h2>\n    {{/if}}\n    <div class=\"agenda-item-session-location\">\n      {{#if [Location]}}\n      <p class=\"agenda-item-location\">{{{[Location]}}}</p>\n      {{/if}}\n      <p class=\"agenda-item-start-date-time\">{{[Start Time]}}{{#ifCond [Start Time] '&&' [End Time]}} - {{/ifCond}}{{[End Time]}}{{#if [Full Date]}} / {{/if}}{{moment [Full Date] format=\"D MMM YYYY\"}}</p>\n    </div>\n\n    <div class=\"agenda-item-bookmark {{#if agendaButtonsEnabled}}more-buttons{{/if}}\">\n      <div class=\"agenda-item-bookmark-holder agenda-item-bookmark-holder-{{id}}\">\n        <div class=\"bookmark-wrapper btn-bookmark\">\n          <i class=\"fa fa-bookmark-o\"></i>Bookmark\n        </div>\n        <div class=\"bookmark-wrapper btn-bookmarked\">\n          <i class=\"fa fa-bookmark\"></i>Bookmarked\n        </div>\n\n        <div class=\"agenda-item-add-agenda\"></div>\n      </div>\n      {{#if pollButton}}\n      <div class=\"go-to-poll session-button\">\n        <i class=\"fa fa-pie-chart\"></i>Poll\n      </div>\n      {{/if}}\n      {{#if surveyButton}}\n      <div class=\"go-to-survey session-button\">\n        <i class=\"fa fa-pencil-square-o\"></i>Survey\n      </div>\n      {{/if}}\n      {{#if questionsButton}}\n      <div class=\"go-to-questions session-button\">\n        <i class=\"fa fa-question-circle-o\"></i>Questions\n      </div>\n      {{/if}}\n    </div>\n\n    <div class=\"agenda-item-description\">\n      {{#each entryDetails}}\n        <!-- Image template -->\n        {{#ifCond type '==' 'image'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"agenda-item-detail-label\">{{label}}</div>\n            {{/if}}\n\n            {{#if (isSingle content)}}\n              {{#each content}}\n              <div class=\"agenda-item-detail-body-text\">\n                <img src=\"{{validateImage this}}\">\n              </div>\n              {{/each}}\n            {{else}}\n            <div class=\"agenda-multiple-images-holder\">\n              {{#each content}}\n              <div class=\"agenda-multiple-images-item\">\n                <img src=\"{{validateImage this}}\">\n              </div>\n              {{/each}}\n            </div>\n            {{/if}}\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- Plain text template -->\n        {{#ifCond type '==' 'text'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"agenda-item-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"agenda-item-detail-body-text\">{{content}}</div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- HTML template -->\n        {{#ifCond type '==' 'html'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"agenda-item-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"agenda-item-detail-body-text\">{{{auth content}}}</div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- URL template -->\n        {{#ifCond type '==' 'url'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"agenda-item-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"agenda-item-detail-body-text\">\n              <a href=\"{{{auth content}}}\" target=\"_blank\">Tap to open</a>\n            </div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- Telephone template -->\n        {{#ifCond type '==' 'tel'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"agenda-item-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"agenda-item-detail-body-text\">\n              <a href=\"tel:{{removeSpaces content}}\" target=\"_blank\">{{content}}</a>\n            </div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- Email template -->\n        {{#ifCond type '==' 'mail'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"agenda-item-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"agenda-item-detail-body-text\">\n              <a href=\"mailto:{{content}}\" target=\"_blank\">{{content}}</a>\n            </div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- Date template -->\n        {{#ifCond type '==' 'date'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"agenda-item-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"agenda-item-detail-body-text\">{{formatDate content}}</div>\n          {{/if}}\n        {{/ifCond}}\n\n      {{/each}}\n    </div>\n\n    {{#ifCond editEntry '||' deleteEntry}}\n    <div class=\"dynamic-list-controls\">\n      {{#if editEntry}}\n      <div class=\"btn btn-default dynamic-list-edit-item\">Edit</div>\n      {{/if}}\n      {{#if deleteEntry}}\n      <div class=\"btn btn-danger dynamic-list-delete-item\">Delete</div>\n      {{/if}}\n    </div>\n    {{/ifCond}}\n  </div>\n</div>";
+    return "<div class=\"agenda-item-inner-content clearfix\" data-entry-id=\"{{id}}\">\n  <div class=\"agenda-item-content-holder\">\n    {{#if [Title]}}\n    <h2 class=\"agenda-item-title\">{{[Title]}}</h2>\n    {{/if}}\n    <div class=\"agenda-item-session-location\">\n      {{#if [Location]}}\n      <p class=\"agenda-item-location\">{{{[Location]}}}</p>\n      {{/if}}\n      <p class=\"agenda-item-start-date-time\">{{[Start Time]}}{{#ifCond [Start Time] '&&' [End Time]}} - {{/ifCond}}{{[End Time]}}{{#if [Full Date]}} / {{/if}}{{moment [Full Date] format=\"D MMM YYYY\"}}</p>\n    </div>\n\n    <div class=\"agenda-item-bookmark {{#if agendaButtonsEnabled}}more-buttons{{/if}}\">\n      <div class=\"agenda-item-bookmark-holder agenda-item-bookmark-holder-{{id}}\">\n        <div class=\"bookmark-wrapper btn-bookmark\">\n          <i class=\"fa fa-bookmark-o\"></i>Bookmark\n        </div>\n        <div class=\"bookmark-wrapper btn-bookmarked\">\n          <i class=\"fa fa-bookmark\"></i>Bookmarked\n        </div>\n\n        <div class=\"agenda-item-add-agenda\"></div>\n      </div>\n      {{#if pollButton}}\n      <div class=\"go-to-poll session-button\">\n        <i class=\"fa fa-pie-chart\"></i>Poll\n      </div>\n      {{/if}}\n      {{#if surveyButton}}\n      <div class=\"go-to-survey session-button\">\n        <i class=\"fa fa-pencil-square-o\"></i>Survey\n      </div>\n      {{/if}}\n      {{#if questionsButton}}\n      <div class=\"go-to-questions session-button\">\n        <i class=\"fa fa-question-circle-o\"></i>Questions\n      </div>\n      {{/if}}\n    </div>\n\n    <div class=\"agenda-item-description\">\n      {{#each entryDetails}}\n        <!-- Image template -->\n        {{#ifCond type '==' 'image'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"agenda-item-detail-label\">{{label}}</div>\n            {{/if}}\n\n            {{#if (isSingle content)}}\n              {{#each content}}\n              <div class=\"agenda-item-detail-body-text\">\n                <img src=\"{{validateImage this}}\">\n              </div>\n              {{/each}}\n            {{else}}\n            <div class=\"agenda-multiple-images-holder\">\n              {{#each content}}\n              <div class=\"agenda-multiple-images-item\">\n                <div class=\"image\" style=\"background-image: url('{{validateImage this}}')\"></div>\n              </div>\n              {{/each}}\n            </div>\n            {{/if}}\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- Plain text template -->\n        {{#ifCond type '==' 'text'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"agenda-item-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"agenda-item-detail-body-text\">{{content}}</div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- HTML template -->\n        {{#ifCond type '==' 'html'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"agenda-item-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"agenda-item-detail-body-text\">{{{auth content}}}</div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- URL template -->\n        {{#ifCond type '==' 'url'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"agenda-item-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"agenda-item-detail-body-text\">\n              <a href=\"{{{auth content}}}\" target=\"_blank\">Tap to open</a>\n            </div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- Telephone template -->\n        {{#ifCond type '==' 'tel'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"agenda-item-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"agenda-item-detail-body-text\">\n              <a href=\"tel:{{removeSpaces content}}\" target=\"_blank\">{{content}}</a>\n            </div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- Email template -->\n        {{#ifCond type '==' 'mail'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"agenda-item-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"agenda-item-detail-body-text\">\n              <a href=\"mailto:{{content}}\" target=\"_blank\">{{content}}</a>\n            </div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- Date template -->\n        {{#ifCond type '==' 'date'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"agenda-item-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"agenda-item-detail-body-text\">{{formatDate content}}</div>\n          {{/if}}\n        {{/ifCond}}\n\n      {{/each}}\n    </div>\n\n    {{#ifCond editEntry '||' deleteEntry}}\n    <div class=\"dynamic-list-controls\">\n      {{#if editEntry}}\n      <div class=\"btn btn-default dynamic-list-edit-item\">Edit</div>\n      {{/if}}\n      {{#if deleteEntry}}\n      <div class=\"btn btn-danger dynamic-list-delete-item\">Delete</div>\n      {{/if}}\n    </div>\n    {{/ifCond}}\n  </div>\n</div>";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.build.agenda-cards-loop"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
@@ -35,7 +35,7 @@ this["Fliplet"]["Widget"]["Templates"]["templates.build.news-feed-comment"] = Ha
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.build.news-feed-detail"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "<div class=\"news-feed-details-content-holder\" data-entry-id=\"{{id}}\">\n  {{#if [Image]}}\n  <div class=\"news-feed-list-detail-image-wrapper\">\n    <img src=\"{{validateImage [Image]}}\">\n  </div>\n  {{/if}}\n  <div class=\"news-feed-list-detail-content-scroll-wrapper\">\n    <div class=\"news-feed-item-inner-content\">\n      <div class=\"news-feed-info-holder {{#ifCond [Date] '||' [Categories]}}has-date-category{{/ifCond}}\">\n        {{#ifCond [Date] '||' [Categories]}}\n        <div class=\"news-feed-date-category\">{{formatDate [Date]}} {{#ifCond [Date] '&&' [Categories]}}/{{/ifCond}} {{[Categories]}}</div>\n        {{/ifCond}}\n        {{#if likesEnabled}}\n        <div class=\"news-feed-like-holder news-feed-like-holder-{{id}}\">\n          <div class=\"news-feed-like-wrapper btn-like\">\n            <span class=\"count\"></span><i class=\"fa fa-heart-o fa-lg\"></i>\n          </div>\n          <div class=\"news-feed-like-wrapper btn-liked\">\n            <span class=\"count\"></span><i class=\"fa fa-heart fa-lg animated bounceIn\"></i>\n          </div>\n        </div>\n        {{/if}}\n\n        {{#if bookmarksEnabled}}\n        <div class=\"news-feed-bookmark-holder news-feed-bookmark-holder-{{id}}\">\n          <div class=\"news-feed-bookmark-wrapper btn-bookmark\">\n            <i class=\"fa fa-bookmark-o fa-lg\"></i>\n          </div>\n          <div class=\"news-feed-bookmark-wrapper btn-bookmarked\">\n            <i class=\"fa fa-bookmark fa-lg animated fadeIn\"></i>\n          </div>\n        </div>\n        {{/if}}\n\n        {{#if commentsEnabled}}\n        <div class=\"news-feed-comment-holder news-feed-comemnt-holder-{{id}}\">\n          <!-- Like button will be here -->\n          <!-- Like placeholder -->\n          <i class=\"fa fa-comment-o fa-lg comment-placeholder\"></i>\n        </div>\n        {{/if}}\n      </div>\n      {{#if [Title]}}\n      <h2 class=\"news-feed-item-title\">{{[Title]}}</h2>\n      {{/if}}\n      {{#if [Content]}}\n      <div class=\"news-feed-item-description\">\n        {{{auth [Content]}}}\n      </div>\n      {{/if}}\n      <div class=\"news-feed-details-holder\">\n        {{#each entryDetails}}\n          <!-- Image template -->\n          {{#ifCond type '==' 'image'}}\n            {{#if content}}\n              {{#if labelEnabled}}\n              <div class=\"news-feed-detail-label\">{{label}}</div>\n              {{/if}}\n\n              {{#if (isSingle content)}}\n                {{#each content}}\n                <div class=\"news-feed-detail-value\">\n                  <img src=\"{{validateImage this}}\">\n                </div>\n                {{/each}}\n              {{else}}\n              <div class=\"news-feed-multiple-images-holder\">\n                {{#each content}}\n                <div class=\"news-feed-multiple-images-item\">\n                  <img src=\"{{validateImage this}}\">\n                </div>\n                {{/each}}\n              </div>\n              {{/if}}\n            {{/if}}\n          {{/ifCond}}\n\n          <!-- Plain text template -->\n          {{#ifCond type '==' 'text'}}\n            {{#if content}}\n              {{#if labelEnabled}}\n              <div class=\"news-feed-detail-label\">{{label}}</div>\n              {{/if}}\n\n              <div class=\"news-feed-detail-value\">{{content}}</div>\n            {{/if}}\n          {{/ifCond}}\n\n          <!-- HTML template -->\n          {{#ifCond type '==' 'html'}}\n            {{#if content}}\n              {{#if labelEnabled}}\n              <div class=\"news-feed-detail-label\">{{label}}</div>\n              {{/if}}\n\n              <div class=\"news-feed-detail-value\">{{{auth content}}}</div>\n            {{/if}}\n          {{/ifCond}}\n\n          <!-- URL template -->\n          {{#ifCond type '==' 'url'}}\n            {{#if content}}\n              {{#if labelEnabled}}\n              <div class=\"news-feed-detail-label\">{{label}}</div>\n              {{/if}}\n\n              <div class=\"news-feed-detail-value\">\n                <a href=\"{{{auth content}}}\" target=\"_blank\">Tap to open</a>\n              </div>\n            {{/if}}\n          {{/ifCond}}\n\n          <!-- Telephone template -->\n          {{#ifCond type '==' 'tel'}}\n            {{#if content}}\n              {{#if labelEnabled}}\n              <div class=\"news-feed-detail-label\">{{label}}</div>\n              {{/if}}\n\n              <div class=\"news-feed-detail-value\">\n                <a href=\"tel:{{removeSpaces content}}\" target=\"_blank\">{{content}}</a>\n              </div>\n            {{/if}}\n          {{/ifCond}}\n\n          <!-- Email template -->\n          {{#ifCond type '==' 'mail'}}\n            {{#if content}}\n              {{#if labelEnabled}}\n              <div class=\"news-feed-detail-label\">{{label}}</div>\n              {{/if}}\n\n              <div class=\"news-feed-detail-value\">\n                <a href=\"mailto:{{content}}\" target=\"_blank\">{{content}}</a>\n              </div>\n            {{/if}}\n          {{/ifCond}}\n\n          <!-- Date template -->\n          {{#ifCond type '==' 'date'}}\n            {{#if content}}\n              {{#if labelEnabled}}\n              <div class=\"news-feed-detail-label\">{{label}}</div>\n              {{/if}}\n\n              <div class=\"news-feed-detail-value\">{{formatDate content}}</div>\n            {{/if}}\n          {{/ifCond}}\n\n        {{/each}}\n      </div>\n      <div class=\"news-feed-inner-holder {{#ifCond editEntry '||' deleteEntry}}has-edit-controls{{/ifCond}}\">\n        {{#ifCond editEntry '||' deleteEntry}}\n        <div class=\"dynamic-list-controls\">\n          {{#if editEntry}}\n          <div class=\"btn btn-default dynamic-list-edit-item\">Edit</div>\n          {{/if}}\n          {{#if deleteEntry}}\n          <div class=\"btn btn-danger dynamic-list-delete-item\">Delete</div>\n          {{/if}}\n        </div>\n        {{/ifCond}}\n        {{#if commentsEnabled}}\n        <div class=\"news-feed-comment-holder news-feed-comemnt-holder-{{id}}\">\n          <!-- Like button will be here -->\n          <!-- Like placeholder -->\n          <i class=\"fa fa-comment-o fa-lg comment-placeholder\"></i>\n        </div>\n        {{/if}}\n      </div>\n    </div>\n  </div>\n</div>";
+    return "<div class=\"news-feed-details-content-holder\" data-entry-id=\"{{id}}\">\n  {{#if [Image]}}\n  <div class=\"news-feed-list-detail-image-wrapper\">\n    <img src=\"{{validateImage [Image]}}\">\n  </div>\n  {{/if}}\n  <div class=\"news-feed-list-detail-content-scroll-wrapper\">\n    <div class=\"news-feed-item-inner-content\">\n      <div class=\"news-feed-info-holder {{#ifCond [Date] '||' [Categories]}}has-date-category{{/ifCond}}\">\n        {{#ifCond [Date] '||' [Categories]}}\n        <div class=\"news-feed-date-category\">{{formatDate [Date]}} {{#ifCond [Date] '&&' [Categories]}}/{{/ifCond}} {{[Categories]}}</div>\n        {{/ifCond}}\n        {{#if likesEnabled}}\n        <div class=\"news-feed-like-holder news-feed-like-holder-{{id}}\">\n          <div class=\"news-feed-like-wrapper btn-like\">\n            <span class=\"count\"></span><i class=\"fa fa-heart-o fa-lg\"></i>\n          </div>\n          <div class=\"news-feed-like-wrapper btn-liked\">\n            <span class=\"count\"></span><i class=\"fa fa-heart fa-lg animated bounceIn\"></i>\n          </div>\n        </div>\n        {{/if}}\n\n        {{#if bookmarksEnabled}}\n        <div class=\"news-feed-bookmark-holder news-feed-bookmark-holder-{{id}}\">\n          <div class=\"news-feed-bookmark-wrapper btn-bookmark\">\n            <i class=\"fa fa-bookmark-o fa-lg\"></i>\n          </div>\n          <div class=\"news-feed-bookmark-wrapper btn-bookmarked\">\n            <i class=\"fa fa-bookmark fa-lg animated fadeIn\"></i>\n          </div>\n        </div>\n        {{/if}}\n\n        {{#if commentsEnabled}}\n        <div class=\"news-feed-comment-holder news-feed-comemnt-holder-{{id}}\">\n          <!-- Like button will be here -->\n          <!-- Like placeholder -->\n          <i class=\"fa fa-comment-o fa-lg comment-placeholder\"></i>\n        </div>\n        {{/if}}\n      </div>\n      {{#if [Title]}}\n      <h2 class=\"news-feed-item-title\">{{[Title]}}</h2>\n      {{/if}}\n      {{#if [Content]}}\n      <div class=\"news-feed-item-description\">\n        {{{auth [Content]}}}\n      </div>\n      {{/if}}\n      <div class=\"news-feed-details-holder\">\n        {{#each entryDetails}}\n          <!-- Image template -->\n          {{#ifCond type '==' 'image'}}\n            {{#if content}}\n              {{#if labelEnabled}}\n              <div class=\"news-feed-detail-label\">{{label}}</div>\n              {{/if}}\n\n              {{#if (isSingle content)}}\n                {{#each content}}\n                <div class=\"news-feed-detail-value\">\n                  <img src=\"{{validateImage this}}\">\n                </div>\n                {{/each}}\n              {{else}}\n              <div class=\"news-feed-multiple-images-holder\">\n                {{#each content}}\n                <div class=\"news-feed-multiple-images-item\">\n                  <div class=\"image\" style=\"background-image: url('{{validateImage this}}')\"></div>\n                </div>\n                {{/each}}\n              </div>\n              {{/if}}\n            {{/if}}\n          {{/ifCond}}\n\n          <!-- Plain text template -->\n          {{#ifCond type '==' 'text'}}\n            {{#if content}}\n              {{#if labelEnabled}}\n              <div class=\"news-feed-detail-label\">{{label}}</div>\n              {{/if}}\n\n              <div class=\"news-feed-detail-value\">{{content}}</div>\n            {{/if}}\n          {{/ifCond}}\n\n          <!-- HTML template -->\n          {{#ifCond type '==' 'html'}}\n            {{#if content}}\n              {{#if labelEnabled}}\n              <div class=\"news-feed-detail-label\">{{label}}</div>\n              {{/if}}\n\n              <div class=\"news-feed-detail-value\">{{{auth content}}}</div>\n            {{/if}}\n          {{/ifCond}}\n\n          <!-- URL template -->\n          {{#ifCond type '==' 'url'}}\n            {{#if content}}\n              {{#if labelEnabled}}\n              <div class=\"news-feed-detail-label\">{{label}}</div>\n              {{/if}}\n\n              <div class=\"news-feed-detail-value\">\n                <a href=\"{{{auth content}}}\" target=\"_blank\">Tap to open</a>\n              </div>\n            {{/if}}\n          {{/ifCond}}\n\n          <!-- Telephone template -->\n          {{#ifCond type '==' 'tel'}}\n            {{#if content}}\n              {{#if labelEnabled}}\n              <div class=\"news-feed-detail-label\">{{label}}</div>\n              {{/if}}\n\n              <div class=\"news-feed-detail-value\">\n                <a href=\"tel:{{removeSpaces content}}\" target=\"_blank\">{{content}}</a>\n              </div>\n            {{/if}}\n          {{/ifCond}}\n\n          <!-- Email template -->\n          {{#ifCond type '==' 'mail'}}\n            {{#if content}}\n              {{#if labelEnabled}}\n              <div class=\"news-feed-detail-label\">{{label}}</div>\n              {{/if}}\n\n              <div class=\"news-feed-detail-value\">\n                <a href=\"mailto:{{content}}\" target=\"_blank\">{{content}}</a>\n              </div>\n            {{/if}}\n          {{/ifCond}}\n\n          <!-- Date template -->\n          {{#ifCond type '==' 'date'}}\n            {{#if content}}\n              {{#if labelEnabled}}\n              <div class=\"news-feed-detail-label\">{{label}}</div>\n              {{/if}}\n\n              <div class=\"news-feed-detail-value\">{{formatDate content}}</div>\n            {{/if}}\n          {{/ifCond}}\n\n        {{/each}}\n      </div>\n      <div class=\"news-feed-inner-holder {{#ifCond editEntry '||' deleteEntry}}has-edit-controls{{/ifCond}}\">\n        {{#ifCond editEntry '||' deleteEntry}}\n        <div class=\"dynamic-list-controls\">\n          {{#if editEntry}}\n          <div class=\"btn btn-default dynamic-list-edit-item\">Edit</div>\n          {{/if}}\n          {{#if deleteEntry}}\n          <div class=\"btn btn-danger dynamic-list-delete-item\">Delete</div>\n          {{/if}}\n        </div>\n        {{/ifCond}}\n        {{#if commentsEnabled}}\n        <div class=\"news-feed-comment-holder news-feed-comemnt-holder-{{id}}\">\n          <!-- Like button will be here -->\n          <!-- Like placeholder -->\n          <i class=\"fa fa-comment-o fa-lg comment-placeholder\"></i>\n        </div>\n        {{/if}}\n      </div>\n    </div>\n  </div>\n</div>";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.build.news-feed-filters"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
@@ -63,7 +63,7 @@ this["Fliplet"]["Widget"]["Templates"]["templates.build.simple-list-comment"] =
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.build.simple-list-detail"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "<div class=\"simple-list-details-holder\" data-entry-id=\"{{id}}\">\n  {{#each data}}\n    <!-- Image template -->\n    {{#ifCond type '==' 'image'}}\n      {{#if content}}\n        {{#if labelEnabled}}\n        <div class=\"simple-list-detail-label\">{{label}}</div>\n        {{/if}}\n\n        {{#if (isSingle content)}}\n          {{#each content}}  \n          <div class=\"simple-list-detail-value\">\n            <img src=\"{{validateImage this}}\">\n          </div>\n          {{/each}}\n        {{else}}\n        <div class=\"simple-list-multiple-images-holder\">\n          {{#each content}}\n          <div class=\"simple-list-multiple-images-item\">\n            <img src=\"{{validateImage this}}\">\n          </div>\n          {{/each}}\n        </div>\n        {{/if}}\n      {{/if}}\n    {{/ifCond}}\n\n    <!-- Plain text template -->\n    {{#ifCond type '==' 'text'}}\n      {{#if content}}\n        {{#if labelEnabled}}\n        <div class=\"simple-list-detail-label\">{{label}}</div>\n        {{/if}}\n\n        <div class=\"simple-list-detail-value\">{{content}}</div>\n      {{/if}}\n    {{/ifCond}}\n\n    <!-- HTML template -->\n    {{#ifCond type '==' 'html'}}\n      {{#if content}}\n        {{#if labelEnabled}}\n        <div class=\"simple-list-detail-label\">{{label}}</div>\n        {{/if}}\n\n        <div class=\"simple-list-detail-value\">{{{auth content}}}</div>\n      {{/if}}\n    {{/ifCond}}\n\n    <!-- URL template -->\n    {{#ifCond type '==' 'url'}}\n      {{#if content}}\n        {{#if labelEnabled}}\n        <div class=\"simple-list-detail-label\">{{label}}</div>\n        {{/if}}\n\n        <div class=\"simple-list-detail-value\">\n          <a href=\"{{{auth content}}}\" target=\"_blank\">Tap to open</a>\n        </div>\n      {{/if}}\n    {{/ifCond}}\n\n    <!-- Telephone template -->\n    {{#ifCond type '==' 'tel'}}\n      {{#if content}}\n        {{#if labelEnabled}}\n        <div class=\"simple-list-detail-label\">{{label}}</div>\n        {{/if}}\n\n        <div class=\"simple-list-detail-value\">\n          <a href=\"tel:{{removeSpaces content}}\" target=\"_blank\">{{content}}</a>\n        </div>\n      {{/if}}\n    {{/ifCond}}\n\n    <!-- Email template -->\n    {{#ifCond type '==' 'mail'}}\n      {{#if content}}\n        {{#if labelEnabled}}\n        <div class=\"simple-list-detail-label\">{{label}}</div>\n        {{/if}}\n\n        <div class=\"simple-list-detail-value\">\n          <a href=\"mailto:{{content}}\" target=\"_blank\">{{content}}</a>\n        </div>\n      {{/if}}\n    {{/ifCond}}\n\n    <!-- Date template -->\n    {{#ifCond type '==' 'date'}}\n      {{#if content}}\n        {{#if labelEnabled}}\n        <div class=\"simple-list-detail-label\">{{label}}</div>\n        {{/if}}\n\n        <div class=\"simple-list-detail-value\">{{formatDate content}}</div>\n      {{/if}}\n    {{/ifCond}}\n\n  {{/each}}\n\n  <!-- Edit and Delete buttons -->\n  <div class=\"simple-list-overlay-inner-holder {{#ifCond editEntry '||' deleteEntry}}has-edit-controls{{/ifCond}}\">\n    {{#ifCond editEntry '||' deleteEntry}}\n    <div class=\"dynamic-list-controls\">\n      {{#if editEntry}}\n      <div class=\"btn btn-default dynamic-list-edit-item\">Edit</div>\n      {{/if}}\n      {{#if deleteEntry}}\n      <div class=\"btn btn-danger dynamic-list-delete-item\">Delete</div>\n      {{/if}}\n    </div>\n    {{/ifCond}}\n    <div class=\"simple-list-overlay-social-holder\">\n      {{#if likesEnabled}}\n      <div class=\"simple-list-like-holder simple-list-like-holder-{{id}}\">\n        <div class=\"simple-list-like-wrapper btn-like\">\n          <span class=\"count\"></span><i class=\"fa fa-heart-o fa-lg\"></i>\n        </div>\n        <div class=\"simple-list-like-wrapper btn-liked\">\n          <span class=\"count\"></span><i class=\"fa fa-heart fa-lg animated bounceIn\"></i>\n        </div>\n      </div>\n      {{/if}}\n\n      {{#if bookmarksEnabled}}\n      <div class=\"simple-list-bookmark-holder simple-list-bookmark-holder-{{id}}\">\n        <div class=\"simple-list-bookmark-wrapper btn-bookmark\">\n          <i class=\"fa fa-bookmark-o fa-lg\"></i>\n        </div>\n        <div class=\"simple-list-bookmark-wrapper btn-bookmarked\">\n          <i class=\"fa fa-bookmark fa-lg animated fadeIn\"></i>\n        </div>\n      </div>\n      {{/if}}\n\n      {{#if commentsEnabled}}\n      <div class=\"simple-list-comment-holder simple-list-comemnt-holder-{{id}}\">\n        <!-- Like button will be here -->\n        <!-- Like placeholder -->\n        <i class=\"fa fa-comment-o fa-lg comment-placeholder\"></i>\n      </div>\n      {{/if}}\n    </div>\n  </div>\n</div>";
+    return "<div class=\"simple-list-details-holder\" data-entry-id=\"{{id}}\">\n  {{#each data}}\n    <!-- Image template -->\n    {{#ifCond type '==' 'image'}}\n      {{#if content}}\n        {{#if labelEnabled}}\n        <div class=\"simple-list-detail-label\">{{label}}</div>\n        {{/if}}\n\n        {{#if (isSingle content)}}\n          {{#each content}}  \n          <div class=\"simple-list-detail-value\">\n            <img src=\"{{validateImage this}}\">\n          </div>\n          {{/each}}\n        {{else}}\n        <div class=\"simple-list-multiple-images-holder\">\n          {{#each content}}\n          <div class=\"simple-list-multiple-images-item\">\n            <div class=\"image\" style=\"background-image: url('{{validateImage this}}')\"></div>\n          </div>\n          {{/each}}\n        </div>\n        {{/if}}\n      {{/if}}\n    {{/ifCond}}\n\n    <!-- Plain text template -->\n    {{#ifCond type '==' 'text'}}\n      {{#if content}}\n        {{#if labelEnabled}}\n        <div class=\"simple-list-detail-label\">{{label}}</div>\n        {{/if}}\n\n        <div class=\"simple-list-detail-value\">{{content}}</div>\n      {{/if}}\n    {{/ifCond}}\n\n    <!-- HTML template -->\n    {{#ifCond type '==' 'html'}}\n      {{#if content}}\n        {{#if labelEnabled}}\n        <div class=\"simple-list-detail-label\">{{label}}</div>\n        {{/if}}\n\n        <div class=\"simple-list-detail-value\">{{{auth content}}}</div>\n      {{/if}}\n    {{/ifCond}}\n\n    <!-- URL template -->\n    {{#ifCond type '==' 'url'}}\n      {{#if content}}\n        {{#if labelEnabled}}\n        <div class=\"simple-list-detail-label\">{{label}}</div>\n        {{/if}}\n\n        <div class=\"simple-list-detail-value\">\n          <a href=\"{{{auth content}}}\" target=\"_blank\">Tap to open</a>\n        </div>\n      {{/if}}\n    {{/ifCond}}\n\n    <!-- Telephone template -->\n    {{#ifCond type '==' 'tel'}}\n      {{#if content}}\n        {{#if labelEnabled}}\n        <div class=\"simple-list-detail-label\">{{label}}</div>\n        {{/if}}\n\n        <div class=\"simple-list-detail-value\">\n          <a href=\"tel:{{removeSpaces content}}\" target=\"_blank\">{{content}}</a>\n        </div>\n      {{/if}}\n    {{/ifCond}}\n\n    <!-- Email template -->\n    {{#ifCond type '==' 'mail'}}\n      {{#if content}}\n        {{#if labelEnabled}}\n        <div class=\"simple-list-detail-label\">{{label}}</div>\n        {{/if}}\n\n        <div class=\"simple-list-detail-value\">\n          <a href=\"mailto:{{content}}\" target=\"_blank\">{{content}}</a>\n        </div>\n      {{/if}}\n    {{/ifCond}}\n\n    <!-- Date template -->\n    {{#ifCond type '==' 'date'}}\n      {{#if content}}\n        {{#if labelEnabled}}\n        <div class=\"simple-list-detail-label\">{{label}}</div>\n        {{/if}}\n\n        <div class=\"simple-list-detail-value\">{{formatDate content}}</div>\n      {{/if}}\n    {{/ifCond}}\n\n  {{/each}}\n\n  <!-- Edit and Delete buttons -->\n  <div class=\"simple-list-overlay-inner-holder {{#ifCond editEntry '||' deleteEntry}}has-edit-controls{{/ifCond}}\">\n    {{#ifCond editEntry '||' deleteEntry}}\n    <div class=\"dynamic-list-controls\">\n      {{#if editEntry}}\n      <div class=\"btn btn-default dynamic-list-edit-item\">Edit</div>\n      {{/if}}\n      {{#if deleteEntry}}\n      <div class=\"btn btn-danger dynamic-list-delete-item\">Delete</div>\n      {{/if}}\n    </div>\n    {{/ifCond}}\n    <div class=\"simple-list-overlay-social-holder\">\n      {{#if likesEnabled}}\n      <div class=\"simple-list-like-holder simple-list-like-holder-{{id}}\">\n        <div class=\"simple-list-like-wrapper btn-like\">\n          <span class=\"count\"></span><i class=\"fa fa-heart-o fa-lg\"></i>\n        </div>\n        <div class=\"simple-list-like-wrapper btn-liked\">\n          <span class=\"count\"></span><i class=\"fa fa-heart fa-lg animated bounceIn\"></i>\n        </div>\n      </div>\n      {{/if}}\n\n      {{#if bookmarksEnabled}}\n      <div class=\"simple-list-bookmark-holder simple-list-bookmark-holder-{{id}}\">\n        <div class=\"simple-list-bookmark-wrapper btn-bookmark\">\n          <i class=\"fa fa-bookmark-o fa-lg\"></i>\n        </div>\n        <div class=\"simple-list-bookmark-wrapper btn-bookmarked\">\n          <i class=\"fa fa-bookmark fa-lg animated fadeIn\"></i>\n        </div>\n      </div>\n      {{/if}}\n\n      {{#if commentsEnabled}}\n      <div class=\"simple-list-comment-holder simple-list-comemnt-holder-{{id}}\">\n        <!-- Like button will be here -->\n        <!-- Like placeholder -->\n        <i class=\"fa fa-comment-o fa-lg comment-placeholder\"></i>\n      </div>\n      {{/if}}\n    </div>\n  </div>\n</div>";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.build.simple-list-filters"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
@@ -87,7 +87,7 @@ this["Fliplet"]["Widget"]["Templates"]["templates.build.small-card-base"] = Hand
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.build.small-card-detail"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "{{#if [Image]}}\n<div class=\"small-card-list-detail-image-wrapper\">\n  <div class=\"small-card-list-detail-image\" style=\"background-image: url('{{auth [Image]}}')\"></div>\n  {{#unless [Image]}}<i class=\"fa fa-user\"></i>{{/unless}}\n</div>\n{{/if}}\n<div class=\"small-card-list-detail-content-scroll-wrapper\" data-entry-id=\"{{id}}\">\n  <div class=\"small-card-list-detail-content-wrapper\">\n    {{#if bookmarksEnabled}}\n    <div class=\"small-card-bookmark-holder small-card-bookmark-holder-{{id}}\">\n      <div class=\"small-card-bookmark-wrapper btn-bookmark\">\n        <i class=\"fa fa-bookmark-o\"></i>\n      </div>\n      <div class=\"small-card-bookmark-wrapper btn-bookmarked\">\n        <i class=\"fa fa-bookmark animated fadeIn\"></i>\n      </div>\n    </div>\n    {{/if}}\n    {{#ifCond [First Name] '||' [Last Name] }}\n      <div class=\"small-card-list-detail-name\">{{[First Name]}} {{[Last Name]}}</div>\n    {{/ifCond}}\n    <div class=\"small-card-list-detail-role\">{{[Title]}}</div>\n    <div class=\"small-card-list-detail-location\">{{[Location]}}</div>\n    <div class=\"small-card-list-detail-buttons-wrapper\">\n      {{#if [Email]}}\n      <div class=\"small-card-list-detail-button\">\n        <a href=\"mailto:{{[Email]}}\" target=\"_blank\">\n          <div class=\"small-card-list-detail-button-image\"><span class=\"fa fa-envelope-o\"></span></div>\n          <div class=\"small-card-list-detail-button-text\">EMAIL</div>\n        </a>\n      </div>\n      {{/if}}\n      {{#if [Telephone]}}\n      <div class=\"small-card-list-detail-button\">\n        <a href=\"tel:{{[Telephone]}}\" target=\"_blank\">\n          <div class=\"small-card-list-detail-button-image\"><span class=\"fa fa-phone\"></span></div>\n          <div class=\"small-card-list-detail-button-text\">CALL</div>\n        </a>\n      </div>\n      {{/if}}\n      {{#if [Linkedin]}}\n      <div class=\"small-card-list-detail-button\">\n        <a href=\"{{[Linkedin]}}\" target=\"_blank\">\n          <div class=\"small-card-list-detail-button-image\"><span class=\"fa fa-linkedin\"></span></div>\n          <div class=\"small-card-list-detail-button-text\">LINKEDIN</div>\n        </a>\n      </div>\n      {{/if}}\n    </div>\n\n    <div class=\"small-card-details-holder\">\n      {{#each entryDetails}}\n        <!-- Image template -->\n        {{#ifCond type '==' 'image'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            {{#if (isSingle content)}}\n              {{#each content}}\n              <div class=\"small-card-list-detail-body-text\">\n                <img src=\"{{validateImage this}}\">\n              </div>\n              {{/each}}\n            {{else}}\n            <div class=\"small-card-multiple-images-holder\">\n              {{#each content}}\n              <div class=\"small-card-list-multiple-images-item\">\n                <img src=\"{{validateImage this}}\">\n              </div>\n              {{/each}}\n            </div>\n            {{/if}}\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- Plain text template -->\n        {{#ifCond type '==' 'text'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-card-list-detail-body-text\">{{content}}</div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- HTML template -->\n        {{#ifCond type '==' 'html'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-card-list-detail-body-text\">{{{auth content}}}</div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- URL template -->\n        {{#ifCond type '==' 'url'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-card-list-detail-body-text\">\n              <a href=\"{{{auth content}}}\" target=\"_blank\">Tap to open</a>\n            </div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- Telephone template -->\n        {{#ifCond type '==' 'tel'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-card-list-detail-body-text\">\n              <a href=\"tel:{{removeSpaces content}}\" target=\"_blank\">{{content}}</a>\n            </div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- Email template -->\n        {{#ifCond type '==' 'mail'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-card-list-detail-body-text\">\n              <a href=\"mailto:{{content}}\" target=\"_blank\">{{content}}</a>\n            </div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- Date template -->\n        {{#ifCond type '==' 'date'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-card-list-detail-body-text\">{{formatDate content}}</div>\n          {{/if}}\n        {{/ifCond}}\n\n      {{/each}}\n    </div>\n\n    <!-- Edit or Delete buttons -->\n    {{#ifCond editEntry '||' deleteEntry}}\n    <div class=\"dynamic-list-controls\">\n      {{#if editEntry}}\n      <div class=\"btn btn-default dynamic-list-edit-item\">Edit</div>\n      {{/if}}\n      {{#if deleteEntry}}\n      <div class=\"btn btn-danger dynamic-list-delete-item\">Delete</div>\n      {{/if}}\n    </div>\n    {{/ifCond}}\n  </div>\n</div>\n";
+    return "{{#if [Image]}}\n<div class=\"small-card-list-detail-image-wrapper\">\n  <div class=\"small-card-list-detail-image\" style=\"background-image: url('{{auth [Image]}}')\"></div>\n  {{#unless [Image]}}<i class=\"fa fa-user\"></i>{{/unless}}\n</div>\n{{/if}}\n<div class=\"small-card-list-detail-content-scroll-wrapper\" data-entry-id=\"{{id}}\">\n  <div class=\"small-card-list-detail-content-wrapper\">\n    {{#if bookmarksEnabled}}\n    <div class=\"small-card-bookmark-holder small-card-bookmark-holder-{{id}}\">\n      <div class=\"small-card-bookmark-wrapper btn-bookmark\">\n        <i class=\"fa fa-bookmark-o\"></i>\n      </div>\n      <div class=\"small-card-bookmark-wrapper btn-bookmarked\">\n        <i class=\"fa fa-bookmark animated fadeIn\"></i>\n      </div>\n    </div>\n    {{/if}}\n    {{#ifCond [First Name] '||' [Last Name] }}\n      <div class=\"small-card-list-detail-name\">{{[First Name]}} {{[Last Name]}}</div>\n    {{/ifCond}}\n    <div class=\"small-card-list-detail-role\">{{[Title]}}</div>\n    <div class=\"small-card-list-detail-location\">{{[Location]}}</div>\n    <div class=\"small-card-list-detail-buttons-wrapper\">\n      {{#if [Email]}}\n      <div class=\"small-card-list-detail-button\">\n        <a href=\"mailto:{{[Email]}}\" target=\"_blank\">\n          <div class=\"small-card-list-detail-button-image\"><span class=\"fa fa-envelope-o\"></span></div>\n          <div class=\"small-card-list-detail-button-text\">EMAIL</div>\n        </a>\n      </div>\n      {{/if}}\n      {{#if [Telephone]}}\n      <div class=\"small-card-list-detail-button\">\n        <a href=\"tel:{{[Telephone]}}\" target=\"_blank\">\n          <div class=\"small-card-list-detail-button-image\"><span class=\"fa fa-phone\"></span></div>\n          <div class=\"small-card-list-detail-button-text\">CALL</div>\n        </a>\n      </div>\n      {{/if}}\n      {{#if [Linkedin]}}\n      <div class=\"small-card-list-detail-button\">\n        <a href=\"{{[Linkedin]}}\" target=\"_blank\">\n          <div class=\"small-card-list-detail-button-image\"><span class=\"fa fa-linkedin\"></span></div>\n          <div class=\"small-card-list-detail-button-text\">LINKEDIN</div>\n        </a>\n      </div>\n      {{/if}}\n    </div>\n\n    <div class=\"small-card-details-holder\">\n      {{#each entryDetails}}\n        <!-- Image template -->\n        {{#ifCond type '==' 'image'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            {{#if (isSingle content)}}\n              {{#each content}}\n              <div class=\"small-card-list-detail-body-text\">\n                <img src=\"{{validateImage this}}\">\n              </div>\n              {{/each}}\n            {{else}}\n            <div class=\"small-card-multiple-images-holder\">\n              {{#each content}}\n              <div class=\"small-card-list-multiple-images-item\">\n                <div class=\"image\" style=\"background-image: url('{{validateImage this}}')\"></div>\n              </div>\n              {{/each}}\n            </div>\n            {{/if}}\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- Plain text template -->\n        {{#ifCond type '==' 'text'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-card-list-detail-body-text\">{{content}}</div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- HTML template -->\n        {{#ifCond type '==' 'html'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-card-list-detail-body-text\">{{{auth content}}}</div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- URL template -->\n        {{#ifCond type '==' 'url'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-card-list-detail-body-text\">\n              <a href=\"{{{auth content}}}\" target=\"_blank\">Tap to open</a>\n            </div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- Telephone template -->\n        {{#ifCond type '==' 'tel'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-card-list-detail-body-text\">\n              <a href=\"tel:{{removeSpaces content}}\" target=\"_blank\">{{content}}</a>\n            </div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- Email template -->\n        {{#ifCond type '==' 'mail'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-card-list-detail-body-text\">\n              <a href=\"mailto:{{content}}\" target=\"_blank\">{{content}}</a>\n            </div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- Date template -->\n        {{#ifCond type '==' 'date'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-card-list-detail-body-text\">{{formatDate content}}</div>\n          {{/if}}\n        {{/ifCond}}\n\n      {{/each}}\n    </div>\n\n    <!-- Edit or Delete buttons -->\n    {{#ifCond editEntry '||' deleteEntry}}\n    <div class=\"dynamic-list-controls\">\n      {{#if editEntry}}\n      <div class=\"btn btn-default dynamic-list-edit-item\">Edit</div>\n      {{/if}}\n      {{#if deleteEntry}}\n      <div class=\"btn btn-danger dynamic-list-delete-item\">Delete</div>\n      {{/if}}\n    </div>\n    {{/ifCond}}\n  </div>\n</div>\n";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.build.small-card-filters"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
@@ -111,7 +111,7 @@ this["Fliplet"]["Widget"]["Templates"]["templates.build.small-h-card-base"] = Ha
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.build.small-h-card-detail"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
-    return "{{#if [Image]}}\n<div class=\"small-h-card-list-detail-image-wrapper\">\n  <div class=\"small-h-card-list-detail-image\" style=\"background-image: url('{{auth [Image]}}')\"></div>\n  {{#unless [Image]}}<i class=\"fa fa-user\"></i>{{/unless}}\n</div>\n{{/if}}\n<div class=\"small-h-card-list-detail-content-scroll-wrapper\" data-entry-id=\"{{id}}\">\n  <div class=\"small-h-card-list-detail-content-wrapper\">\n    <div class=\"small-h-card-list-detail-name\">{{[First Name]}} {{[Last Name]}}</div>\n    <div class=\"small-h-card-list-detail-role\">{{[Title]}}</div>\n    <div class=\"small-h-card-list-detail-location\">{{[Location]}}</div>\n    <div class=\"small-h-card-list-detail-buttons-wrapper\">\n      {{#if [Email]}}\n      <div class=\"small-h-card-list-detail-button\">\n        <a href=\"mailto:{{[Email]}}\" target=\"_blank\">\n          <div class=\"small-h-card-list-detail-button-image\"><span class=\"fa fa-envelope-o\"></span></div>\n          <div class=\"small-h-card-list-detail-button-text\">EMAIL</div>\n        </a>\n      </div>\n      {{/if}}\n      {{#if [Telephone]}}\n      <div class=\"small-h-card-list-detail-button\">\n        <a href=\"tel:{{[Telephone]}}\" target=\"_blank\">\n          <div class=\"small-h-card-list-detail-button-image\"><span class=\"fa fa-phone\"></span></div>\n          <div class=\"small-h-card-list-detail-button-text\">CALL</div>\n        </a>\n      </div>\n      {{/if}}\n      {{#if [Linkedin]}}\n      <div class=\"small-h-card-list-detail-button\">\n        <a href=\"{{[Linkedin]}}\" target=\"_blank\">\n          <div class=\"small-h-card-list-detail-button-image\"><span class=\"fa fa-linkedin\"></span></div>\n          <div class=\"small-h-card-list-detail-button-text\">LINKEDIN</div>\n        </a>\n      </div>\n      {{/if}}\n    </div>\n\n    <div class=\"small-h-card-details-holder\">\n      {{#each entryDetails}}\n        <!-- Image template -->\n        {{#ifCond type '==' 'image'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-h-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n \n            {{#if (isSingle content)}}\n              {{#each content}}\n              <div class=\"small-h-card-detail-value\">\n                <img src=\"{{validateImage this}}\">\n              </div>\n              {{/each}}\n            {{else}}\n            <div class=\"small-h-card-multiple-images-holder\">\n              {{#each content}}\n              <div class=\"small-h-card-multiple-images-item\">\n                <img src=\"{{validateImage this}}\">\n              </div>\n              {{/each}}\n            </div>\n            {{/if}}\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- Plain text template -->\n        {{#ifCond type '==' 'text'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-h-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-h-card-list-detail-body-text\">{{content}}</div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- HTML template -->\n        {{#ifCond type '==' 'html'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-h-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-h-card-list-detail-body-text\">{{{auth content}}}</div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- URL template -->\n        {{#ifCond type '==' 'url'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-h-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-h-card-list-detail-body-text\">\n              <a href=\"{{{auth content}}}\" target=\"_blank\">Tap to open</a>\n            </div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- Telephone template -->\n        {{#ifCond type '==' 'tel'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-h-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-h-card-list-detail-body-text\">\n              <a href=\"tel:{{removeSpaces content}}\" target=\"_blank\">{{content}}</a>\n            </div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- Email template -->\n        {{#ifCond type '==' 'mail'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-h-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-h-card-list-detail-body-text\">\n              <a href=\"mailto:{{content}}\" target=\"_blank\">{{content}}</a>\n            </div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- Date template -->\n        {{#ifCond type '==' 'date'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-h-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-h-card-list-detail-body-text\">{{formatDate content}}</div>\n          {{/if}}\n        {{/ifCond}}\n\n      {{/each}}\n    </div>\n\n    <!-- Edit or Delete buttons -->\n    {{#ifCond editEntry '||' deleteEntry}}\n    <div class=\"dynamic-list-controls\">\n      {{#if editEntry}}\n      <div class=\"btn btn-default dynamic-list-edit-item\">Edit</div>\n      {{/if}}\n      {{#if deleteEntry}}\n      <div class=\"btn btn-danger dynamic-list-delete-item\">Delete</div>\n      {{/if}}\n    </div>\n    {{/ifCond}}\n  </div>\n</div>";
+    return "{{#if [Image]}}\n<div class=\"small-h-card-list-detail-image-wrapper\">\n  <div class=\"small-h-card-list-detail-image\" style=\"background-image: url('{{auth [Image]}}')\"></div>\n  {{#unless [Image]}}<i class=\"fa fa-user\"></i>{{/unless}}\n</div>\n{{/if}}\n<div class=\"small-h-card-list-detail-content-scroll-wrapper\" data-entry-id=\"{{id}}\">\n  <div class=\"small-h-card-list-detail-content-wrapper\">\n    <div class=\"small-h-card-list-detail-name\">{{[First Name]}} {{[Last Name]}}</div>\n    <div class=\"small-h-card-list-detail-role\">{{[Title]}}</div>\n    <div class=\"small-h-card-list-detail-location\">{{[Location]}}</div>\n    <div class=\"small-h-card-list-detail-buttons-wrapper\">\n      {{#if [Email]}}\n      <div class=\"small-h-card-list-detail-button\">\n        <a href=\"mailto:{{[Email]}}\" target=\"_blank\">\n          <div class=\"small-h-card-list-detail-button-image\"><span class=\"fa fa-envelope-o\"></span></div>\n          <div class=\"small-h-card-list-detail-button-text\">EMAIL</div>\n        </a>\n      </div>\n      {{/if}}\n      {{#if [Telephone]}}\n      <div class=\"small-h-card-list-detail-button\">\n        <a href=\"tel:{{[Telephone]}}\" target=\"_blank\">\n          <div class=\"small-h-card-list-detail-button-image\"><span class=\"fa fa-phone\"></span></div>\n          <div class=\"small-h-card-list-detail-button-text\">CALL</div>\n        </a>\n      </div>\n      {{/if}}\n      {{#if [Linkedin]}}\n      <div class=\"small-h-card-list-detail-button\">\n        <a href=\"{{[Linkedin]}}\" target=\"_blank\">\n          <div class=\"small-h-card-list-detail-button-image\"><span class=\"fa fa-linkedin\"></span></div>\n          <div class=\"small-h-card-list-detail-button-text\">LINKEDIN</div>\n        </a>\n      </div>\n      {{/if}}\n    </div>\n\n    <div class=\"small-h-card-details-holder\">\n      {{#each entryDetails}}\n        <!-- Image template -->\n        {{#ifCond type '==' 'image'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-h-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n \n            {{#if (isSingle content)}}\n              {{#each content}}\n              <div class=\"small-h-card-detail-value\">\n                <img src=\"{{validateImage this}}\">\n              </div>\n              {{/each}}\n            {{else}}\n            <div class=\"small-h-card-multiple-images-holder\">\n              {{#each content}}\n              <div class=\"small-h-card-multiple-images-item\">\n                <div class=\"image\" style=\"background-image: url('{{validateImage this}}')\"></div>\n              </div>\n              {{/each}}\n            </div>\n            {{/if}}\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- Plain text template -->\n        {{#ifCond type '==' 'text'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-h-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-h-card-list-detail-body-text\">{{content}}</div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- HTML template -->\n        {{#ifCond type '==' 'html'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-h-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-h-card-list-detail-body-text\">{{{auth content}}}</div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- URL template -->\n        {{#ifCond type '==' 'url'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-h-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-h-card-list-detail-body-text\">\n              <a href=\"{{{auth content}}}\" target=\"_blank\">Tap to open</a>\n            </div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- Telephone template -->\n        {{#ifCond type '==' 'tel'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-h-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-h-card-list-detail-body-text\">\n              <a href=\"tel:{{removeSpaces content}}\" target=\"_blank\">{{content}}</a>\n            </div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- Email template -->\n        {{#ifCond type '==' 'mail'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-h-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-h-card-list-detail-body-text\">\n              <a href=\"mailto:{{content}}\" target=\"_blank\">{{content}}</a>\n            </div>\n          {{/if}}\n        {{/ifCond}}\n\n        <!-- Date template -->\n        {{#ifCond type '==' 'date'}}\n          {{#if content}}\n            {{#if labelEnabled}}\n            <div class=\"small-h-card-list-detail-label\">{{label}}</div>\n            {{/if}}\n\n            <div class=\"small-h-card-list-detail-body-text\">{{formatDate content}}</div>\n          {{/if}}\n        {{/ifCond}}\n\n      {{/each}}\n    </div>\n\n    <!-- Edit or Delete buttons -->\n    {{#ifCond editEntry '||' deleteEntry}}\n    <div class=\"dynamic-list-controls\">\n      {{#if editEntry}}\n      <div class=\"btn btn-default dynamic-list-edit-item\">Edit</div>\n      {{/if}}\n      {{#if deleteEntry}}\n      <div class=\"btn btn-danger dynamic-list-delete-item\">Delete</div>\n      {{/if}}\n    </div>\n    {{/ifCond}}\n  </div>\n</div>";
 },"useData":true});
 
 this["Fliplet"]["Widget"]["Templates"]["templates.build.small-h-card-loop"] = Handlebars.template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
diff --git a/templates/build/agenda-cards-detail.build.hbs b/templates/build/agenda-cards-detail.build.hbs
index 794b4d3b..44b0c98a 100644
--- a/templates/build/agenda-cards-detail.build.hbs
+++ b/templates/build/agenda-cards-detail.build.hbs
@@ -57,7 +57,7 @@
             <div class="agenda-multiple-images-holder">
               \{{#each content}}
               <div class="agenda-multiple-images-item">
-                <img src="\{{validateImage this}}">
+                <div class="image" style="background-image: url('\{{validateImage this}}')"></div>
               </div>
               \{{/each}}
             </div>
diff --git a/templates/build/news-feed-detail.build.hbs b/templates/build/news-feed-detail.build.hbs
index 23531bff..aba73b99 100644
--- a/templates/build/news-feed-detail.build.hbs
+++ b/templates/build/news-feed-detail.build.hbs
@@ -67,7 +67,7 @@
               <div class="news-feed-multiple-images-holder">
                 \{{#each content}}
                 <div class="news-feed-multiple-images-item">
-                  <img src="\{{validateImage this}}">
+                  <div class="image" style="background-image: url('\{{validateImage this}}')"></div>
                 </div>
                 \{{/each}}
               </div>
diff --git a/templates/build/simple-list-detail.build.hbs b/templates/build/simple-list-detail.build.hbs
index 22749bb9..bf840d7d 100644
--- a/templates/build/simple-list-detail.build.hbs
+++ b/templates/build/simple-list-detail.build.hbs
@@ -17,7 +17,7 @@
         <div class="simple-list-multiple-images-holder">
           \{{#each content}}
           <div class="simple-list-multiple-images-item">
-            <img src="\{{validateImage this}}">
+            <div class="image" style="background-image: url('\{{validateImage this}}')"></div>
           </div>
           \{{/each}}
         </div>
diff --git a/templates/build/small-card-detail.build.hbs b/templates/build/small-card-detail.build.hbs
index 87b9b0de..fc5e3d93 100644
--- a/templates/build/small-card-detail.build.hbs
+++ b/templates/build/small-card-detail.build.hbs
@@ -67,7 +67,7 @@
             <div class="small-card-multiple-images-holder">
               \{{#each content}}
               <div class="small-card-list-multiple-images-item">
-                <img src="\{{validateImage this}}">
+                <div class="image" style="background-image: url('\{{validateImage this}}')"></div>
               </div>
               \{{/each}}
             </div>
diff --git a/templates/build/small-h-card-detail.build.hbs b/templates/build/small-h-card-detail.build.hbs
index 344f7e71..7089b651 100644
--- a/templates/build/small-h-card-detail.build.hbs
+++ b/templates/build/small-h-card-detail.build.hbs
@@ -55,7 +55,7 @@
             <div class="small-h-card-multiple-images-holder">
               \{{#each content}}
               <div class="small-h-card-multiple-images-item">
-                <img src="\{{validateImage this}}">
+                <div class="image" style="background-image: url('\{{validateImage this}}')"></div>
               </div>
               \{{/each}}
             </div>
diff --git a/widget.json b/widget.json
index 045cb6f4..37b66819 100644
--- a/widget.json
+++ b/widget.json
@@ -1,6 +1,6 @@
 {
-  "name": "List (from data source)",
-  "package": "com.fliplet.dynamic-lists",
+  "name": "List (from data source)-images",
+  "package": "com.fliplet.dynamic-lists-images",
   "version": "1.4.0",
   "icon": "img/icon.png",
   "tags": ["type:component", "category:list"],

From aebabb522467e66930f5bdfc71c6cd4aa9c63205 Mon Sep 17 00:00:00 2001
From: Maksym Shokin <maksym.sh@upplabs.com>
Date: Wed, 9 Sep 2020 22:42:02 +0300
Subject: [PATCH 4/4] removed-package

---
 widget.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/widget.json b/widget.json
index 37b66819..045cb6f4 100644
--- a/widget.json
+++ b/widget.json
@@ -1,6 +1,6 @@
 {
-  "name": "List (from data source)-images",
-  "package": "com.fliplet.dynamic-lists-images",
+  "name": "List (from data source)",
+  "package": "com.fliplet.dynamic-lists",
   "version": "1.4.0",
   "icon": "img/icon.png",
   "tags": ["type:component", "category:list"],