Add responsive and lazy image loading

2023-08-21 22:04:10 +02:00
parent 6ae22b7a9c
commit ca90df83e9
30 changed files with 197 additions and 101 deletions
--- a/src/routes/[slug]/[[timestamp]]/i/[...item]/+page.svelte
+++ b/src/routes/[slug]/[[timestamp]]/i/[...item]/+page.svelte
@ -0,0 +1,26 @@
+<script>
+	import { strf } from '$lib/data/language';
+
+  /** @type {import('./$types').PageData} */
+  export let data;
+</script>
+
+<div class="container">
+  {#if data.item}
+    <img class="image" src="{data.filename}/t/full" alt={(data.item.title ? $strf(data.item.title) : null) || (data.item.description ? $strf(data.item.description) : null) || data.filename} />
+  {:else}
+    Deine Mudda
+  {/if}
+</div>
+
+<style>
+  .container {
+    display: grid;
+    place-items: center;
+    height: 100vh;
+  }
+  .image {
+    max-width: 100%;
+    max-height: 100vh;
+  }
+</style>