add images

This commit is contained in:
tree🌴 2024-03-16 06:11:38 +01:00
parent 6fb82eecd3
commit 2609058040
17 changed files with 56 additions and 18 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 847 KiB

After

Width:  |  Height:  |  Size: 5.9 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.9 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.3 MiB

After

Width:  |  Height:  |  Size: 5.5 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 380 KiB

After

Width:  |  Height:  |  Size: 5 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6 MiB

View file

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

View file

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

View file

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

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

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

View file

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

View file

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