web3privacy/web
1
0
Fork 0
mirror of https://github.com/web3privacy/web synced 2024-10-15 18:26:27 +02:00
Code Issues Projects Releases Packages Wiki Activity

image offsets

Browse source
This commit is contained in:
tree🌴 2024-03-16 20:51:29 +01:00
parent 9100bae4eb
commit 935805fe1f
9 changed files with 97 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
src/components/EventImageGenerator.svelte
View file

@ -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}

5
src/components/event-formats/poster-simple.svelte
View file

@ -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">

3
src/components/event-formats/poster.svelte
View file

@ -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">

4
src/components/event-formats/square-speaker.svelte
View file

@ -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">

2
src/components/event-formats/square.svelte
View file

@ -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">

7
src/components/event-formats/wide-square.svelte
View file

@ -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>

7
src/components/event-formats/wide.svelte
View file

@ -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>

80
src/core.json
View file

@ -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
}
]
}

28
src/gen-images-offsets.yaml Normal file
View file

@ -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% }