Add configuration for logo's max size in communities and collections

config/config.example.yml

@@ -75,7 +75,7 @@ cache:
     anonymousCache:
       # Maximum number of pages to cache. Default is zero (0) which means anonymous user cache is disabled.
       # As all pages are cached in server memory, increasing this value will increase memory needs.
-      # Individual cached pages are usually small (<100KB), so a value of max=1000 would only require ~100MB of memory. 
+      # Individual cached pages are usually small (<100KB), so a value of max=1000 would only require ~100MB of memory.
       max: 0
       # Amount of time after which cached pages are considered stale (in ms). After becoming stale, the cached
       # copy is automatically refreshed on the next request.
@@ -382,7 +382,13 @@ vocabularies:
     vocabulary: 'srsc'
     enabled: true
 
-# Default collection/community sorting order at Advanced search, Create/update community and collection when there are not a query. 
+# Default collection/community sorting order at Advanced search, Create/update community and collection when there are not a query.
 comcolSelectionSort:
   sortField: 'dc.title'
   sortDirection: 'ASC'
+
+layout:
+  logo:
+    # Change the values of those lines to set the size constraint for the logo
+    imageWidthConstraint: 500
+    imageHeightConstraint: 500

src/app/collection-page/collection-page.component.html

@@ -11,9 +11,10 @@
                           [name]="dsoNameService.getName(collection)">
                   </ds-comcol-page-header>
                   <!-- Collection logo -->
-                  <ds-comcol-page-logo *ngIf="logoRD$"
-                                   [logo]="(logoRD$ | async)?.payload"
-                                   [alternateText]="'Collection Logo'">
+                  <ds-comcol-page-logo *ngIf="logoRD$" [logo]="(logoRD$ | async)?.payload"
+                                       [alternateText]="'Community Logo'"
+                                       [imageWidthConstraint]="environment.layout.logo.imageWidthConstraint"
+                                       [imageHeightConstraint]="environment.layout.logo.imageHeightConstraint">
                   </ds-comcol-page-logo>
 
                   <!-- Handle -->

src/app/collection-page/collection-page.component.ts

@@ -31,6 +31,8 @@ import { redirectOn4xx } from '../core/shared/authorized.operators';
 import { BROWSE_LINKS_TO_FOLLOW } from '../core/browse/browse.service';
 import { DSONameService } from '../core/breadcrumbs/dso-name.service';
 import { APP_CONFIG, AppConfig } from '../../../src/config/app-config.interface';
