add images

src/components/EventImageGenerator.svelte

@@ -3,7 +3,7 @@
 import core from '../core.json';
 import { dateFormat } from '../lib/events.js';
 import { marked } from 'marked';
-import { onMount } from 'svelte';
+import { onMount, afterUpdate } from 'svelte';
 import { writable } from 'svelte/store';
 
 import Square from './event-formats/square.svelte';
@@ -89,6 +89,7 @@ function getImageUrl(img) {
 $: image = $imageSelected ? getImageUrl($imageSelected) : '';
 $: event = core.events.find(e => e.id === $eventSelected);
 $: speaker = core.people.find(p => p.id === $speakerSelected);
+$: imgSrc = $deepImgSrc?.[image];
 
 const tools = {
     dateFormat
@@ -98,9 +99,26 @@ let imagesSrc = import.meta.glob("../../public/gen-img/events/*.png");
 const images = [];
 for (const path in imagesSrc) {
     const splitted = path.split('/')
-    images.push(splitted[splitted.length-1].split('.')[0])
+    const ph = splitted[splitted.length-1].split('.')[0];
+    images.push(ph);
 }
 
+const deepImgSrc = writable(null);
+async function updateImages () {
+
+    const col = {};
+    for (const imgFn of images) {
+        const id = getImageUrl(imgFn)
+        let imgClass = await import("../../public"+id);
+        const i = imgClass.default;
+        i.ratio = i.width / i.height;
+        col[id] = i;
+    }
+    deepImgSrc.set(col);
+}
+onMount(updateImages);
+afterUpdate(updateImages);
+
 </script>
 
 
@@ -161,13 +179,15 @@ for (const path in imagesSrc) {
         {/each}
     </select>
 </div>
+
+{#if imgSrc}
 <div class="w-full flex flex-wrap gap-10 p-10">
 
     <div>
         <div class="mb-4 text-xl text-[#909090]">Square (1:1)</div>
 
         <div class="w-[400px]">
-           <Square {event} {image} {tools} />
+           <Square {event} {image} {tools} {imgSrc} />
         </div>
     </div>
 
@@ -175,7 +195,7 @@ for (const path in imagesSrc) {
         <div class="mb-4 text-xl text-[#909090]">Wide-square (4:3)</div>
 
         <div class="h-[400px]">
-            <WideSquare {event} {image} {tools} />
+            <WideSquare {event} {image} {tools} {imgSrc} />
         </div>
     </div>
 
@@ -183,7 +203,7 @@ for (const path in imagesSrc) {
         <div class="mb-4 text-xl text-[#909090]">Wide (16:9)</div>
 
         <div class="h-[400px]">
-            <Wide {event} {image} {tools} />
+            <Wide {event} {image} {tools} {imgSrc} />
         </div>
     </div>
 
@@ -201,7 +221,7 @@ for (const path in imagesSrc) {
         </div>
 
         <div class="w-[400px]">
-            <SquareSpeaker {speaker} {event} {image} {tools} />
+            <SquareSpeaker {speaker} {event} {image} {tools} {imgSrc} />
         </div>
     </div>
 
@@ -209,7 +229,7 @@ for (const path in imagesSrc) {
         <div class="mb-4 text-xl text-[#909090]">Poster (1:1.414)</div>
         
         <div class="w-[760px]">
-            <Poster {topics} {event} {image} {tools} />
+            <Poster {topics} {event} {image} {tools} {imgSrc} />
         </div>
     </div>
 
@@ -217,8 +237,9 @@ for (const path in imagesSrc) {
         <div class="mb-4 text-xl text-[#909090]">Poster (simple) (1:1.414)</div>
         
         <div class="w-[760px]">
-            <PosterSimple {event} {image} {tools} />
+            <PosterSimple {event} {image} {tools} {imgSrc} />
         </div>
     </div>
 </div>
+{/if}
 {/if}

src/components/event-formats/poster-simple.svelte

@@ -2,6 +2,7 @@
     export let event;
     export let image;
     export let tools;
+    export let imgSrc;
 </script>
 
 <div id="img-poster-simple" class="aspect-[1/1.414] w-[760px] relative bg-black overflow-hidden text-white">
@@ -10,7 +11,7 @@
     {#if event.type === 'summit'}
         <img src="/gen-img/summit-title.svg" class="absolute top-28 left-0 w-full z-20" />
         <div class="absolute top-36 left-0 h-64 w-full z-10" style="background: linear-gradient(black, transparent);"></div>
-        <div class="absolute top-36 left-[-70px] w-[900px] h-[900px] -z-0" style="background-image: url({image}); background-size: 100% 100%; background-position: center;"></div>
+        <div class="absolute top-36 left-[-70px] w-[900px] h-[900px] -z-0 object-fit" style="background-image: url({image}); background-size: 100% 100%; background-position: center;"></div>
         <div class="absolute bottom-0 left-0 h-64 w-full z-10" style="background: linear-gradient(transparent, black);"></div>
 
         <div class="absolute bottom-24 left-10 right-10 uppercase text-4xl z-20">
@@ -26,7 +27,7 @@
 
     {:else}
         <div class="absolute top-28 left-0 h-32 w-full z-10" style="background: linear-gradient(black, transparent);"></div>
-        <div class="absolute top-28 left-[-70px] w-[900px] h-[900px] -z-0" style="background-image: url({image}); background-size: 100% 100%; background-position: center;"></div>
+        <div class="absolute top-28 left-[-70px] w-[900px] h-[900px] -z-0" style="background-image: url({image}); background-size: cover; background-position: center;"></div>
         <div class="absolute bottom-[3.5em] left-0 h-48 w-full z-10" style="background: linear-gradient(transparent, black);"></div>
 
         <div class="absolute bottom-10 left-10 uppercase text-3xl z-20">

src/components/event-formats/poster.svelte

@@ -3,13 +3,14 @@
     export let image;
     export let tools;
     export let topics;
+    export let imgSrc;
 </script>
 
 <div id="img-poster" class="aspect-[1/1.414] w-[760px] relative bg-black text-white overflow-hidden">
     <img src="/logo.svg" class="absolute top-10 left-10 w-1/3 z-20" />
 
     <div class="absolute top-20 left-0 h-36 w-full z-10" style="background: linear-gradient(black, transparent);"></div>
-    <img src={image} class="absolute top-20 left-0 -z-0" />
+    <img src={image} class="absolute top-20 left-0 -z-0 object-cover" style="{imgSrc?.ratio > 1 ? 'height: 760px;' : ''}" />
     <div class="absolute bottom-[14rem] left-0 h-64 w-full z-10" style="background: linear-gradient(transparent, black);"></div>
 
     <div class="absolute bottom-80 left-10 uppercase text-3xl z-20">

src/components/event-formats/square-speaker.svelte

@@ -11,7 +11,7 @@
 <div id="img-square-speaker" class="aspect-square w-[400px] relative bg-black text-white overflow-hidden">
     <img src="/logo.svg" class="absolute top-6 left-6 w-2/6 z-20" />
 
-    <img src={image} class="-z-10 opacity-40 blur-sm" />
+    <img src={image} class="-z-10 opacity-40 h-full cover blur-sm" />
 
     <div class="absolute right-6 top-6 text-right uppercase text-sm">
         {tools.dateFormat(event.date)}<br/>

src/components/event-formats/square.svelte

@@ -10,7 +10,7 @@
 
     <div class="absolute top-0 left-0 h-36 w-full z-10" style="background: linear-gradient(black, transparent);"></div>
     <div class="absolute top-0 left-0 h-full w-1/2 z-10" style="background: linear-gradient(to left, transparent, black);"></div>
-    <img src={image} class="absolute top-0 left-0 -z-0" />
+    <img src={image} class="absolute top-0 left-0 -z-0 h-full cover" />
 
     <div class="absolute bottom-8 left-8 uppercase z-20">
         <div class="flex">

src/components/event-formats/wide-square.svelte

@@ -1,16 +1,25 @@
 <script>
+    import { afterUpdate, onMount } from "svelte";
+    import { writable } from "svelte/store";
+
     export let event;
     export let image;
     export let tools;
-</script>
+    export let imgSrc;
 
+</script>
 
 <div id="img-wide-square" class="aspect-[4/3] h-[400px] relative bg-black text-white overflow-hidden">
 
     <img src="/logo.svg" class="absolute top-8 left-8 w-1/3 z-20" />
 
-    <div class="absolute top-0 left-24 h-full w-1/3 z-10" style="background: linear-gradient(to left, transparent, black);"></div>
-    <img src={image} class="absolute top-0 left-24 -z-0 w-[28rem]" />
+    <div class="flex items-end justify-end w-full h-full">
+        <div class="absolute top-0 h-full {imgSrc.ratio > 1 ? 'w-2/3' : 'w-2/6'} left-1/12 z-10" style="background: linear-gradient(to left, transparent, black); left: {imgSrc.ratio > 1 ? '0px' : '130px'};"></div>
+
+        <div class="h-full {imgSrc.ratio > 1.3 ? 'w-full' : 'w-5/6'} justify-end flex">
+            <img src={imgSrc.src} class="h-full object-cover" />
+        </div>
+    </div>
 
     <div class="absolute bottom-8 left-8 uppercase z-20 text-xl">
         <div class="flex">

src/components/event-formats/wide.svelte

@@ -2,6 +2,7 @@
     export let event;
     export let image;
     export let tools;
+    export let imgSrc;
 </script>
 
 
@@ -10,8 +11,13 @@
 
     <img src="/logo.svg" class="absolute top-8 left-8 w-1/4 z-20" />
 
-    <div class="absolute top-0 left-48 h-full w-1/3 z-10" style="background: linear-gradient(to left, transparent, black);"></div>
-    <img src={image} class="absolute top-0 left-48 -z-0 w-[33rem]" />
+    <div class="flex items-end justify-end w-full h-full">
+        <div class="absolute top-0 h-full {imgSrc.ratio > 1 ? 'w-2/3' : 'w-2/6'} left-1/12 z-10" style="background: linear-gradient(to left, transparent, black); left: {imgSrc.ratio > 1 ? '0px' : '130px'};"></div>
+
+        <div class="h-full {imgSrc.ratio > 1.3 ? 'w-full' : 'w-5/6'} justify-end flex">
+            <img src={imgSrc.src} class="h-full object-cover" />
+        </div>
+    </div>
 
     <div class="absolute bottom-8 left-8 uppercase z-20 text-xl">
         <div class="flex">