From 935805fe1f9c6c7da3f04c5824d315a48799b6d0 Mon Sep 17 00:00:00 2001
From: tree <tree@hidden.cz>
Date: Sat, 16 Mar 2024 20:51:29 +0100
Subject: [PATCH] image offsets

---
 src/components/EventImageGenerator.svelte     | 52 +++++++++---
 .../event-formats/poster-simple.svelte        |  5 +-
 src/components/event-formats/poster.svelte    |  3 +-
 .../event-formats/square-speaker.svelte       |  4 +-
 src/components/event-formats/square.svelte    |  2 +-
 .../event-formats/wide-square.svelte          |  7 +-
 src/components/event-formats/wide.svelte      |  7 +-
 src/core.json                                 | 80 +++++--------------
 src/gen-images-offsets.yaml                   | 28 +++++++
 9 files changed, 97 insertions(+), 91 deletions(-)
 create mode 100644 src/gen-images-offsets.yaml

diff --git a/src/components/EventImageGenerator.svelte b/src/components/EventImageGenerator.svelte
index 48f7d0f..080fa3f 100644
--- a/src/components/EventImageGenerator.svelte
+++ b/src/components/EventImageGenerator.svelte
@@ -2,6 +2,7 @@
 
 import core from '../core.json';
 import genImages from '../gen-images.json';
+import genImagesOffsets from '../gen-images-offsets.yaml';
 
 import { dateFormat } from '../lib/events.js';
 import { marked } from 'marked';
