show contact portraits

web/src/components/blocks/ContactEntityBlock.tsx

@@ -2,6 +2,7 @@ import { ContactEntityBlock as ContactEntityBlockType } from "@/gql/graphql";
 import styles from "./contactEntityBlock.module.scss";
 import { formatNorwegianPhoneNumber, formatPhoneE164 } from "@/lib/common";
 import { Icon } from "../general/Icon";
+import { Image } from "../general/Image";
 
 export const ContactEntityBlock = ({
   block,
@@ -22,7 +23,22 @@ export const ContactEntityBlock = ({
   return (
     <li className={styles.contactItem}>
       <div className={styles.image}>
-        <img src="/assets/graphics/portrait-pig.svg" className={styles.portraitPlaceholder} />
+        {!contact.image && (
+          <img
+            src="/assets/graphics/portrait-pig.svg"
+            className={styles.portraitPlaceholder}
+          />
+        )}
+        {contact.image && (
+          <Image
+            src={contact.image.url}
+            alt={contact.image.alt ?? ""}
+            width={contact.image.width}
+            height={contact.image.height}
+            sizes="10vw"
+            className={styles.portrait}
+          />
+        )}
       </div>
       <div className={styles.text}>
         <h1 className={styles.name}>{contact.name}</h1>
@@ -31,7 +47,9 @@ export const ContactEntityBlock = ({
           <ul className={styles.contact}>
             {contact.email && (
               <li>
-                <span className={styles.icon}><Icon type="email" /></span>
+                <span className={styles.icon}>
+                  <Icon type="email" />
+                </span>
                 <a href={`mailto:${contact.email}`} target="_blank">
                   {contact.email}
                 </a>
@@ -39,7 +57,9 @@ export const ContactEntityBlock = ({
             )}
             {phoneE164 && (
               <li>
-                <span className={styles.icon}><Icon type="phone" /></span>
+                <span className={styles.icon}>
+                  <Icon type="phone" />
+                </span>
                 <a href={`tel:${phoneE164}`} target="_blank">
                   {phoneFormatted}
                 </a>