Set fallback for image placeholders

City-of-Helsinki · Dec 10, 2024 · 458ecc3 · 458ecc3
1 parent 8239618
commit 458ecc3
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 4 deletions.
diff --git a/dist/js/linkedevents.min.js b/dist/js/linkedevents.min.js
diff --git a/src/js/react/apps/linkedevents/components/ResultCard.tsx b/src/js/react/apps/linkedevents/components/ResultCard.tsx
@@ -97,15 +97,29 @@ function ResultCard({ end_time, id, location, name, keywords=[], start_time, ima
     return <img alt='' {...imageProps} />;
   };
 
-  const image = images?.find(img => img.url);
+  const getImage = () => {
+    const image = images?.find(img => img.url);
+
+    if (image) {
+      return imageToElement(image);
+    }
+    if (imagePlaceholder) {
+      return parse(imagePlaceholder);
+    }
+
+    return (
+      <div className='image-placeholder'></div>
+    );
+  };
+
   const isRemote = location && location.id === INTERNET_EXCEPTION;
   const cardTags = getCardTags({keywords, currentLanguage});
 
   return (
     <CardItem
       cardUrl={url}
       cardTitle={resolvedName}
-      cardImage={image ? imageToElement(image) : parse(imagePlaceholder) }
+      cardImage={getImage()}
       cardTags={cardTags}
       cardUrlExternal
       location={isRemote ? 'Internet' : getLocation()}

diff --git a/src/js/react/apps/linkedevents/store.tsx b/src/js/react/apps/linkedevents/store.tsx
@@ -49,7 +49,7 @@ const createBaseAtom = () => {
   const useFixtures = settings?.use_fixtures;
   const eventsApiUrl = settings?.events_api_url;
   const eventListTitle = settings?.field_event_list_title;
-  const eventsPublicUrl = settings?.events_public_url;
+  const eventsPublicUrl = settings?.events_public_url || 'https://tapahtumat.hel.fi';
 
   const filterSettings: FilterSettings = {
     showLocation: settings?.field_event_location,