Wombosvideo/f.bosin.ch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add responsive and lazy image loading

Browse Source
This commit is contained in:
Luca Bosin
2023-08-21 22:04:10 +02:00
parent 6ae22b7a9c
commit ca90df83e9
30 changed files with 197 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/lib/components/Gallery.svelte
View File

@ -1,37 +1,37 @@
<script>
import { getFileName } from '$lib/util/links';
import { strf } from '$lib/data/language.js';
function sortItems() {
items.sort((a, b) => {
if (a.item < b.item) return -1;
if (a.item > b.item) return 1;
return 0;
});
}
import Photo from './Photo.svelte';
/** @type {Item[]} */
export let items = [];
export let base = '';
export let layout = 'grid';
</script>
<section class="gallery">
<ul>
{#each items as item (item.item)}
<!-- <Photo src={`${uriBase}&item=${item.item}`} alt={$strf(item.title)} /> -->
<li>
<h3>{item.item}</h3>
<p>
<b>Title:</b> {#if item.title}{$strf(item.title)}{:else}<i>no title</i>{/if}<br />
<b>Description:</b> {#if item.description}{$strf(item.description)}{:else}<i>no description</i>{/if}<br />
<b>Links:</b> <a href={`${base}${item.item}`}>Open</a> &bullet; <a href={`${base}${item.item}/download`}>Download</a><br />
<b>Thumbnails:</b> <a href={`${base}${item.item}/t/s`}>Small</a> &bullet; <a href={`${base}${item.item}/t/m`}>Medium</a> &bullet; <a href={`${base}${item.item}/t/l`}>Large</a> &bullet; <a href={`${base}${item.item}/t/full`}>Full</a>
</p>
<img src={`${base}${item.item}/t`} alt={(item.title ? $strf(item.title) : null) || (item.description ? $strf(item.description) : null) || getFileName(item.item)} />
</li>
{/each}
</ul>
<section class="gallery"
class:gallery--grid={layout === 'grid'}>
{#if layout === 'grid'}
<ul>
{#each items as item (item.item)}
<!-- <Photo src={`${uriBase}&item=${item.item}`} alt={$strf(item.title)} /> -->
<li>
<h3>{item.item}</h3>
<p>
<b>Title:</b> {#if item.title}{$strf(item.title)}{:else}<i>no title</i>{/if}<br />
<b>Description:</b> {#if item.description}{$strf(item.description)}{:else}<i>no description</i>{/if}<br />
<b>Links:</b> <a href={`${base}${item.item}`}>Open</a> &bullet; <a href={`${base}${item.item}/download`}>Download</a><br />
<b>Thumbnails:</b> <a href={`${base}${item.item}/t/s`}>Small</a> &bullet; <a href={`${base}${item.item}/t/m`}>Medium</a> &bullet; <a href={`${base}${item.item}/t/l`}>Large</a> &bullet; <a href={`${base}${item.item}/t/full`}>Full</a>
</p>
<Photo src={`${base}${item.item}`} alt={(item.title ? $strf(item.title) : null) || (item.description ? $strf(item.description) : null) || getFileName(item.item)} />
</li>
{/each}
</ul>
{:else}
<i>layout not available</i>
{/if}
</section>
<style>

16
src/lib/components/Photo.svelte
View File

@ -11,6 +11,12 @@
*/
export let alt = undefined;
/**
* Whether the image is the first one in the viewport.
* @type {boolean}
*/
export let firstViewport = false;
/**
* The click handler for the image.
* @param {MouseEvent} event
@ -21,10 +27,12 @@
}
</script>
<a href="{src}" on:click={clickHandler}>
<figure class="photo">
<img src="{src}" alt="{alt}" />
</figure>
<a href={src} on:click={clickHandler}>
<picture>
<source media="(min-width: 850px)" srcset="{src}/t/l" />
<source media="(min-width: 450px)" srcset="{src}/t/m" />
<img src="{src}/t" {alt} loading={firstViewport ? 'eager' : 'lazy'} />
</picture>
</a>
<style>