From 9a3217780ac327c58353259c54729a6e154a18b4 Mon Sep 17 00:00:00 2001
From: Santtu Pajukanta <santtu@pajukanta.fi>
Date: Fri, 20 Oct 2023 13:13:37 +0300
Subject: [PATCH] feat(frontend/PhotographerProfile): use <picture> for
 photographer profile pic to support extra formats

---
 .../components/AlbumView/PhotographerProfile.tsx  | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/AlbumView/PhotographerProfile.tsx b/frontend/src/components/AlbumView/PhotographerProfile.tsx
index d6414b2..242a15c 100644
--- a/frontend/src/components/AlbumView/PhotographerProfile.tsx
+++ b/frontend/src/components/AlbumView/PhotographerProfile.tsx
@@ -5,6 +5,7 @@ import Photographer, { LarppikuvatProfile } from '../../models/Photographer';
 import Picture from '../../models/Picture';
 import Linebreaks from '../Linebreaks';
 import { T } from '../../translations';
+import replaceFormat from '../../helpers/replaceFormat';
 
 interface PhotographerProfileProps {
   photographer: Photographer;
@@ -86,14 +87,12 @@ const PhotographerProfile: React.FC<PhotographerProfileProps> = ({ photographer,
         {coverPicture ? (
           <figure className={className}>
             <Link to={coverPicture.path}>
-              <img
-                src={coverPicture.preview.src}
-                alt={coverPicture.title}
-                style={{
-                  display: 'block',
-                  width: '100%',
-                }}
-              />
+              <picture>
+                {(coverPicture.preview.additional_formats ?? []).map(format => (
+                  <source key={format} srcSet={replaceFormat(coverPicture.preview.src, format)} type={`image/${format}`} />
+                ))}
+                <img src={coverPicture.preview.src} alt={coverPicture.title} style={{ display: "block", width: "100%" }} />
+              </picture>
             </Link>
             {coverPicture.credits ? (
               <figcaption className="small text-muted text-right">