@@ -88,11 +89,37 @@ eventSelected.subscribe((id, next) => {
 function getImageUrl(img) {
     return `/gen-img/events/${img}.png`
 }
+function getImageData(img) {
+    return Object.assign({}, genImages[img], {
+        src: `/gen-img/events/${img}.png`,
+        offsets: genImagesOffsets[img],
+        calcObjOffsets: function (tp) {
+            const co = image.offsets?.[tp];
+            if (!co) {
+                return '';
+            }
+            return `object-position: ${co.x || 'center'} ${co.y || 'center'}`;
+        },
+        calcBgOffsets: function(tp) {
+            const arr = [];
+            const co = image.offsets?.[tp];
+            if (!co) {
+                return '';
+            }
+            if (co.x) {
+                arr.push(`background-position-x: ${co.x};`)
+            }
+            if (co.y) {
+                arr.push(`background-position-y: ${co.y};`)
+            }
+            return arr.join(' ')
+        }
+    })
+}
 
-$: image = $imageSelected ? getImageUrl($imageSelected) : '';
+$: image = $imageSelected ? getImageData($imageSelected) : '';
 $: event = core.events.find(e => e.id === $eventSelected);
 $: speaker = core.people.find(p => p.id === $speakerSelected);
-$: imgSrc = genImages[$imageSelected];
 
 const tools = {
     dateFormat
@@ -132,11 +159,11 @@ const tools = {
             <div>
                 <div class="mb-2 text-[#909090]">{event.id} [{event.design?.image || '-'}]</div>
                 <div class="w-[304px] h-[430px] relative">
-                    {#if event.images['poster-simple'] || event.images.poster}
-                        <a href="/gen/event?id={event.id}"><img src={event.images['poster-simple'] || event.images.poster} /></a>
+                    {#if event.images?.['poster-simple'] || event.images?.poster}
+                        <a href="/gen/event?id={event.id}"><img src={event.images?.['poster-simple'] || event.images.poster} /></a>
                     {:else}
                         <div class="scale-[0.4] absolute -left-[212px] -top-[322px] bg-red-200 {!event.design?.image ? 'opacity-50' : ''}" style="margin-left: -1rem;">
-                            <a href="/gen/event?id={event.id}"><PosterSimple {event} image={getImageUrl(event.design?.image)} {tools} imgSrc={genImages[event.design?.image]} /></a>
+                            <a href="/gen/event?id={event.id}"><PosterSimple {event} image={getImageData(event.design?.image)} {tools} /></a>
                         </div>
                     {/if}
                 </div>
@@ -159,14 +186,14 @@ const tools = {
     </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} {imgSrc} />
+           <Square {event} {image} {tools} />
         </div>
     </div>
 
@@ -174,7 +201,7 @@ const tools = {
         <div class="mb-4 text-xl text-[#909090]">Wide-square (4:3)</div>
 
         <div class="h-[400px]">
-            <WideSquare {event} {image} {tools} {imgSrc} />
+            <WideSquare {event} {image} {tools} />
         </div>
     </div>
 
@@ -182,7 +209,7 @@ const tools = {
         <div class="mb-4 text-xl text-[#909090]">Wide (16:9)</div>
 
         <div class="h-[400px]">
-            <Wide {event} {image} {tools} {imgSrc} />
+            <Wide {event} {image} {tools} />
         </div>
     </div>
 
@@ -200,7 +227,7 @@ const tools = {
         </div>
 
         <div class="w-[400px]">
-            <SquareSpeaker {speaker} {event} {image} {tools} {imgSrc} />
+            <SquareSpeaker {speaker} {event} {image} {tools} />
         </div>
     </div>
 
@@ -208,7 +235,7 @@ const tools = {
         <div class="mb-4 text-xl text-[#909090]">Poster (1:1.414)</div>
         
         <div class="w-[760px]">
-            <Poster {topics} {event} {image} {tools} {imgSrc} />
+            <Poster {topics} {event} {image} {tools} />
         </div>
     </div>
 
@@ -216,9 +243,8 @@ const tools = {
         <div class="mb-4 text-xl text-[#909090]">Poster (simple) (1:1.414)</div>
         
         <div class="w-[760px]">
-            <PosterSimple {event} {image} {tools} {imgSrc} />
+            <PosterSimple {event} {image} {tools} />
         </div>
     </div>
 </div>
-{/if}
 {/if}
\ No newline at end of file
diff --git a/src/components/event-formats/poster-simple.svelte b/src/components/event-formats/poster-simple.svelte
index ff5c897..f4bcd2c 100644
--- a/src/components/event-formats/poster-simple.svelte
+++ b/src/components/event-formats/poster-simple.svelte
@@ -2,7 +2,6 @@
     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">
@@ -11,7 +10,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 object-fit" 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.src}); background-size: 100% 100%; background-position: center; {image.calcBgOffsets('poster-simple')}"></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">
@@ -27,7 +26,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: cover; background-position: center;"></div>
+        <div class="absolute top-28 left-[-70px] w-[900px] h-[900px] -z-0" style="background-image: url({image.src}); background-size: cover; background-position: center; {image.calcBgOffsets('poster-simple')}"></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">
diff --git a/src/components/event-formats/poster.svelte b/src/components/event-formats/poster.svelte
index 8c7442b..4a14180 100644
--- a/src/components/event-formats/poster.svelte
+++ b/src/components/event-formats/poster.svelte
@@ -3,14 +3,13 @@
     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 object-cover" style="{imgSrc?.ratio > 1 ? 'height: 760px;' : ''}" />
+    <img src={image.src} class="absolute top-20 left-0 -z-0 object-cover" style="{image.ratio > 1 ? 'height: 760px;' : ''} {image.calcObjOffsets('poster')}" />
     <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">
diff --git a/src/components/event-formats/square-speaker.svelte b/src/components/event-formats/square-speaker.svelte
index 5e853e3..122b08e 100644
--- a/src/components/event-formats/square-speaker.svelte
+++ b/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 h-full cover blur-sm" />
+    <img src={image.src} class="-z-10 opacity-40 h-full object-cover blur-sm" style="{image.calcObjOffsets('square')}" />
 
     <div class="absolute right-6 top-6 text-right uppercase text-sm">
         {tools.dateFormat(event.date)}<br/>
@@ -21,7 +21,7 @@
     <div class="absolute top-[5.5rem] w-full">
         <div class="flex justify-center items-center w-full">
             <div class="relative w-[200px]">
-                <img src={speaker.imageUrl} class="w-full border-2 border-white aspect-square object-cover" />
+                <img src={speaker.imageUrl} class="w-full border-2 border-white aspect-square object-cover"  />
                 {#if speaker.refs?.twitter || speaker.refs?.bsky}
                     <div class="absolute bottom-0 left-0 text-xs">
                         <div class="bg-white text-black py-1 px-2">
diff --git a/src/components/event-formats/square.svelte b/src/components/event-formats/square.svelte
index 6531149..c125ef6 100644
--- a/src/components/event-formats/square.svelte
+++ b/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 h-full cover" />
+    <img src={image.src} class="absolute top-0 left-0 -z-0 h-full object-cover" style="{image.calcObjOffsets('square')}" />
 
     <div class="absolute bottom-8 left-8 uppercase z-20">
         <div class="flex">
diff --git a/src/components/event-formats/wide-square.svelte b/src/components/event-formats/wide-square.svelte
index 9e68fc9..4d9dd2c 100644
--- a/src/components/event-formats/wide-square.svelte
+++ b/src/components/event-formats/wide-square.svelte
@@ -5,7 +5,6 @@
     export let event;
     export let image;
     export let tools;
-    export let imgSrc;
 
 </script>
 
@@ -14,10 +13,10 @@
     <img src="/logo.svg" class="absolute top-8 left-8 w-1/3 z-20" />
 
     <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="absolute top-0 h-full {image.ratio > 1 ? 'w-2/3' : 'w-2/6'} left-1/12 z-10" style="background: linear-gradient(to left, transparent, black); left: {image.ratio > 1 ? '0px' : '130px'};"></div>
 
-        <div class="h-full {imgSrc.ratio > 1.3 ? 'w-full' : 'w-5/6'} justify-end flex">
-            <img src={image} class="h-full object-cover" />
+        <div class="h-full {image.ratio > 1.3 ? 'w-full' : 'w-5/6'} justify-end flex">
+            <img src={image.src} class="h-full object-cover" style="{image.calcObjOffsets('wide-square')}" />
         </div>
     </div>
 
diff --git a/src/components/event-formats/wide.svelte b/src/components/event-formats/wide.svelte
index d7c396c..d3f8dab 100644
--- a/src/components/event-formats/wide.svelte
+++ b/src/components/event-formats/wide.svelte
@@ -2,7 +2,6 @@
     export let event;
     export let image;
     export let tools;
-    export let imgSrc;
 </script>
 
 
@@ -12,10 +11,10 @@
     <img src="/logo.svg" class="absolute top-8 left-8 w-1/4 z-20" />
 
     <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="absolute top-0 h-full {image.ratio > 1 ? 'w-2/3' : 'w-2/6'} left-1/12 z-10" style="background: linear-gradient(to left, transparent, black); left: {image.ratio > 1 ? '0px' : '130px'};"></div>
 
-        <div class="h-full {imgSrc.ratio > 1.3 ? 'w-full' : 'w-5/6'} justify-end flex">
-            <img src={image} class="h-full object-cover" />
+        <div class="h-full {image.ratio > 1.3 ? 'w-full' : 'w-5/6'} justify-end flex">
+            <img src={image.src} class="h-full object-cover" style="{image.calcObjOffsets('wide')}" />
         </div>
     </div>
 
diff --git a/src/core.json b/src/core.json
index 44bd75c..91fb743 100644
--- a/src/core.json
+++ b/src/core.json
@@ -1096,15 +1096,7 @@
         "tim-bansemer",
         "mykola-siusko",
         "gabari"
-      ],
-      "images": {
-        "square": "https://data.web3privacy.info/img/events/2024/m24buc-square.png",
-        "wide": "https://data.web3privacy.info/img/events/2024/m24buc-wide.png",
-        "poster": "https://data.web3privacy.info/img/events/2024/m24buc-poster.png",
-        "wide-square": "https://data.web3privacy.info/img/events/2024/m24buc-wide-square.png",
-        "poster-simple": "https://data.web3privacy.info/img/events/2024/m24buc-poster-simple.png"
-      },
-      "thumbs": {}
+      ]
     },
     {
       "id": "m24ams",
@@ -1132,11 +1124,7 @@
       ],
       "design": {
         "image": "amsterdam01"
-      },
-      "images": {
-        "square": "https://data.web3privacy.info/img/events/2024/m24ams-square.png"
-      },
-      "thumbs": {}
+      }
     },
     {
       "id": "m24ber",
@@ -1167,9 +1155,7 @@
       },
       "design": {
         "image": "berlin03"
-      },
-      "images": {},
-      "thumbs": {}
+      }
     },
     {
       "id": "s24prg",
@@ -1199,9 +1185,7 @@
       ],
       "design": {
         "image": "summit02"
-      },
-      "images": {},
-      "thumbs": {}
+      }
     },
     {
       "id": "q24ble",
@@ -1231,9 +1215,7 @@
         "mykola-siusko",
         "pg",
         "tree"
-      ],
-      "images": {},
-      "thumbs": {}
+      ]
     },
     {
       "id": "m24lju",
@@ -1256,9 +1238,7 @@
       "speakers": [
         "joshua-davila",
         "mykola-siusko"
-      ],
-      "images": {},
-      "thumbs": {}
+      ]
     },
     {
       "id": "os24q2",
@@ -1270,9 +1250,7 @@
       "slots": 8,
       "links": {
         "rsvp": "https://lu.ma/w3pn-os24q2"
-      },
-      "images": {},
-      "thumbs": {}
+      }
     },
     {
       "id": "m24bcn",
@@ -1289,9 +1267,7 @@
       },
       "speakers": [
         "joshua-davila"
-      ],
-      "images": {},
-      "thumbs": {}
+      ]
     },
     {
       "id": "m24bru",
@@ -1316,9 +1292,7 @@
         "edward-fricker",
         "joshua-davila",
         "mykola-siusko"
-      ],
-      "images": {},
-      "thumbs": {}
+      ]
     },
     {
       "id": "m24waw",
@@ -1336,9 +1310,7 @@
       },
       "links": {
         "rsvp": "https://lu.ma/w3pn-m24waw"
-      },
-      "images": {},
-      "thumbs": {}
+      }
     },
     {
       "id": "os24q3",
@@ -1346,9 +1318,7 @@
       "name-extension": "Q3",
       "date": "2024/Sep",
       "lead": "Tree",
-      "slots": 8,
-      "images": {},
-      "thumbs": {}
+      "slots": 8
     },
     {
       "id": "m24cph",
@@ -1373,9 +1343,7 @@
       },
       "speakers": [
         "jaromil"
-      ],
-      "images": {},
-      "thumbs": {}
+      ]
     },
     {
       "id": "m24rom",
@@ -1401,9 +1369,7 @@
         "jaromil",
         "vaclav-pavlin",
         "mykola-siusko"
-      ],
-      "images": {},
-      "thumbs": {}
+      ]
     },
     {
       "id": "c24rom",
@@ -1415,9 +1381,7 @@
       "country": "it",
       "coincidence": "ETHRome",
       "coincidenceFull": "ETHRome 2024",
-      "lead": "Tree",
-      "images": {},
-      "thumbs": {}
+      "lead": "Tree"
     },
     {
       "id": "s24brn",
@@ -1447,9 +1411,7 @@
       ],
       "design": {
         "image": "brno01"
-      },
-      "images": {},
-      "thumbs": {}
+      }
     },
     {
       "id": "c24brn",
@@ -1461,9 +1423,7 @@
       "country": "cz",
       "coincidence": "ETHBrno",
       "coincidenceFull": "ETHBrno3",
-      "lead": "Tree",
-      "images": {},
-      "thumbs": {}
+      "lead": "Tree"
     },
     {
       "id": "m24dc",
@@ -1483,9 +1443,7 @@
       "speakers": [
         "edward-fricker",
         "vaclav-pavlin"
-      ],
-      "images": {},
-      "thumbs": {}
+      ]
     },
     {
       "id": "os24q4",
@@ -1493,9 +1451,7 @@
       "name-extension": "Q4",
       "date": "2024/Dec",
       "lead": "Tree",
-      "slots": 8,
-      "images": {},
-      "thumbs": {}
+      "slots": 8
     }
   ]
 }
\ No newline at end of file
diff --git a/src/gen-images-offsets.yaml b/src/gen-images-offsets.yaml
new file mode 100644
index 0000000..5a2e3c9
--- /dev/null
+++ b/src/gen-images-offsets.yaml
@@ -0,0 +1,28 @@
+bucharest01:
+  square: { x: 65% }
+  poster: { x: 65% }
+  poster-simple: { x: 69% }
+amsterdam01:
+  square: { x: 72% }
+  wide-square: { x: 55% }
+  wide: { x: 10% }
+  poster: { x: 75% }
+  poster-simple: { x: 77% }
+barcelona02:
+  square: { x: 0% }
+  poster: { x: 38% }
+  poster-simple: { x: 35% }
+brussels01:
+  square: { x: 55% }
+  wide: { x: 0% }
+warsaw01:
+  square: { x: 93% }
+  wide-square: { x: 70% }
+  poster: { x: 55% }
+  poster-simple: { x: 59% }
+copenhagen02:
+  square: { x: 100% }
+  wide-square: { x: 100% }
+  wide: { x: 100% }
+  poster: { x: 100% }
+  poster-simple: { x: 108% }
\ No newline at end of file