Add alt attribute to imgs

astro/src/components/Content.astro

@@ -6,11 +6,11 @@ const { content } = Astro.props;
 const contentArray = getContentArray(content);
 ---
 
-<div>
+<article>
   {
     contentArray.map((value) => {
       if (typeof value === "string") {
-        return <article set:html={value} />;
+        return <section set:html={value} />;
       } else {
         return (
           <Image
@@ -18,10 +18,10 @@ const contentArray = getContentArray(content);
             width={value.width}
             height={value.height}
             format="webp"
-            alt="hallo"
+            alt={value.alt}
           />
         );
       }
     })
   }
-</div>
+</article>

astro/src/utils/helpers.ts

@@ -12,12 +12,13 @@ export const getContentArray = (content: any) => {
           src: node.value.filename,
           width: `${node.value.width}`,
           height: `${node.value.height}`,
+          alt: `${node.value.alt}`,
         }),
     },
   }).replaceAll("<p></p>", "<p>&nbsp;</p>");
   const htmlImageArray: (
     | string
-    | { src: string; width: number; height: number }
+    | { src: string; width: number; height: number, alt: string }
   )[] = [];
   let lastIndex = 0;
   while (true) {

payload/src/collections/Media.ts

@@ -18,6 +18,7 @@ export const Media: CollectionConfig = {
     {
       name: "alt",
       type: "text",
+      required: true
     },
   ],
 };

payload/src/collections/Posts.ts

@@ -38,10 +38,7 @@ const Posts: CollectionConfig = {
     {
       name: "title",
       type: "text",
-    },
-    {
-      name: "hallo",
-      type: "text",
+      required: true
     },
     {
       name: "publishedDate",
@@ -59,7 +56,7 @@ const Posts: CollectionConfig = {
             media: {
               fields: [
                 {
-                  name: "imagel",
+                  name: "image",
                   type: "upload",
                   relationTo: "media",
                   required: true,