feat(openchallenges): improve the quality of the team members' avatars (

#2312) * make member avatar square * test * update images * update v's photo * request higher size for member photos * Small refactor of team page images * Cleanup code --------- Co-authored-by: Thomas Schaffter <[email protected]>
Sage-Bionetworks · Nov 4, 2023 · 983b8af · 983b8af
1 parent 169afad
commit 983b8af
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 37 deletions.
diff --git a/apps/openchallenges/thumbor/.env.example b/apps/openchallenges/thumbor/.env.example
@@ -19,7 +19,7 @@ RESULT_STORAGE_EXPIRATION_SECONDS=2629746
 
 SECURITY_KEY=changeme
 ALLOW_UNSAFE_URL=True
-QUALITY=80
+QUALITY=100
 MAX_AGE=86400
 AUTO_PNG_TO_JPG=True
 HTTP_LOADER_VALIDATE_CERTS=False
diff --git a/libs/openchallenges/team/src/lib/team.component.html b/libs/openchallenges/team/src/lib/team.component.html
@@ -9,11 +9,11 @@ <h2>Meet Our Team</h2>
     <p class="mat-body-strong">
       OpenChallenges is made by a team of engineers and scientists at Sage Bionetworks.
     </p>
-    <img height="80px" [src]="(sage$ | async)?.url" alt="Sage Bionetworks" />
+    <img height="80px" [src]="(sageLogo$ | async)?.url" alt="Sage Bionetworks" />
   </div>
   <div class="member-group">
     <div class="member-card">
-      <img class="member-pic" [src]="(thomas$ | async)?.url" alt="Thomas Schaffter" />
+      <img class="member-pic" [src]="(thomasAvatar$ | async)?.url" alt="Thomas Schaffter" />
       <h3 class="card-name">Thomas Schaffter</h3>
       <p class="card-roles">Product owner, Architect, Lead full-stack engineer</p>
       <div>
@@ -26,7 +26,7 @@ <h3 class="card-name">Thomas Schaffter</h3>
       </div>
     </div>
     <div class="member-card">
-      <img class="member-pic" [src]="(verena$ | async)?.url" alt="Verena Chung" />
+      <img class="member-pic" [src]="(verenaAvatar$ | async)?.url" alt="Verena Chung" />
       <h3 class="card-name">Verena Chung</h3>
       <p class="card-roles">Frontend engineer</p>
       <div>
@@ -39,7 +39,7 @@ <h3 class="card-name">Verena Chung</h3>
       </div>
     </div>
     <div class="member-card">
-      <img class="member-pic" [src]="(rong$ | async)?.url" alt="Rong Chai" />
+      <img class="member-pic" [src]="(rongAvatar$ | async)?.url" alt="Rong Chai" />
       <h3 class="card-name">Rong Chai</h3>
       <p class="card-roles">Full-stack engineer</p>
       <div>
@@ -54,7 +54,7 @@ <h3 class="card-name">Rong Chai</h3>
   </div>
   <div class="member-group">
     <div class="member-card">
-      <img class="member-pic" [src]="(maria$ | async)?.url" alt="Maria Diaz" />
+      <img class="member-pic" [src]="(mariaAvatar$ | async)?.url" alt="Maria Diaz" />
       <h3 class="card-name">Maria Diaz</h3>
       <p class="card-roles">Backend engineer</p>
       <div>
@@ -64,7 +64,7 @@ <h3 class="card-name">Maria Diaz</h3>
       </div>
     </div>
     <div class="member-card">
-      <img class="member-pic" [src]="(gaia$ | async)?.url" alt="Gaia Andreoletti" />
+      <img class="member-pic" [src]="(gaiaAvatar$ | async)?.url" alt="Gaia Andreoletti" />
       <h3 class="card-name">Gaia Andreoletti</h3>
       <p class="card-roles">Research scientist</p>
       <div>
@@ -80,7 +80,7 @@ <h3 class="card-name">Gaia Andreoletti</h3>
       </div>
     </div>
     <div class="member-card">
-      <img class="member-pic" [src]="(jake$ | async)?.url" alt="Jake Albrecht" />
+      <img class="member-pic" [src]="(jakeAvatar$ | async)?.url" alt="Jake Albrecht" />
       <h3 class="card-name">Jake Albrecht</h3>
       <p class="card-roles">Director</p>
       <div>

