feat: use school-neutral news image fallback via css

src/app/modules/news/page/news-item.html

@@ -1,11 +1,17 @@
 <ion-card>
 <span *ngIf="item.url; else imageNoUrl">
   <a href="{{item.url}}">
-    <img src="{{item.image}}" onError="this.src='../../assets/imgs/modules/news/placeholder.jpg';" />
+    <ion-thumbnail>
+      <img src="{{item.image}}" onerror="this.style.display = 'none'" />
+      <ion-icon name="newspaper-outline"></ion-icon>
+    </ion-thumbnail>
   </a>
 </span>
   <ng-template #imageNoUrl>
-    <img src="{{item.image}}" onError="this.src='../../assets/imgs/modules/news/placeholder.jpg';" />
+    <ion-thumbnail>
+      <img src="{{item.image}}" onerror="this.style.display = 'none'" />
+      <ion-icon name="newspaper-outline"></ion-icon>
+    </ion-thumbnail>
   </ng-template>
   <ion-card-header>
     <ion-card-subtitle *ngIf="item.datePublished">{{item.datePublished | amLocale: language | amDateFormat:'Do MMMM YYYY, HH:mm'}}

src/app/modules/news/page/news-item.scss

@@ -7,6 +7,24 @@ ion-card-header a {
        padding-left: 4px;
      }
 }
-ion-card img {
+ion-card ion-thumbnail img {
   width: 100%;
+  z-index: 1;
+  position: absolute;
+}
+
+ion-card ion-thumbnail {
+  position: relative;
+  background: var(--placeholder-gray);
+  width: 100%;
+  min-height: 400px;
+  align-items: center;
+  margin: 0;
+  ion-icon {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    color: white;
+    display: block;
+  }
 }

src/theme/variables.scss

@@ -66,7 +66,7 @@
   --ion-color-medium-contrast-rgb: 0,0,0;
   --ion-color-medium-shade: #86888f;
   --ion-color-medium-tint: #a2a4ab;
-  
+
   /** dark **/
   --ion-color-dark: #222;
   --ion-color-dark-rgb: 34,34,34;
@@ -74,4 +74,7 @@
   --ion-color-dark-contrast-rgb: 255,255,255;
   --ion-color-dark-shade: #1e1e1e;
   --ion-color-dark-tint: #383838;
-}
+
+  /** StApps **/
+  --placeholder-gray: #F1F0ED;
+}