feat: improve image loading and displaying in gn-ui thumbnail

geonetwork · Jul 25, 2023 · 10e9abb · 10e9abb
1 parent 116e47c
commit 10e9abb
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 3 deletions.
diff --git a/libs/feature/search/src/lib/utils/mapper/elasticsearch.field.mapper.ts b/libs/feature/search/src/lib/utils/mapper/elasticsearch.field.mapper.ts
@@ -64,8 +64,8 @@ export class ElasticsearchFieldMapper {
         selectFallback(
           selectFallbackFields(
             getFirstValue(selectField(source, 'overview')),
-            'data',
-            'url'
+            'url',
+            'data'
           ),
           ''
         )

diff --git a/libs/ui/elements/src/lib/thumbnail/thumbnail.component.html b/libs/ui/elements/src/lib/thumbnail/thumbnail.component.html
@@ -10,6 +10,8 @@
     [ngClass]="objectFit === 'contain' ? 'h-4/5' : 'h-full'"
     [ngStyle]="{ objectFit: objectFit }"
     alt="thumbnail"
+    loading="lazy"
+    (load)="setObjectFit($event)"
     [src]="imgUrl | safe: 'url'"
   />
 </div>
diff --git a/libs/ui/elements/src/lib/thumbnail/thumbnail.component.ts b/libs/ui/elements/src/lib/thumbnail/thumbnail.component.ts
@@ -30,7 +30,7 @@ export class ThumbnailComponent implements AfterViewInit, OnDestroy {
     this.imgUrl = url || this.placeholderUrl
     this.isPlaceholder = !url
   }
-  @Input() fit: 'cover' | 'contain' = 'cover'
+  @Input() fit: 'cover' | 'contain' = 'contain'
   @ViewChild('imageElement') imgElement: ElementRef<HTMLImageElement>
   imgUrl: string
   placeholderUrl = this.optionalPlaceholderUrl || DEFAULT_PLACEHOLDER
@@ -65,4 +65,15 @@ export class ThumbnailComponent implements AfterViewInit, OnDestroy {
       this.changeDetector.detectChanges()
     }
   }
+
+  setObjectFit(e) {
+    if (e && e.target) {
+      if (
+        e.target.naturalWidth > e.target.parentElement.clientWidth ||
+        e.target.naturalHeight > e.target.parentElement.clientHeight
+      ) {
+        this.fit = 'cover'
+      }
+    }
+  }
 }