Update thumbnail component

- Pass in img size to help with load times and reduce layout shifts.
- Rename gameProjectThumb.svelte to thumbnail.svelte.
This commit is contained in:
Chris Dill 2021-02-21 10:37:03 +00:00
parent 1bc0132a9c
commit 98c8ce2180
2 changed files with 9 additions and 7 deletions

View File

@ -1,15 +1,16 @@
<script> <script>
export let name; export let name;
export let link; export let link;
export let src = "https://placehold.it/600x300"; export let img = "https://placehold.it/600x300";
export let description;
export let imgClass = "img-fluid mb-3 mb-md-0"; export let imgClass = "img-fluid mb-3 mb-md-0";
export let size = { width: 600, height: 300 };
export let description;
</script> </script>
<div class="row"> <div class="row">
<div class="thumb col-md-7"> <div class="thumb col-md-7">
<a href="{link}"> <a href="{link}">
<img class={imgClass} {src} alt={name}> <img class={imgClass} src={img} alt={name} width={size.width} height={size.height}>
</a> </a>
</div> </div>
<div class="blurb col-md-5"> <div class="blurb col-md-5">

View File

@ -1,20 +1,21 @@
<script> <script>
import {onMount} from 'svelte'; import {onMount} from 'svelte';
import Thumb from '../components/gameProjectThumb.svelte' import Thumb from '../components/thumbnail.svelte'
import Banner from '../components/banner.svelte' import Banner from '../components/banner.svelte'
let games = [ let games = [
{ {
name: "Sirius", name: "Sirius",
link: "./sirius", link: "./sirius",
thumb: "https://placehold.it/600x300", img: "https://placehold.it/600x300",
size: { width: 600, height: 300 },
description: "A 2D game about a wannabe space captain exploring the galaxy.", description: "A 2D game about a wannabe space captain exploring the galaxy.",
imgClass: "img-fluid mb-3 mb-md-0"
}, },
{ {
name: "Quartz", name: "Quartz",
link: "./sirius", link: "./sirius",
thumb: "https://placehold.it/600x300", img: "https://placehold.it/600x300",
size: { width: 600, height: 300 },
description: "" description: ""
} }
] ]