refactor(resources.ts): update ImageJSON interface to include separate properties for low resolution and high resolution image URLs, heights, and widths for better organization and clarity

refactor(imageJSON.html): modify image resizing logic to generate separate low resolution and high resolution image URLs, heights, and widths to improve performance and optimize image loading
This commit is contained in:
Sped0n
2023-10-30 17:44:59 +08:00
parent 6be9717f2f
commit 3cbbc5b6da
2 changed files with 15 additions and 9 deletions

View File

@@ -1,11 +1,12 @@
// data structure for images info // data structure for images info
export interface ImageJSON { export interface ImageJSON {
index: number index: number
url: string loUrl: string
imgH: number loImgH: number
imgW: number loImgW: number
pColor: string hiUrl: string
sColor: string hiImgH: number
hiImgW: number
} }
export function initResources(): ImageJSON[] { export function initResources(): ImageJSON[] {

View File

@@ -6,12 +6,17 @@
{{ $Page.Scratch.Add "img" slice }} {{ $Page.Scratch.Add "img" slice }}
{{ range . }} {{ range . }}
{{ $index = sub $index 1 }} {{ $index = sub $index 1 }}
{{ $resize := .Resize "x2000 webp Lanczos q70" }} {{ $lores := .Resize "1000x webp Lanczos q70" }}
{{ $hires := .Resize "2500x webp Lanczos q75" }}
{{ $Page.Scratch.Add "img" (dict {{ $Page.Scratch.Add "img" (dict
"index" (int $index) "index" (int $index)
"url" (string .RelPermalink) "loUrl" (string $lores.RelPermalink)
"imgH" (int .Height) "loImgH" (int $lores.Height)
"imgW" (int .Width)) "loImgW" (int $lores.Width)
"hiUrl" (string $hires.RelPermalink)
"hiImgH" (int $hires.Height)
"hiImgW" (int $hires.Width)
)
}} }}
{{- end -}} {{- end -}}
<script id="imagesSource" type="application/json">{{ $Page.Scratch.Get "img" | jsonify | safeJS }}</script> <script id="imagesSource" type="application/json">{{ $Page.Scratch.Get "img" | jsonify | safeJS }}</script>