Display images with alts on event pages

Author: davepagurek

src/layouts/EventLayout.astro

@@ -3,6 +3,7 @@ import type { CollectionEntry } from "astro:content";
 import Head from "@components/Head/index.astro";
 import BaseLayout from "./BaseLayout.astro";
 import Image from "@components/Image/index.astro";
+import FreeRatioImage from "@components/Image/FreeRatioImage.astro";
 import RelatedItems from "@components/RelatedItems/index.astro";
 import { setJumpToState } from "../globals/state";
 import { getCurrentLocale, getUiTranslator } from "../i18n/utils";
@@ -14,7 +15,7 @@ interface Props {
 }
 
 const { entry, title } = Astro.props;
-const { Content } = await entry.render();
+const { Content, components } = await entry.render();
 
 setJumpToState(null);
 
@@ -52,7 +53,12 @@ const relatedEvents =
     )
   }
   <div class="rendered-markdown">
-    <Content />
+    <Content
+      components={{
+        ...components,
+        img: FreeRatioImage,
+      }}
+    />
   </div>
 
   {