seo...

api/collections/medialib.yml

@@ -21,7 +21,7 @@ meta:
         enabled: true
         fields:
             - title
-            - description
+            - alt
             - file
 
     # "defaultImageFilter" dient auch hier nur zur Reduzierung der
@@ -120,6 +120,26 @@ fields:
               de: Datei
               en: File
 
+    - name: alt
+      type: string
+      meta:
+          label:
+              de: Alternativtext
+              en: Alternative text
+          helperText:
+              de: Der Alternativtext wird angezeigt, wenn die Datei nicht geladen werden kann.
+              en: The alternative text is displayed if the file cannot be loaded.
+
+    - name: title
+      type: string
+      meta:
+          label:
+              de: Titel
+              en: Title
+          helperText:
+              de: Der Titel wird angezeigt, wenn die Datei geladen wird.
+              en: The title is displayed when the file is loaded.
+
     - name: sort
       type: number
       meta:

frontend/src/lib/components/Pagebuilder/Rows.svelte

@@ -71,7 +71,7 @@
         {#if page?.active === false}
             <meta name="robots" content="noindex" />
         {/if}
-        <link rel="canonical" href="{baseURL + page.path}" />
+        <link rel="canonical" href="{baseURL + page?.path}" />
     {/key}
 </svelte:head>
 <div class="rows" class:HP="{path == '/'}">

frontend/src/lib/components/widgets/Worldcard/card.svelte

@@ -24,7 +24,11 @@
 </script>
 
 <div class="card">
-    <img src="{apiBaseURL}medialib/{card.image}/{$mediaLibrary?.[card?.image]?.file?.src}" alt="card" />
+    <img
+        src="{apiBaseURL}medialib/{card.image}/{$mediaLibrary?.[card?.image]?.file?.src}"
+        alt="{$mediaLibrary[card?.image]?.alt || ''}"
+        title="{$mediaLibrary[card?.image]?.title || ''}"
+    />
 
     <div class="content">
         <div

frontend/src/lib/components/widgets/events.svelte

@@ -49,6 +49,7 @@
                     href="{apiBaseURL}medialib/{nE.file}/{$mediaLibrary?.[nE?.file]?.file?.src}"
                     style="text-decoration: none;"
                     download="{apiBaseURL}medialib/{nE.file}/{$mediaLibrary?.[nE?.file]?.file?.src}"
+                    
                 >
                     <button class="more">mehr</button></a
                 >

frontend/src/lib/components/widgets/iconBlock.svelte

@@ -10,7 +10,11 @@
 <div class="iconBlock">
     {#each col.iconBlocks as icon}
         <div class="icon">
-            <img src="{`${apiBaseURL}medialib/${icon.icon}/${$mediaLibrary?.[icon?.icon]?.file?.src}`}" alt="img" />
+            <img
+                alt="{$mediaLibrary[icon.icon]?.alt || ''}"
+                title="{$mediaLibrary[icon.icon]?.title || ''}"
+                src="{`${apiBaseURL}medialib/${icon.icon}/${$mediaLibrary?.[icon?.icon]?.file?.src}`}"
+            />
             <div class="text">
                 <em>{icon.bigText}</em>
                 <p>{icon.smallText}</p>
@@ -46,7 +50,6 @@
             img {
                 width: 75%;
                 height: auto;
-                
             }
             .text {
                 display: flex;

frontend/src/lib/components/widgets/image.svelte

@@ -7,7 +7,11 @@
 </script>
 
 <div class="image-container">
-    <img src="{`${apiBaseURL}medialib/${image}/${$mediaLibrary[image]?.file?.src}`}" alt="img" />
+    <img
+        src="{`${apiBaseURL}medialib/${image}/${$mediaLibrary[image]?.file?.src}`}"
+        alt="{$mediaLibrary[image]?.alt || ''}"
+        title="{$mediaLibrary[image]?.title || ''}"
+    />
 </div>
 {#if col && col.icons}
     <div class="icons">
@@ -16,7 +20,8 @@
                 <a href="{icon.link}" style="text-decoration: none;" target="_blank">
                     <img
                         src="{`${apiBaseURL}medialib/${icon.icon}/${$mediaLibrary[icon.icon]?.file?.src}`}"
-                        alt="img"
+                        alt="{$mediaLibrary[icon.icon]?.alt || ''}"
+                        title="{$mediaLibrary[icon.icon]?.title || ''}"
                     />
                 </a>
             </div>

frontend/src/lib/components/widgets/infoBoard.svelte

@@ -11,7 +11,8 @@
         <div class="icon">
             <img
                 src="{`${apiBaseURL}medialib/${col.infoBoard.icon}/${$mediaLibrary[col.infoBoard.icon]?.file?.src}`}"
-                alt="img"
+                alt="{$mediaLibrary[col.infoBoard.icon]?.alt || ''}"
+                title="{$mediaLibrary[col.infoBoard.icon]?.title || ''}"
             />
         </div>
         <div class="title">

frontend/src/lib/components/widgets/persons.svelte

@@ -25,8 +25,9 @@
                     src="{`${apiBaseURL}medialib/${p?.personPreview?.initialImage}/${
                         $mediaLibrary[p?.personPreview?.initialImage]?.file?.src
                     }`}"
-                    alt="img"
                     style="opacity: {hover == i ? 0 : 1}"
+                    alt="{$mediaLibrary[p?.personPreview?.initialImage]?.alt || ''}"
+                    title="{$mediaLibrary[p?.personPreview?.initialImage]?.title || ''}"
                 />
                 <!-- Hover Image -->
                 <img
@@ -34,8 +35,9 @@
                     src="{`${apiBaseURL}medialib/${p?.personPreview?.hoverImage}/${
                         $mediaLibrary[p?.personPreview?.hoverImage]?.file?.src
                     }`}"
-                    alt="img"
                     style="opacity: {hover == i ? 1 : 0}"
+                    alt="{$mediaLibrary[p?.personPreview?.hoverImage]?.alt || ''}"
+                    title="{$mediaLibrary[p?.personPreview?.hoverImage]?.title || ''}"
                 />
             </div>
             <div class="text">

types/global.d.ts

@@ -60,6 +60,8 @@ type Column =
 
 interface MediaLibrary {
     file: FileField
+    alt: string
+    title: string
     id: string
 }