add images
Before Width: | Height: | Size: 847 KiB After Width: | Height: | Size: 5.9 MiB |
BIN
public/gen-img/events/bangkok01.png
Normal file
After Width: | Height: | Size: 5.9 MiB |
BIN
public/gen-img/events/barcelona02.png
Normal file
After Width: | Height: | Size: 5.8 MiB |
BIN
public/gen-img/events/berlin03.png
Normal file
After Width: | Height: | Size: 3.2 MiB |
Before Width: | Height: | Size: 3.3 MiB After Width: | Height: | Size: 5.5 MiB |
BIN
public/gen-img/events/brussels01.png
Normal file
After Width: | Height: | Size: 6.4 MiB |
Before Width: | Height: | Size: 380 KiB After Width: | Height: | Size: 5 MiB |
BIN
public/gen-img/events/copenhagen02.png
Normal file
After Width: | Height: | Size: 4.2 MiB |
BIN
public/gen-img/events/rome02.png
Normal file
After Width: | Height: | Size: 3.1 MiB |
BIN
public/gen-img/events/warsaw01.png
Normal file
After Width: | Height: | Size: 6 MiB |
|
@ -3,7 +3,7 @@
|
||||||
import core from '../core.json';
|
import core from '../core.json';
|
||||||
import { dateFormat } from '../lib/events.js';
|
import { dateFormat } from '../lib/events.js';
|
||||||
import { marked } from 'marked';
|
import { marked } from 'marked';
|
||||||
import { onMount } from 'svelte';
|
import { onMount, afterUpdate } from 'svelte';
|
||||||
import { writable } from 'svelte/store';
|
import { writable } from 'svelte/store';
|
||||||
|
|
||||||
import Square from './event-formats/square.svelte';
|
import Square from './event-formats/square.svelte';
|
||||||
|
@ -89,6 +89,7 @@ function getImageUrl(img) {
|
||||||
$: image = $imageSelected ? getImageUrl($imageSelected) : '';
|
$: image = $imageSelected ? getImageUrl($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 = $deepImgSrc?.[image];
|
||||||
|
|
||||||
const tools = {
|
const tools = {
|
||||||
dateFormat
|
dateFormat
|
||||||
|
@ -98,9 +99,26 @@ let imagesSrc = import.meta.glob("../../public/gen-img/events/*.png");
|
||||||
const images = [];
|
const images = [];
|
||||||
for (const path in imagesSrc) {
|
for (const path in imagesSrc) {
|
||||||
const splitted = path.split('/')
|
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>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
@ -161,13 +179,15 @@ for (const path in imagesSrc) {
|
||||||
{/each}
|
{/each}
|
||||||
</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} />
|
<Square {event} {image} {tools} {imgSrc} />
|
||||||
</div>
|
</div>
|
||||||
</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="mb-4 text-xl text-[#909090]">Wide-square (4:3)</div>
|
||||||
|
|
||||||
<div class="h-[400px]">
|
<div class="h-[400px]">
|
||||||
<WideSquare {event} {image} {tools} />
|
<WideSquare {event} {image} {tools} {imgSrc} />
|
||||||
</div>
|
</div>
|
||||||
</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="mb-4 text-xl text-[#909090]">Wide (16:9)</div>
|
||||||
|
|
||||||
<div class="h-[400px]">
|
<div class="h-[400px]">
|
||||||
<Wide {event} {image} {tools} />
|
<Wide {event} {image} {tools} {imgSrc} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -201,7 +221,7 @@ for (const path in imagesSrc) {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="w-[400px]">
|
<div class="w-[400px]">
|
||||||
<SquareSpeaker {speaker} {event} {image} {tools} />
|
<SquareSpeaker {speaker} {event} {image} {tools} {imgSrc} />
|
||||||
</div>
|
</div>
|
||||||
</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="mb-4 text-xl text-[#909090]">Poster (1:1.414)</div>
|
||||||
|
|
||||||
<div class="w-[760px]">
|
<div class="w-[760px]">
|
||||||
<Poster {topics} {event} {image} {tools} />
|
<Poster {topics} {event} {image} {tools} {imgSrc} />
|
||||||
</div>
|
</div>
|
||||||
</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="mb-4 text-xl text-[#909090]">Poster (simple) (1:1.414)</div>
|
||||||
|
|
||||||
<div class="w-[760px]">
|
<div class="w-[760px]">
|
||||||
<PosterSimple {event} {image} {tools} />
|
<PosterSimple {event} {image} {tools} {imgSrc} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{/if}
|
||||||
{/if}
|
{/if}
|
|
@ -2,6 +2,7 @@
|
||||||
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">
|
||||||
|
@ -10,7 +11,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" 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-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">
|
||||||
|
@ -26,7 +27,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: 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-[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,13 +3,14 @@
|
||||||
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" />
|
<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-[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">
|
||||||
|
|
|
@ -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 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">
|
<div class="absolute right-6 top-6 text-right uppercase text-sm">
|
||||||
{tools.dateFormat(event.date)}<br/>
|
{tools.dateFormat(event.date)}<br/>
|
||||||
|
|
|
@ -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" />
|
<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="absolute bottom-8 left-8 uppercase z-20">
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
|
|
|
@ -1,16 +1,25 @@
|
||||||
<script>
|
<script>
|
||||||
|
import { afterUpdate, onMount } from "svelte";
|
||||||
|
import { writable } from "svelte/store";
|
||||||
|
|
||||||
export let event;
|
export let event;
|
||||||
export let image;
|
export let image;
|
||||||
export let tools;
|
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">
|
<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" />
|
<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>
|
<div class="flex items-end justify-end w-full h-full">
|
||||||
<img src={image} class="absolute top-0 left-24 -z-0 w-[28rem]" />
|
<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="absolute bottom-8 left-8 uppercase z-20 text-xl">
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
export let event;
|
export let event;
|
||||||
export let image;
|
export let image;
|
||||||
export let tools;
|
export let tools;
|
||||||
|
export let imgSrc;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
@ -10,8 +11,13 @@
|
||||||
|
|
||||||
<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="absolute top-0 left-48 h-full w-1/3 z-10" style="background: linear-gradient(to left, transparent, black);"></div>
|
<div class="flex items-end justify-end w-full h-full">
|
||||||
<img src={image} class="absolute top-0 left-48 -z-0 w-[33rem]" />
|
<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="absolute bottom-8 left-8 uppercase z-20 text-xl">
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
|
|