Updates to thumbnail and placeholder fonts

src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-issue/journal-issue-search-result-list-element.component.html

@@ -1,12 +1,23 @@
-<ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
+<div class="row">
-<ds-truncatable [id]="dso.id">
+  <div *ngIf="showThumbnails" class="col-md-2">
-    <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer"
+    <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'"
-            [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out"
+       rel="noopener noreferrer"
-            [innerHTML]="dsoTitle"></a>
+       [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out">
-    <span *ngIf="linkType == linkTypes.None"
+      <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="true">
-          class="lead item-list-title dont-break-out"
+      </ds-thumbnail>
-          [innerHTML]="dsoTitle"></span>
+    </a>
-    <span class="text-muted">
+  </div>
+  <div [ngClass]="showThumbnails ? 'col-md-10' : 'col-md-12'">
+    <ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
+    <ds-truncatable [id]="dso.id">
+      <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'"
+         rel="noopener noreferrer"
+         [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out"
+         [innerHTML]="dsoTitle"></a>
+      <span *ngIf="linkType == linkTypes.None"
+            class="lead item-list-title dont-break-out"
+            [innerHTML]="dsoTitle"></span>
+      <span class="text-muted">
     <ds-truncatable-part [id]="dso.id" [minLines]="1">
             <span *ngIf="dso.allMetadata(['publicationvolume.volumeNumber']).length > 0"
                   class="item-list-journal-issues">
@@ -22,4 +33,6 @@
             </span>
         </ds-truncatable-part>
   </span>
-</ds-truncatable>
+    </ds-truncatable>
+  </div>
+</div>

src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-issue/journal-issue-search-result-list-element.component.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { listableObjectComponent } from '../../../../../shared/object-collection/shared/listable-object/listable-object.decorator';
 import { ViewMode } from '../../../../../core/shared/view-mode.model';
 import { ItemSearchResultListElementComponent } from '../../../../../shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component';
+import { environment } from '../../../../../../environments/environment';
 
 @listableObjectComponent('JournalIssueSearchResult', ViewMode.ListElement)
 @Component({
@@ -13,4 +14,15 @@ import { ItemSearchResultListElementComponent } from '../../../../../shared/obje
  * The component for displaying a list element for an item search result of the type Journal Issue
  */
 export class JournalIssueSearchResultListElementComponent extends ItemSearchResultListElementComponent {
+
+  /**
+   * Display thumbnails if required by configuration
+   */
+  showThumbnails: boolean;
+
+  ngOnInit(): void {
+    super.ngOnInit();
+    this.showThumbnails = environment.showItemThumbnails;
+  }
+
 }

src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-volume/journal-volume-search-result-list-element.component.html

@@ -1,12 +1,23 @@
-<ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
+<div class="row">
-<ds-truncatable [id]="dso.id">
+  <div *ngIf="showThumbnails" class="col-md-2">
-    <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer"
+    <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'"
-            [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out"
+       rel="noopener noreferrer"
-            [innerHTML]="dsoTitle"></a>
+       [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out">
-    <span *ngIf="linkType == linkTypes.None"
+      <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="true">
-          class="lead item-list-title dont-break-out"
+      </ds-thumbnail>
-          [innerHTML]="dsoTitle"></span>
+    </a>
-    <span class="text-muted">
+  </div>
+  <div [ngClass]="showThumbnails ? 'col-md-10' : 'col-md-12'">
+    <ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
+    <ds-truncatable [id]="dso.id">
+      <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'"
+         rel="noopener noreferrer"
+         [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out"
+         [innerHTML]="dsoTitle"></a>
+      <span *ngIf="linkType == linkTypes.None"
+            class="lead item-list-title dont-break-out"
+            [innerHTML]="dsoTitle"></span>
+      <span class="text-muted">
     <ds-truncatable-part [id]="dso.id" [minLines]="1">
             <span *ngIf="dso.allMetadata(['journal.title']).length > 0"
                   class="item-list-journal-volumes">
@@ -22,4 +33,6 @@
             </span>
         </ds-truncatable-part>
   </span>
-</ds-truncatable>
+    </ds-truncatable>
+  </div>
+</div>

src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-volume/journal-volume-search-result-list-element.component.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { listableObjectComponent } from '../../../../../shared/object-collection/shared/listable-object/listable-object.decorator';
 import { ViewMode } from '../../../../../core/shared/view-mode.model';
 import { ItemSearchResultListElementComponent } from '../../../../../shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component';
+import { environment } from '../../../../../../environments/environment';
 
 @listableObjectComponent('JournalVolumeSearchResult', ViewMode.ListElement)
 @Component({
@@ -13,4 +14,15 @@ import { ItemSearchResultListElementComponent } from '../../../../../shared/obje
  * The component for displaying a list element for an item search result of the type Journal Volume
  */
 export class JournalVolumeSearchResultListElementComponent extends ItemSearchResultListElementComponent {
+
+  /**
+   * Display thumbnails if required by configuration
+   */
+  showThumbnails: boolean;
+
+  ngOnInit(): void {
+    super.ngOnInit();
+    this.showThumbnails = environment.showItemThumbnails;
+  }
+
 }

src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal/journal-search-result-list-element.component.html

@@ -1,12 +1,21 @@
-<ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
+<div class="row">
-<ds-truncatable [id]="dso.id">
+  <div *ngIf="showThumbnails" class="col-md-2">
     <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer"
-            [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out"
+       [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out">
-            [innerHTML]="dsoTitle"></a>
+      <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="true">
-    <span *ngIf="linkType == linkTypes.None"
+      </ds-thumbnail>
-          class="lead item-list-title dont-break-out"
+    </a>
-          [innerHTML]="dsoTitle"></span>
+  </div>
-    <span class="text-muted">
+  <div [ngClass]="showThumbnails ? 'col-md-10' : 'col-md-12'">
+    <ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
+    <ds-truncatable [id]="dso.id">
+      <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer"
+         [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out"
+         [innerHTML]="dsoTitle"></a>
+      <span *ngIf="linkType == linkTypes.None"
+            class="lead item-list-title dont-break-out"
+            [innerHTML]="dsoTitle"></span>
+      <span class="text-muted">
     <ds-truncatable-part [id]="dso.id" [minLines]="1">
             <span *ngIf="dso.allMetadata(['creativeworkseries.issn']).length > 0"
                   class="item-list-journals">
@@ -16,4 +25,6 @@
             </span>
         </ds-truncatable-part>
   </span>
-</ds-truncatable>
+    </ds-truncatable>
+  </div>
+</div>

src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal/journal-search-result-list-element.component.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { listableObjectComponent } from '../../../../../shared/object-collection/shared/listable-object/listable-object.decorator';
 import { ViewMode } from '../../../../../core/shared/view-mode.model';
 import { ItemSearchResultListElementComponent } from '../../../../../shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component';
+import { environment } from '../../../../../../environments/environment';
 
 @listableObjectComponent('JournalSearchResult', ViewMode.ListElement)
 @Component({
@@ -13,4 +14,15 @@ import { ItemSearchResultListElementComponent } from '../../../../../shared/obje
  * The component for displaying a list element for an item search result of the type Journal
  */
 export class JournalSearchResultListElementComponent extends ItemSearchResultListElementComponent {
+
+  /**
+   * Display thumbnails if required by configuration
+   */
+  showThumbnails: boolean;
+
+  ngOnInit(): void {
+    super.ngOnInit();
+    this.showThumbnails = environment.showItemThumbnails;
+  }
+
 }

src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/org-unit/org-unit-search-result-list-element.component.html

@@ -1,17 +1,29 @@
-<ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
+<div class="row">
-<ds-truncatable [id]="dso.id">
+  <div *ngIf="showThumbnails" class="col-md-2">
-    <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer"
+    <ds-thumbnail [thumbnail]="dso?.thumbnail | async"
-       [routerLink]="[itemPageRoute]" class="lead"
+                  [defaultImage]="'assets/images/orgunit-placeholder.svg'"
-       [innerHTML]="firstMetadataValue('organization.legalName')"></a>
+                  [alt]="'thumbnail.orgunit.alt'"
-    <span *ngIf="linkType == linkTypes.None"
+                  [placeholder]="'thumbnail.orgunit.placeholder'">
-          class="lead"
+    </ds-thumbnail>
-          [innerHTML]="firstMetadataValue('organization.legalName')"></span>
+  </div>
-    <span class="text-muted">
+  <div [ngClass]="showThumbnails ? 'col-md-10' : 'col-md-12'">
+    <ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
+    <ds-truncatable [id]="dso.id">
+      <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'"
+         rel="noopener noreferrer"
+         [routerLink]="[itemPageRoute]" class="lead"
+         [innerHTML]="firstMetadataValue('organization.legalName')"></a>
+      <span *ngIf="linkType == linkTypes.None"
+            class="lead"
+            [innerHTML]="firstMetadataValue('organization.legalName')"></span>
+      <span class="text-muted">
       <span *ngIf="dso.allMetadata(['dc.description']).length > 0"
             class="item-list-org-unit-description">
             <ds-truncatable-part [id]="dso.id" [minLines]="3"><span
-                  [innerHTML]="firstMetadataValue('dc.description')"></span>
+              [innerHTML]="firstMetadataValue('dc.description')"></span>
             </ds-truncatable-part>
       </span>
   </span>
-</ds-truncatable>
+    </ds-truncatable>
+  </div>
+</div>

src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/org-unit/org-unit-search-result-list-element.component.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { ViewMode } from '../../../../../core/shared/view-mode.model';
 import { listableObjectComponent } from '../../../../../shared/object-collection/shared/listable-object/listable-object.decorator';
 import { ItemSearchResultListElementComponent } from '../../../../../shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component';
+import { environment } from '../../../../../../environments/environment';
 
 @listableObjectComponent('OrgUnitSearchResult', ViewMode.ListElement)
 @Component({
@@ -13,4 +14,15 @@ import { ItemSearchResultListElementComponent } from '../../../../../shared/obje
  * The component for displaying a list element for an item search result of the type Organisation Unit
  */
 export class OrgUnitSearchResultListElementComponent extends ItemSearchResultListElementComponent {
+
+  /**
+   * Display thumbnail if required by configuration
+   */
+  showThumbnails: boolean;
+
+  ngOnInit(): void {
+    super.ngOnInit();
+    this.showThumbnails = environment.showItemThumbnails;
+  }
+
 }

src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/person/person-search-result-list-element.component.html

@@ -1,12 +1,22 @@
-<ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
+<div class="row">
-<ds-truncatable [id]="dso.id">
+  <div *ngIf="showThumbnails" class="col-md-2">
-    <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer"
+    <ds-thumbnail [thumbnail]="dso?.thumbnail | async"
-       [routerLink]="[itemPageRoute]" class="lead"
+                  [defaultImage]="'assets/images/person-placeholder.svg'"
-       [innerHTML]="name"></a>
+                  [alt]="'thumbnail.person.alt'"
-    <span *ngIf="linkType == linkTypes.None"
+                  [placeholder]="'thumbnail.person.placeholder'">
-          class="lead"
+    </ds-thumbnail>
-          [innerHTML]="name"></span>
+  </div>
-    <span class="text-muted">
+  <div [ngClass]="showThumbnails ? 'col-md-10' : 'col-md-12'">
+    <ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
+    <ds-truncatable [id]="dso.id">
+      <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'"
+         rel="noopener noreferrer"
+         [routerLink]="[itemPageRoute]" class="lead"
+         [innerHTML]="name"></a>
+      <span *ngIf="linkType == linkTypes.None"
+            class="lead"
+            [innerHTML]="name"></span>
+      <span class="text-muted">
     <ds-truncatable-part [id]="dso.id" [minLines]="1">
             <span *ngIf="dso.allMetadata(['person.jobTitle']).length > 0"
                   class="item-list-job-title">
@@ -16,4 +26,7 @@
             </span>
         </ds-truncatable-part>
   </span>
-</ds-truncatable>
+    </ds-truncatable>
+  </div>
+</div>
+

src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/person/person-search-result-list-element.component.ts

@@ -8,6 +8,7 @@ import {
 } from '../../../../../shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component';
 import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
 import { DSONameService } from '../../../../../core/breadcrumbs/dso-name.service';
+import { environment } from '../../../../../../environments/environment';
 
 @listableObjectComponent('PersonSearchResult', ViewMode.ListElement)
 @Component({
@@ -24,6 +25,16 @@ export class PersonSearchResultListElementComponent extends ItemSearchResultList
     super(truncatableService, dsoNameService);
   }
 
+  /**
+   * Display thumbnail if required by configuration
+   */
+  showThumbnails: boolean;
+
+  ngOnInit(): void {
+    super.ngOnInit();
+    this.showThumbnails = environment.showItemThumbnails;
+  }
+
   /**
    * Return the person name
    */

src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/project/project-search-result-list-element.component.html

@@ -1,19 +1,31 @@
-<ds-truncatable [id]="dso.id">
+<div class="row">
-    <ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
+  <div *ngIf="showThumbnails" class="col-md-2">
-    <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer"
+    <ds-thumbnail [thumbnail]="dso?.thumbnail | async"
-       [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out"
+                  [defaultImage]="'assets/images/project-placeholder.svg'"
-       [innerHTML]="dsoTitle"></a>
+                  [alt]="'thumbnail.project.alt'"
-    <span *ngIf="linkType == linkTypes.None"
+                  [placeholder]="'thumbnail.project.placeholder'">
-          class="lead item-list-title dont-break-out"
+    </ds-thumbnail>
-          [innerHTML]="dsoTitle"></span>
+  </div>
-    <!--<span class="text-muted">-->
+  <div [ngClass]="showThumbnails ? 'col-md-10' : 'col-md-12'">
-    <!--<ds-truncatable-part [id]="dso.id" [minLines]="1">-->
+    <ds-truncatable [id]="dso.id">
-    <!--<span *ngIf="dso.allMetadata(['project.identifier.status']).length > 0"-->
+      <ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
-    <!--class="item-list-status">-->
+      <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'"
-    <!--<span *ngFor="let value of allMetadataValues(['project.identifier.status']); let last=last;">-->
+         rel="noopener noreferrer"
-    <!--<span [innerHTML]="value"><span [innerHTML]="value"></span></span>-->
+         [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out"
-    <!--</span>-->
+         [innerHTML]="dsoTitle"></a>
-    <!--</span>-->
+      <span *ngIf="linkType == linkTypes.None"
-    <!--</ds-truncatable-part>-->
+            class="lead item-list-title dont-break-out"
-    <!--</span>-->
+            [innerHTML]="dsoTitle"></span>
-</ds-truncatable>
+      <!--<span class="text-muted">-->
+      <!--<ds-truncatable-part [id]="dso.id" [minLines]="1">-->
+      <!--<span *ngIf="dso.allMetadata(['project.identifier.status']).length > 0"-->
+      <!--class="item-list-status">-->
+      <!--<span *ngFor="let value of allMetadataValues(['project.identifier.status']); let last=last;">-->
+      <!--<span [innerHTML]="value"><span [innerHTML]="value"></span></span>-->
+      <!--</span>-->
+      <!--</span>-->
+      <!--</ds-truncatable-part>-->
+      <!--</span>-->
+    </ds-truncatable>
+  </div>
+</div>

src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/project/project-search-result-list-element.component.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { listableObjectComponent } from '../../../../../shared/object-collection/shared/listable-object/listable-object.decorator';
 import { ViewMode } from '../../../../../core/shared/view-mode.model';
 import { ItemSearchResultListElementComponent } from '../../../../../shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component';
+import { environment } from '../../../../../../environments/environment';
 
 @listableObjectComponent('ProjectSearchResult', ViewMode.ListElement)
 @Component({
@@ -13,4 +14,15 @@ import { ItemSearchResultListElementComponent } from '../../../../../shared/obje
  * The component for displaying a list element for an item search result of the type Project
  */
 export class ProjectSearchResultListElementComponent extends ItemSearchResultListElementComponent {
+
+  /**
+   * Display thumbnail if required by configuration
+   */
+  showThumbnails: boolean;
+
+  ngOnInit(): void {
+    super.ngOnInit();
+    this.showThumbnails = environment.showItemThumbnails;
+  }
+
 }

src/app/shared/object-collection/object-collection.component.html

@@ -1,4 +1,4 @@
-<ds-object-list [config]="config"
+<ds-object-list [ngClass]="placeholderFontClass" #objectList [config]="config"
                 [sortConfig]="sortConfig"
                 [objects]="objects"
                 [hasBorder]="hasBorder"

src/app/shared/object-collection/object-collection.component.scss

@@ -0,0 +1,5 @@
+:host {
+  display:block;
+}
+
+

src/app/shared/object-collection/object-collection.component.ts

@@ -1,4 +1,11 @@
-import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import {
+  ChangeDetectorRef,
+  Component, ElementRef,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+} from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 
 import { Observable } from 'rxjs';
@@ -147,6 +154,12 @@ export class ObjectCollectionComponent implements OnInit {
    */
   viewModeEnum = ViewMode;
 
+  /**
+   * Placeholder class (defined in global-styles)
+   */
+  placeholderFontClass: string;
+
+
   ngOnInit(): void {
     this.currentMode$ = this.route
       .queryParams
@@ -154,6 +167,7 @@ export class ObjectCollectionComponent implements OnInit {
         map((params) => isEmpty(params?.view) ? ViewMode.ListElement : params.view),
         distinctUntilChanged()
       );
+    this.setPlaceHolderFontSize();
   }
 
   /**
@@ -167,7 +181,8 @@ export class ObjectCollectionComponent implements OnInit {
   constructor(
     private cdRef: ChangeDetectorRef,
     private route: ActivatedRoute,
-    private router: Router) {
+    private router: Router,
+    private elementRef: ElementRef) {
   }
 
   /**
@@ -221,4 +236,19 @@ export class ObjectCollectionComponent implements OnInit {
       this.next.emit(true);
   }
 
+  /**
+   * Sets the class to be used for the "no thumbnail"
+   * placeholder font size.
+   */
+  setPlaceHolderFontSize() {
+    const width = this.elementRef.nativeElement.offsetWidth;
+    if (width < 750) {
+      this.placeholderFontClass = "thumb-font-1";
+    } else if (width < 1000) {
+      this.placeholderFontClass = "thumb-font-2";
+    } else {
+      this.placeholderFontClass = "thumb-font-3";
+    }
+  }
+
 }

src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.html

@@ -1,4 +1,9 @@
-<ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
+<div class="row">
-<a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="['/collections/' + dso.id]" class="lead" [innerHTML]="dsoTitle"></a>
+  <div *ngIf="showThumbnails" class="offset-md-2"></div>
-<span *ngIf="linkType == linkTypes.None" class="lead" [innerHTML]="dsoTitle"></span>
+  <div [ngClass]="showThumbnails ? 'col-md-10' : 'col-md-12'">
-<div *ngIf="dso.shortDescription" class="text-muted abstract-text" [innerHTML]="firstMetadataValue('dc.description.abstract')"></div>
+    <ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
+    <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="['/collections/' + dso.id]" class="lead" [innerHTML]="dsoTitle"></a>
+    <span *ngIf="linkType == linkTypes.None" class="lead" [innerHTML]="dsoTitle"></span>
+    <div *ngIf="dso.shortDescription" class="text-muted abstract-text" [innerHTML]="firstMetadataValue('dc.description.abstract')"></div>
+  </div>
+</div>

src/app/shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component.ts

@@ -4,6 +4,7 @@ import { Collection } from '../../../../core/shared/collection.model';
 import { CollectionSearchResult } from '../../../object-collection/shared/collection-search-result.model';
 import { ViewMode } from '../../../../core/shared/view-mode.model';
 import { listableObjectComponent } from '../../../object-collection/shared/listable-object/listable-object.decorator';
+import { environment } from '../../../../../environments/environment';
 
 @Component({
   selector: 'ds-collection-search-result-list-element',
@@ -14,4 +15,16 @@ import { listableObjectComponent } from '../../../object-collection/shared/lista
  * Component representing a collection search result in list view
  */
 @listableObjectComponent(CollectionSearchResult, ViewMode.ListElement)
-export class CollectionSearchResultListElementComponent extends SearchResultListElementComponent<CollectionSearchResult, Collection> {}
+export class CollectionSearchResultListElementComponent extends SearchResultListElementComponent<CollectionSearchResult, Collection> {
+
+  /**
+   * Display thumbnails if required by configuration
+   */
+  showThumbnails: boolean;
+
+  ngOnInit(): void {
+    super.ngOnInit();
+    this.showThumbnails = environment.showItemThumbnails;
+  }
+
+}

src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.html

@@ -1,4 +1,9 @@
-<ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
+<div class="row">
-<a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer"  [routerLink]="['/communities/' + dso.id]" class="lead" [innerHTML]="dsoTitle"></a>
+  <div *ngIf="showThumbnails" class="offset-md-2"></div>
-<span *ngIf="linkType == linkTypes.None" class="lead" [innerHTML]="dsoTitle"></span>
+  <div [ngClass]="showThumbnails ? 'col-md-10' : 'col-md-12'">
-<div *ngIf="dso.shortDescription" class="text-muted abstract-text" [innerHTML]="firstMetadataValue('dc.description.abstract')"></div>
+    <ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
+    <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer"  [routerLink]="['/communities/' + dso.id]" class="lead" [innerHTML]="dsoTitle"></a>
+    <span *ngIf="linkType == linkTypes.None" class="lead" [innerHTML]="dsoTitle"></span>
+    <div *ngIf="dso.shortDescription" class="text-muted abstract-text" [innerHTML]="firstMetadataValue('dc.description.abstract')"></div>
+  </div>
+</div>

src/app/shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component.ts

@@ -4,6 +4,7 @@ import { Community } from '../../../../core/shared/community.model';
 import { CommunitySearchResult } from '../../../object-collection/shared/community-search-result.model';
 import { ViewMode } from '../../../../core/shared/view-mode.model';
 import { listableObjectComponent } from '../../../object-collection/shared/listable-object/listable-object.decorator';
+import { environment } from '../../../../../environments/environment';
 
 @Component({
   selector: 'ds-community-search-result-list-element',
@@ -15,5 +16,14 @@ import { listableObjectComponent } from '../../../object-collection/shared/lista
  */
 @listableObjectComponent(CommunitySearchResult, ViewMode.ListElement)
 export class CommunitySearchResultListElementComponent extends SearchResultListElementComponent<CommunitySearchResult, Community> {
+  /**
+   * Display thumbnails if required by configuration
+   */
+  showThumbnails: boolean;
 
+
+  ngOnInit(): void {
+    super.ngOnInit();
+    this.showThumbnails = environment.showItemThumbnails;
+  }
 }

src/app/shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component.html

@@ -1,6 +1,6 @@
 <div class="row">
-  <div class="col-md-2">
+  <div *ngIf="showThumbnails" class="col-md-2">
-    <a *ngIf="linkType != linkTypes.None && showThumbnails" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer"
+    <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer"
        [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out">
     <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="true">
     </ds-thumbnail>

src/app/thumbnail/thumbnail.component.html

@@ -7,7 +7,7 @@
          [src]="src | dsSafeUrl" [alt]="alt | translate" (error)="errorHandler()">
     <div *ngIf="src === null" class="thumbnail-content outer">
       <div class="inner">
-        <div class="thumbnail-placeholder w-100 h-100 p-3 lead">{{ placeholder | translate }}</div>
+        <div class="thumbnail-placeholder w-100 h-100 lead">{{ placeholder | translate }}</div>
       </div>
     </div>
   </ng-template>

src/app/thumbnail/thumbnail.component.ts

@@ -14,6 +14,7 @@ import { RemoteData } from '../core/data/remote-data';
   templateUrl: './thumbnail.component.html',
 })
 export class ThumbnailComponent implements OnChanges {
+
   /**
    * The thumbnail Bitstream
    */
@@ -90,4 +91,5 @@ export class ThumbnailComponent implements OnChanges {
       this.src = null;
     }
   }
+
 }

src/styles/_global-styles.scss

@@ -138,3 +138,22 @@ ds-dynamic-form-control-container.d-none {
 .btn-dark {
   background-color: var(--ds-admin-sidebar-bg);
 }
+/* The font sizes used in "no thumbnail" placeholder */
+.thumb-font-1 {
+  .thumbnail-placeholder {
+    font-size: 0.7rem !important;
+    visibility: inherit;
+  }
+}
+.thumb-font-2 {
+  .thumbnail-placeholder {
+    font-size: 0.9rem !important;
+    visibility: inherit;
+  }
+}
+.thumb-font-3 {
+  .thumbnail-placeholder {
+    font-size: 1.25rem !important;
+    visibility: inherit;
+  }
+}