Webp fix

research-hub-web/src/app/components/activities-page/activities-page.component.html

@@ -1,45 +1,45 @@
 <div id="research-activities">
-    <h2>{{ title }}</h2>
-    <p>{{ description }}</p>
-    <div [ngClass]="'main-underline'"></div>
+  <h2>{{ title }}</h2>
+  <p>{{ description }}</p>
+  <div [ngClass]="'main-underline'"></div>
 </div>
 
 <div *ngIf="allStages$ | async as allStages">
-
   <!-- Research Acitivities Container -->
   <div class="research-activity-container">
-
     <!-- Research Activities Content -->
     <div fxLayout="column" fxLayoutGap="8px" class="research-activity-content">
       <div *ngFor="let item of allStages.items">
-
         <!-- Panel Container -->
         <div class="outer-panel" fxLayout="row">
-
           <!-- Panel Button -->
           <div class="inner-panel">
             <div>
-              <a routerLink="/search"
-              [queryParams]="
-                searchService.generateQueryParams('', {
-                  category: [],
-                  stage: [item.sys.id],
-                  relatedOrgs: []
-                })
-              ">
-              <h3>{{ item.name }}</h3>
-              <p>{{ item.description }}</p>
+              <a
+                routerLink="/search"
+                [queryParams]="
+                  searchService.generateQueryParams('', {
+                    category: [],
+                    stage: [item.sys.id],
+                    relatedOrgs: []
+                  })
+                "
+              >
+                <h3>{{ item.name }}</h3>
+                <p>{{ item.description }}</p>
               </a>
-
             </div>
           </div>
 
           <!-- Panel Image -->
           <div fxHide.lt-md class="research-category-img">
-              <img srcset="{{ item.image?.url }}?w=1000&fm=webp,
-                            {{ item.image?.url }}?w=1000"
-                    src="{{ item.image?.url }}?w=1000"
-                    alt="{{ item.name }}">
+            <picture>
+              <source
+                srcset="{{ item.image?.url }}?w=1000&fm=webp"
+                type="image/webp"
+              />
+              <img src="{{ item.image?.url }}?w=1000" alt="{{ item.name }}" />
+            </picture>
           </div>
         </div>
       </div>

research-hub-web/src/app/components/shared/body-media/body-media.component.html

@@ -6,9 +6,10 @@
             <ng-template #image>
                 <div class="embedded-asset-block section-2" ngClass.xs="embedded-asset-block-mobile">
                     <a href="{{ contentItem.url }}">
-                        <img *ngIf="contentItem.url" srcset="{{ contentItem.url }}?w=1500&fm=webp,
-                                     {{ contentItem.url }}?w=1500" src="{{ contentItem.url }}?w=1500"
-                            alt="{{ contentItem.title }}" />
+                        <picture *ngIf="contentItem.url">
+                            <source srcset="{{ contentItem.url }}?w=1500&fm=webp" type="image/webp">
+                            <img src="{{ contentItem.url }}?w=1500" alt="{{ contentItem.title }}" />
+                        </picture>
                     </a><br>{{ contentItem.title }}
                     <small class="asset-summary" *ngIf="contentItem.description">&nbsp;—&nbsp;{{ contentItem.description
                         }}</small>

research-hub-web/src/app/components/shared/cards/cards.component.html

@@ -11,11 +11,10 @@ <h3 *ngIf="title">{{ title }}
 
       <!-- Templates -->
       <ng-template #image>
-        <img mat-card-image
-              srcset="{{ content.banner?.url }}?w=1000&fm=webp,
-                      {{ content.banner?.url }}?w=1000"
-              src="{{ content.banner?.url }}?w=1000"
-              alt="{{ content.title }}-banner">
+        <picture>
+          <source srcset="{{ content.banner?.url }}?w=1000&fm=webp" type="image/webp">
+          <img mat-card-image src="{{ content.banner?.url }}?w=1000" alt="{{ content.title }}">
+        </picture>
       </ng-template>
       <ng-template #noImage>
         <div style="margin-top: 12px;"></div>

research-hub-web/src/styles.scss

@@ -44,7 +44,7 @@ hr {
   }
   ul li {
     position: relative;
-    line-height:30px;
+    line-height: 30px;
     padding-left: 1em;
     list-style-type: disc;
     p {
@@ -388,3 +388,17 @@ h2.maori-proverb {
     }
   }
 }
+
+/**
+ * Fix picture tag on mat card top margin globally
+ * mat-card currently doesn't handle picture tags very nicely.
+ * By default, mat-card applied a style to an img element to remove top-margin.
+ * The style doesn't get applied automatically for img within picture so we apply it globally here.
+ * https://github.com/angular/components/blob/6e1f522d6a50d6f589d069775bc771b5590bff4c/src/material/card/card.scss#L191
+ * I created a bug report here https://github.com/angular/components/issues/23649
+ */
+mat-card picture:first-child img.mat-card-image {
+  margin-top: -16px;
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+}