+import { environment } from '../../environments/environment';
+
 
 @Component({
   selector: 'ds-collection-page',
@@ -63,6 +65,9 @@ export class CollectionPageComponent implements OnInit {
    */
   collectionPageRoute$: Observable<string>;
 
+  public readonly environment = environment;
+
+
   constructor(
     private collectionDataService: CollectionDataService,
     private searchService: SearchService,

src/app/community-page/community-page.component.html

@@ -7,7 +7,10 @@
           <!-- Community name -->
           <ds-comcol-page-header [name]="dsoNameService.getName(communityPayload)"></ds-comcol-page-header>
           <!-- Community logo -->
-          <ds-comcol-page-logo *ngIf="logoRD$" [logo]="(logoRD$ | async)?.payload" [alternateText]="'Community Logo'">
+          <ds-comcol-page-logo *ngIf="logoRD$" [logo]="(logoRD$ | async)?.payload"
+                               [alternateText]="'Community Logo'"
+                               [imageWidthConstraint]="environment.layout.logo.imageWidthConstraint"
+                               [imageHeightConstraint]="environment.layout.logo.imageHeightConstraint">
           </ds-comcol-page-logo>
           <!-- Handle -->
           <ds-themed-comcol-page-handle [content]="communityPayload.handle" [title]="'community.page.handle'">

src/app/community-page/community-page.component.ts

@@ -20,6 +20,7 @@ import { FeatureID } from '../core/data/feature-authorization/feature-id';
 import { getCommunityPageRoute } from './community-page-routing-paths';
 import { redirectOn4xx } from '../core/shared/authorized.operators';
 import { DSONameService } from '../core/breadcrumbs/dso-name.service';
+import {environment} from '../../environments/environment';
 
 @Component({
   selector: 'ds-community-page',
@@ -52,6 +53,9 @@ export class CommunityPageComponent implements OnInit {
    */
   communityPageRoute$: Observable<string>;
 
+  public readonly environment = environment;
+
+
   constructor(
     private communityDataService: CommunityDataService,
     private metadata: MetadataService,

src/app/shared/comcol/comcol-forms/comcol-form/comcol-form.component.ts

@@ -22,6 +22,7 @@ import { UploaderComponent } from '../../../upload/uploader/uploader.component';
 import { Operation } from 'fast-json-patch';
 import { NoContent } from '../../../../core/shared/NoContent.model';
 import { getFirstCompletedRemoteData } from '../../../../core/shared/operators';
+import { environment } from '../../../../../environments/environment';
 
 /**
  * A form for creating and editing Communities or Collections
@@ -118,6 +119,11 @@ export class ComColFormComponent<T extends Collection | Community> implements On
    */
   protected dsoService: ComColDataService<Community | Collection>;
 
+  /**
+   * The service used to fetch the config from the environment
+   */
+  public readonly environment = environment;
+
   public constructor(protected formService: DynamicFormService,
                      protected translate: TranslateService,
                      protected notificationsService: NotificationsService,

src/app/shared/comcol/comcol-page-logo/comcol-page-logo.component.html

@@ -1,3 +1,6 @@
 <div *ngIf="logo" class="dso-logo mb-3">
-    <img [src]="logo._links.content.href" class="img-fluid" [attr.alt]="alternateText ? alternateText : null" (error)="errorHandler($event)"/>
+  <img [src]="logo._links.content.href" class="img-fluid"
+       [attr.alt]="alternateText ? alternateText : null"
+       (error)="errorHandler($event)"
+       [ngStyle]="{'max-width.px': imageWidthConstraint, 'max-height.px': imageHeightConstraint}" />
 </div>

src/app/shared/comcol/comcol-page-logo/comcol-page-logo.component.ts

@@ -12,6 +12,9 @@
 
   @Input() alternateText: string;
 
+  @Input() imageWidthConstraint = 200;
+  @Input() imageHeightConstraint = 200;
+
   /**
    * The default 'holder.js' image
    */

src/config/app-config.interface.ts

@@ -23,6 +23,7 @@ import { MarkdownConfig } from './markdown-config.interface';
 import { FilterVocabularyConfig } from './filter-vocabulary-config';
 import { DiscoverySortConfig } from './discovery-sort.config';
 import {QualityAssuranceConfig} from './quality-assurance.config';
+import { LayoutConfig } from './layout-config.interfaces';
 
 interface AppConfig extends Config {
   ui: UIServerConfig;
@@ -50,6 +51,7 @@ interface AppConfig extends Config {
   vocabularies: FilterVocabularyConfig[];
   comcolSelectionSort: DiscoverySortConfig;
   qualityAssuranceConfig: QualityAssuranceConfig;
+  layout: LayoutConfig;
 }
 
 /**

src/config/default-app-config.ts

@@ -23,6 +23,7 @@ import { MarkdownConfig } from './markdown-config.interface';
 import { FilterVocabularyConfig } from './filter-vocabulary-config';
 import { DiscoverySortConfig } from './discovery-sort.config';
 import {QualityAssuranceConfig} from './quality-assurance.config';
+import { LayoutConfig } from './layout-config.interfaces';
 
 export class DefaultAppConfig implements AppConfig {
   production = false;
@@ -442,4 +443,13 @@ export class DefaultAppConfig implements AppConfig {
     },
     pageSize: 5,
   };
+
+  layout: LayoutConfig = {
+    logo: {
+      // Change the values of those lines to set the size constraint for the logo
+      imageWidthConstraint: 500,
+      imageHeightConstraint: 500
+    },
+  };
+
 }

src/config/layout-config.interfaces.ts

@@ -0,0 +1,9 @@
+import { Config } from './config.interface';
+
+export interface LayoutConfig extends Config {
+  logo: LogoLayoutConfig;
+}
+export interface LogoLayoutConfig{
+  imageWidthConstraint: number
+  imageHeightConstraint: number
+}

src/environments/environment.test.ts

@@ -319,5 +319,13 @@ export const environment: BuildConfig = {
       vocabulary: 'srsc',
       enabled: true
     }
-  ]
+  ],
+
+  layout: {
+    logo: {
+      // Change the values of those lines to set the size constraint for the logo
+      imageWidthConstraint: 500,
+      imageHeightConstraint: 500
+    }
+  },
 };