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 core from '../core.json';
import genImages from '../gen-images.json'; import genImages from '../gen-images.json';
import genImagesOffsets from '../gen-images-offsets.yaml';
import { dateFormat } from '../lib/events.js'; import { dateFormat } from '../lib/events.js';
import { marked } from 'marked'; import { marked } from 'marked';
@ -88,11 +89,37 @@ eventSelected.subscribe((id, next) => {
function getImageUrl(img) { function getImageUrl(img) {
return `/gen-img/events/${img}.png` 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); $: event = core.events.find(e => e.id === $eventSelected);
$: speaker = core.people.find(p => p.id === $speakerSelected); $: speaker = core.people.find(p => p.id === $speakerSelected);
$: imgSrc = genImages[$imageSelected];
const tools = { const tools = {
dateFormat dateFormat
@ -132,11 +159,11 @@ const tools = {
<div> <div>
<div class="mb-2 text-[#909090]">{event.id} [{event.design?.image || '-'}]</div> <div class="mb-2 text-[#909090]">{event.id} [{event.design?.image || '-'}]</div>
<div class="w-[304px] h-[430px] relative"> <div class="w-[304px] h-[430px] relative">
{#if event.images['poster-simple'] || event.images.poster} {#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> <a href="/gen/event?id={event.id}"><img src={event.images?.['poster-simple'] || event.images.poster} /></a>
{:else} {:else}
<div class="scale-[0.4] absolute -left-[212px] -top-[322px] bg-red-200 {!event.design?.image ? 'opacity-50' : ''}" style="margin-left: -1rem;"> <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> </div>
{/if} {/if}
</div> </div>
@ -159,14 +186,14 @@ const tools = {
</select> </select>
</div> </div>
{#if imgSrc}
<div class="w-full flex flex-wrap gap-10 p-10"> <div class="w-full flex flex-wrap gap-10 p-10">
<div> <div>
<div class="mb-4 text-xl text-[#909090]">Square (1:1)</div> <div class="mb-4 text-xl text-[#909090]">Square (1:1)</div>
<div class="w-[400px]"> <div class="w-[400px]">
<Square {event} {image} {tools} {imgSrc} /> <Square {event} {image} {tools} />
</div> </div>
</div> </div>
@ -174,7 +201,7 @@ const tools = {
<div class="mb-4 text-xl text-[#909090]">Wide-square (4:3)</div> <div class="mb-4 text-xl text-[#909090]">Wide-square (4:3)</div>
<div class="h-[400px]"> <div class="h-[400px]">
<WideSquare {event} {image} {tools} {imgSrc} /> <WideSquare {event} {image} {tools} />
</div> </div>
</div> </div>
@ -182,7 +209,7 @@ const tools = {
<div class="mb-4 text-xl text-[#909090]">Wide (16:9)</div> <div class="mb-4 text-xl text-[#909090]">Wide (16:9)</div>
<div class="h-[400px]"> <div class="h-[400px]">
<Wide {event} {image} {tools} {imgSrc} /> <Wide {event} {image} {tools} />
</div> </div>
</div> </div>
@ -200,7 +227,7 @@ const tools = {
</div> </div>
<div class="w-[400px]"> <div class="w-[400px]">
<SquareSpeaker {speaker} {event} {image} {tools} {imgSrc} /> <SquareSpeaker {speaker} {event} {image} {tools} />
</div> </div>
</div> </div>
@ -208,7 +235,7 @@ const tools = {
<div class="mb-4 text-xl text-[#909090]">Poster (1:1.414)</div> <div class="mb-4 text-xl text-[#909090]">Poster (1:1.414)</div>
<div class="w-[760px]"> <div class="w-[760px]">
<Poster {topics} {event} {image} {tools} {imgSrc} /> <Poster {topics} {event} {image} {tools} />
</div> </div>
</div> </div>
@ -216,9 +243,8 @@ const tools = {
<div class="mb-4 text-xl text-[#909090]">Poster (simple) (1:1.414)</div> <div class="mb-4 text-xl text-[#909090]">Poster (simple) (1:1.414)</div>
<div class="w-[760px]"> <div class="w-[760px]">
<PosterSimple {event} {image} {tools} {imgSrc} /> <PosterSimple {event} {image} {tools} />
</div> </div>
</div> </div>
</div> </div>
{/if} {/if}
{/if}

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

@ -2,7 +2,6 @@
export let event; export let event;
export let image; export let image;
export let tools; export let tools;
export let imgSrc;
</script> </script>
<div id="img-poster-simple" class="aspect-[1/1.414] w-[760px] relative bg-black overflow-hidden text-white"> <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'} {#if event.type === 'summit'}
<img src="/gen-img/summit-title.svg" class="absolute top-28 left-0 w-full z-20" /> <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-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-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"> <div class="absolute bottom-24 left-10 right-10 uppercase text-4xl z-20">
@ -27,7 +26,7 @@
{:else} {: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-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-[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"> <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 image;
export let tools; export let tools;
export let topics; export let topics;
export let imgSrc;
</script> </script>
<div id="img-poster" class="aspect-[1/1.414] w-[760px] relative bg-black text-white overflow-hidden"> <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" /> <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> <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-[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"> <div class="absolute bottom-80 left-10 uppercase text-3xl z-20">

2
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"> <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="/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"> <div class="absolute right-6 top-6 text-right uppercase text-sm">
{tools.dateFormat(event.date)}<br/> {tools.dateFormat(event.date)}<br/>

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-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> <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="absolute bottom-8 left-8 uppercase z-20">
<div class="flex"> <div class="flex">

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

@ -5,7 +5,6 @@
export let event; export let event;
export let image; export let image;
export let tools; export let tools;
export let imgSrc;
</script> </script>
@ -14,10 +13,10 @@
<img src="/logo.svg" class="absolute top-8 left-8 w-1/3 z-20" /> <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="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"> <div class="h-full {image.ratio > 1.3 ? 'w-full' : 'w-5/6'} justify-end flex">
<img src={image} class="h-full object-cover" /> <img src={image.src} class="h-full object-cover" style="{image.calcObjOffsets('wide-square')}" />
</div> </div>
</div> </div>

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

@ -2,7 +2,6 @@
export let event; export let event;
export let image; export let image;
export let tools; export let tools;
export let imgSrc;
</script> </script>
@ -12,10 +11,10 @@
<img src="/logo.svg" class="absolute top-8 left-8 w-1/4 z-20" /> <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="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"> <div class="h-full {image.ratio > 1.3 ? 'w-full' : 'w-5/6'} justify-end flex">
<img src={image} class="h-full object-cover" /> <img src={image.src} class="h-full object-cover" style="{image.calcObjOffsets('wide')}" />
</div> </div>
</div> </div>

80
src/core.json
View file

@ -1096,15 +1096,7 @@
"tim-bansemer", "tim-bansemer",
"mykola-siusko", "mykola-siusko",
"gabari" "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", "id": "m24ams",
@ -1132,11 +1124,7 @@
], ],
"design": { "design": {
"image": "amsterdam01" "image": "amsterdam01"
}, }
"images": {
"square": "https://data.web3privacy.info/img/events/2024/m24ams-square.png"
},
"thumbs": {}
}, },
{ {
"id": "m24ber", "id": "m24ber",
@ -1167,9 +1155,7 @@
}, },
"design": { "design": {
"image": "berlin03" "image": "berlin03"
}, }
"images": {},
"thumbs": {}
}, },
{ {
"id": "s24prg", "id": "s24prg",
@ -1199,9 +1185,7 @@
], ],
"design": { "design": {
"image": "summit02" "image": "summit02"
}, }
"images": {},
"thumbs": {}
}, },
{ {
"id": "q24ble", "id": "q24ble",
@ -1231,9 +1215,7 @@
"mykola-siusko", "mykola-siusko",
"pg", "pg",
"tree" "tree"
], ]
"images": {},
"thumbs": {}
}, },
{ {
"id": "m24lju", "id": "m24lju",
@ -1256,9 +1238,7 @@
"speakers": [ "speakers": [
"joshua-davila", "joshua-davila",
"mykola-siusko" "mykola-siusko"
], ]
"images": {},
"thumbs": {}
}, },
{ {
"id": "os24q2", "id": "os24q2",
@ -1270,9 +1250,7 @@
"slots": 8, "slots": 8,
"links": { "links": {
"rsvp": "https://lu.ma/w3pn-os24q2" "rsvp": "https://lu.ma/w3pn-os24q2"
}, }
"images": {},
"thumbs": {}
}, },
{ {
"id": "m24bcn", "id": "m24bcn",
@ -1289,9 +1267,7 @@
}, },
"speakers": [ "speakers": [
"joshua-davila" "joshua-davila"
], ]
"images": {},
"thumbs": {}
}, },
{ {
"id": "m24bru", "id": "m24bru",
@ -1316,9 +1292,7 @@
"edward-fricker", "edward-fricker",
"joshua-davila", "joshua-davila",
"mykola-siusko" "mykola-siusko"
], ]
"images": {},
"thumbs": {}
}, },
{ {
"id": "m24waw", "id": "m24waw",
@ -1336,9 +1310,7 @@
}, },
"links": { "links": {
"rsvp": "https://lu.ma/w3pn-m24waw" "rsvp": "https://lu.ma/w3pn-m24waw"
}, }
"images": {},
"thumbs": {}
}, },
{ {
"id": "os24q3", "id": "os24q3",
@ -1346,9 +1318,7 @@
"name-extension": "Q3", "name-extension": "Q3",
"date": "2024/Sep", "date": "2024/Sep",
"lead": "Tree", "lead": "Tree",
"slots": 8, "slots": 8
"images": {},
"thumbs": {}
}, },
{ {
"id": "m24cph", "id": "m24cph",
@ -1373,9 +1343,7 @@
}, },
"speakers": [ "speakers": [
"jaromil" "jaromil"
], ]
"images": {},
"thumbs": {}
}, },
{ {
"id": "m24rom", "id": "m24rom",
@ -1401,9 +1369,7 @@
"jaromil", "jaromil",
"vaclav-pavlin", "vaclav-pavlin",
"mykola-siusko" "mykola-siusko"
], ]
"images": {},
"thumbs": {}
}, },
{ {
"id": "c24rom", "id": "c24rom",
@ -1415,9 +1381,7 @@
"country": "it", "country": "it",
"coincidence": "ETHRome", "coincidence": "ETHRome",
"coincidenceFull": "ETHRome 2024", "coincidenceFull": "ETHRome 2024",
"lead": "Tree", "lead": "Tree"
"images": {},
"thumbs": {}
}, },
{ {
"id": "s24brn", "id": "s24brn",
@ -1447,9 +1411,7 @@
], ],
"design": { "design": {
"image": "brno01" "image": "brno01"
}, }
"images": {},
"thumbs": {}
}, },
{ {
"id": "c24brn", "id": "c24brn",
@ -1461,9 +1423,7 @@
"country": "cz", "country": "cz",
"coincidence": "ETHBrno", "coincidence": "ETHBrno",
"coincidenceFull": "ETHBrno3", "coincidenceFull": "ETHBrno3",
"lead": "Tree", "lead": "Tree"
"images": {},
"thumbs": {}
}, },
{ {
"id": "m24dc", "id": "m24dc",
@ -1483,9 +1443,7 @@
"speakers": [ "speakers": [
"edward-fricker", "edward-fricker",
"vaclav-pavlin" "vaclav-pavlin"
], ]
"images": {},
"thumbs": {}
}, },
{ {
"id": "os24q4", "id": "os24q4",
@ -1493,9 +1451,7 @@
"name-extension": "Q4", "name-extension": "Q4",
"date": "2024/Dec", "date": "2024/Dec",
"lead": "Tree", "lead": "Tree",
"slots": 8, "slots": 8
"images": {},
"thumbs": {}
} }
] ]
} }

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