diff --git a/api/collections/medialib.yml b/api/collections/medialib.yml index 9910bdd..5f4e3ee 100644 --- a/api/collections/medialib.yml +++ b/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: diff --git a/frontend/src/lib/components/Pagebuilder/Rows.svelte b/frontend/src/lib/components/Pagebuilder/Rows.svelte index bbd30c2..c4c164d 100644 --- a/frontend/src/lib/components/Pagebuilder/Rows.svelte +++ b/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 == '/'}"> diff --git a/frontend/src/lib/components/widgets/Worldcard/card.svelte b/frontend/src/lib/components/widgets/Worldcard/card.svelte index 61cdd57..39f0923 100644 --- a/frontend/src/lib/components/widgets/Worldcard/card.svelte +++ b/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 diff --git a/frontend/src/lib/components/widgets/events.svelte b/frontend/src/lib/components/widgets/events.svelte index 02e88f3..6b9cafb 100644 --- a/frontend/src/lib/components/widgets/events.svelte +++ b/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 > diff --git a/frontend/src/lib/components/widgets/iconBlock.svelte b/frontend/src/lib/components/widgets/iconBlock.svelte index 11b41c0..3283c6d 100644 --- a/frontend/src/lib/components/widgets/iconBlock.svelte +++ b/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; diff --git a/frontend/src/lib/components/widgets/image.svelte b/frontend/src/lib/components/widgets/image.svelte index 2e9a7ff..2af8d6d 100644 --- a/frontend/src/lib/components/widgets/image.svelte +++ b/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> diff --git a/frontend/src/lib/components/widgets/infoBoard.svelte b/frontend/src/lib/components/widgets/infoBoard.svelte index 64180fe..8af0302 100644 --- a/frontend/src/lib/components/widgets/infoBoard.svelte +++ b/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"> diff --git a/frontend/src/lib/components/widgets/persons.svelte b/frontend/src/lib/components/widgets/persons.svelte index 5c9cd35..d405ce9 100644 --- a/frontend/src/lib/components/widgets/persons.svelte +++ b/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"> diff --git a/types/global.d.ts b/types/global.d.ts index 503b223..e0b0cab 100644 --- a/types/global.d.ts +++ b/types/global.d.ts @@ -60,6 +60,8 @@ type Column = interface MediaLibrary { file: FileField + alt: string + title: string id: string }