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:
parent
1bc0132a9c
commit
98c8ce2180
@ -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">
|
@ -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: ""
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
Loading…
x
Reference in New Issue
Block a user