Image preview fixed.

frontend/app/features/content/shared/list/content-value.component.html

@@ -1,6 +1,8 @@
 <ng-container *ngIf="isPlain; else html">
-    <span class="truncate">{{value}}</span>
+    <span>
+        <span class="truncate">{{value}}</span>
+    </span>
 </ng-container>
 <ng-template #html>
-    <span class="html-value" [innerHTML]="value.html"></span> &nbsp;
+    <span [outerHTML]="value.html"></span>
 </ng-template>

frontend/app/features/content/shared/list/content-value.component.scss

@@ -1,22 +1,20 @@
-:host ::ng-deep {
+:host {
-    .html-value {
+    position: relative;
-        img {
+}
-            margin-top: -15px;
-            max-height: 50px;
-            min-height: 50px;
-            position: absolute;
-        }
 
-        img + span {
+:host ::ng-deep {
-            padding-left: 60px;
+    img {
-        }
+        max-height: 50px;
+        min-height: 50px;
+        position: absolute;
+        top: -15px;
+    }
 
-        span {
+    img + span {
-            @include truncate;
+        padding-left: 60px;
-        }
     }
-}
 
-.html-value {
+    span {
-    position: relative;
+        @include truncate;
+    }
 }

frontend/app/shared/state/contents.forms.spec.ts

@@ -422,7 +422,7 @@ describe('StringField', () => {
     it('should format to preview image', () => {
         const field2 = createField({ properties: createProperties('String', { editor: 'StockPhoto' }) });
 
-        expect(FieldFormatter.format(field2, 'https://images.unsplash.com/123?x', true)).toEqual(new HtmlValue('<img src="https://images.unsplash.com/123?x&q=80&fm=jpg&crop=entropy&cs=tinysrgb&h=50&fit=max" />'));
+        expect(FieldFormatter.format(field2, 'https://images.unsplash.com/123?x', true)).toEqual(new HtmlValue('<img src="https://images.unsplash.com/123?x&q=80&fm=jpg&crop=entropy&cs=tinysrgb&h=50&fit=max" /> &nbsp;'));
     });
 
     it('should not format to preview image when html not allowed', () => {
@@ -463,7 +463,7 @@ describe('GetContentValue', () => {
 
         const result = getContentValue(content, language, assetWithImageAndFileName);
 
-        expect(result).toEqual({ value: ['url/to/13', 'file13'], formatted: new HtmlValue('<img src="url/to/13?width=50&height=50" /> <span>file13</span>') });
+        expect(result).toEqual({ value: ['url/to/13', 'file13'], formatted: new HtmlValue('<img src="url/to/13?width=50&height=50" /> <span>file13 &nbsp;</span>') });
     });
 
     it('should resolve image url only from referenced asset', () => {
@@ -479,7 +479,7 @@ describe('GetContentValue', () => {
 
         const result = getContentValue(content, language, assetWithImage);
 
-        expect(result).toEqual({ value: ['url/to/13', 'file13'], formatted: new HtmlValue('<img src="url/to/13?width=50&height=50" />') });
+        expect(result).toEqual({ value: ['url/to/13', 'file13'], formatted: new HtmlValue('<img src="url/to/13?width=50&height=50" /> &nbsp;') });
     });
 
     it('should resolve filename only from referenced asset', () => {

frontend/app/shared/state/contents.forms.visitors.ts

@@ -55,9 +55,9 @@ export function getContentValue(content: ContentDto, language: LanguageDto, fiel
                         const previewMode = field.properties['previewMode'];
 
                         if (previewMode === 'ImageAndFileName') {
-                            formatted = new HtmlValue(`<img src="${value[0]}?width=50&height=50" /> <span>${value[1]}</span>`);
+                            formatted = new HtmlValue(`<img src="${value[0]}?width=50&height=50" /> <span>${value[1]} &nbsp;</span>`);
                         } else if (previewMode === 'Image') {
-                            formatted = new HtmlValue(`<img src="${value[0]}?width=50&height=50" />`);
+                            formatted = new HtmlValue(`<img src="${value[0]}?width=50&height=50" /> &nbsp;`);
                         } else {
                             formatted = value[1];
                         }
@@ -181,7 +181,7 @@ export class FieldFormatter implements FieldPropertiesVisitor<FieldValue> {
             const src = thumbnail(this.value, undefined, 50);
 
             if (src) {
-                return new HtmlValue(`<img src="${src}" />`);
+                return new HtmlValue(`<img src="${src}" /> &nbsp;`);
             }
         }