diff --git a/libs/openchallenges/team/src/lib/team.component.scss b/libs/openchallenges/team/src/lib/team.component.scss
@@ -19,8 +19,9 @@
   align-items: center;
 }
 .member-pic {
+  width: 240px;
   height: 240px;
-  padding: 12px 0 22px;
+  margin: 12px 0 22px;
   -moz-border-radius: 50%;
   -webkit-border-radius: 505;
   border-radius: 50%;

diff --git a/libs/openchallenges/team/src/lib/team.component.ts b/libs/openchallenges/team/src/lib/team.component.ts
@@ -3,6 +3,8 @@ import { Component, OnInit, Renderer2 } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import {
   Image,
+  ImageAspectRatio,
+  ImageHeight,
   ImageService,
 } from '@sagebionetworks/openchallenges/api-client-angular';
 import { ConfigService } from '@sagebionetworks/openchallenges/config';
@@ -24,14 +26,19 @@ export class TeamComponent implements OnInit {
   public privacyPolicyUrl: string;
   public termsOfUseUrl: string;
   public apiDocsUrl: string;
-  public logo$: Observable<Image> | undefined;
-  public thomas$: Observable<Image> | undefined;
-  public rong$: Observable<Image> | undefined;
-  public verena$: Observable<Image> | undefined;
-  public maria$: Observable<Image> | undefined;
-  public gaia$: Observable<Image> | undefined;
-  public jake$: Observable<Image> | undefined;
-  public sage$: Observable<Image> | undefined;
+
+  public avatarImageHeight: ImageHeight = ImageHeight._500px;
+  public avatarImageAspectRatio: ImageAspectRatio = ImageAspectRatio._11;
+
+  public ocLogo$: Observable<Image> | undefined;
+  public sageLogo$: Observable<Image> | undefined;
+
+  public thomasAvatar$: Observable<Image> | undefined;
+  public rongAvatar$: Observable<Image> | undefined;
+  public verenaAvatar$: Observable<Image> | undefined;
+  public mariaAvatar$: Observable<Image> | undefined;
+  public gaiaAvatar$: Observable<Image> | undefined;
+  public jakeAvatar$: Observable<Image> | undefined;
 
   constructor(
     private readonly configService: ConfigService,
@@ -48,29 +55,26 @@ export class TeamComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.logo$ = this.imageService.getImage({
+    this.ocLogo$ = this.imageService.getImage({
       objectKey: 'openchallenges-icon.svg',
     });
-    this.thomas$ = this.imageService.getImage({
-      objectKey: 'team/thomas.png',
-    });
-    this.rong$ = this.imageService.getImage({
-      objectKey: 'team/rong.png',
-    });
-    this.verena$ = this.imageService.getImage({
-      objectKey: 'team/verena.png',
-    });
-    this.maria$ = this.imageService.getImage({
-      objectKey: 'team/maria.png',
-    });
-    this.gaia$ = this.imageService.getImage({
-      objectKey: 'team/gaia.jpg',
-    });
-    this.jake$ = this.imageService.getImage({
-      objectKey: 'team/jake.png',
-    });
-    this.sage$ = this.imageService.getImage({
+    this.sageLogo$ = this.imageService.getImage({
       objectKey: 'logo/sage-bionetworks-alt.svg',
     });
+
+    this.thomasAvatar$ = this.getAvatarImage('team/thomas_schaffter_v3.jpg');
+    this.verenaAvatar$ = this.getAvatarImage('team/verena_chung.jpg');
+    this.rongAvatar$ = this.getAvatarImage('team/rong_chai.jpg');
+    this.mariaAvatar$ = this.getAvatarImage('team/maria.png');
+    this.gaiaAvatar$ = this.getAvatarImage('team/gaia_andreoletti.jpg');
+    this.jakeAvatar$ = this.getAvatarImage('team/jake_albrecht.jpg');
+  }
+
+  private getAvatarImage(objectKey: string): Observable<Image> {
+    return this.imageService.getImage({
+      objectKey,
+      height: ImageHeight._500px,
+      aspectRatio: ImageAspectRatio._11,
+    });
   }
 }