summaryrefslogtreecommitdiff
diff options
from:
to:
context:
space:
mode:
authorGravatar SayaAndy <montferrat@tuta.io> 2025-08-18 15:56:56 +0700
committerGravatar SayaAndy <montferrat@tuta.io> 2025-08-18 15:56:56 +0700
commit647be7ed9b50b15d9c4e4ac47776f64d544b27e6 (patch)
tree1c597cfb85426d9be088f9a0ff613397314ee765
parent7e66eb1ea95f97a80f13be054e840beea4337ab4 (diff)
downloadweb-647be7ed9b50b15d9c4e4ac47776f64d544b27e6.tar.gz
web-647be7ed9b50b15d9c4e4ac47776f64d544b27e6.zip
feat: use webp of various sizes (320/560/800/1200/1600w) as thumbnails
-rw-r--r--internal/lightgallery/html_renderer.go9
-rw-r--r--views/pages/global-map.html2
-rw-r--r--views/partials/catalogue-blog-cards.html2
3 files changed, 5 insertions, 8 deletions
diff --git a/internal/lightgallery/html_renderer.go b/internal/lightgallery/html_renderer.go
index 850cd95..10258b1 100644
--- a/internal/lightgallery/html_renderer.go
+++ b/internal/lightgallery/html_renderer.go
@@ -79,17 +79,14 @@ func (r *LightGalleryHTMLRenderer) renderLightGallery(w util.BufWriter, source [
downloadUrl:
"https://f003.backblazeb2.com/file/sayana-photos/full/%s",
alt: "%s",
- sources: [{
- srcset: "https://f003.backblazeb2.com/file/sayana-photos/thumbnails/%s.webp",
- media: "(max-width: 800px)"
- }],
+ responsive: "https://f003.backblazeb2.com/file/sayana-photos/webp-320p/%s.webp 600, https://f003.backblazeb2.com/file/sayana-photos/webp-560/%s.webp 900, https://f003.backblazeb2.com/file/sayana-photos/webp-800p/%s.webp 1366, https://f003.backblazeb2.com/file/sayana-photos/webp-1200p/%s.webp 1920, https://f003.backblazeb2.com/file/sayana-photos/webp-1600p/%s.webp 2560",
thumb:
- "https://f003.backblazeb2.com/file/sayana-photos/thumbnails/%s.webp",
+ "https://f003.backblazeb2.com/file/sayana-photos/webp-320p/%s.webp",
subHtml: `+"`"+`<div class="flex flex-row light-gallery-captions">
<p class="grow !text-[1vmax]/[0.9] text-left font-spectral text-main-dark">%s</p>
<p class="!text-[1vmax]/[0.9] text-right font-spectral text-secondary">%s</p>
</div>`+"`"+`
- }`, img.URL, img.URL, util.EscapeHTML(captionHTML), imageUrlWithoutExt, imageUrlWithoutExt, captionHTML, dayDate.Format("2006-01-02 15:04:05 -07:00")))
+ }`, img.URL, img.URL, util.EscapeHTML(captionHTML), imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, captionHTML, dayDate.Format("2006-01-02 15:04:05 -07:00")))
}
w.WriteString(fmt.Sprintf(`
diff --git a/views/pages/global-map.html b/views/pages/global-map.html
index cbb6c7d..09d7ab2 100644
--- a/views/pages/global-map.html
+++ b/views/pages/global-map.html
@@ -216,7 +216,7 @@
}).addTo(map)
.bindPopup(`
<div class="flex flex-row justify-center justify-items-center">
- <img onclick="location.href='${link}';" class="cursor-pointer object-cover rounded-[10%] select-none w-[3vmax] h-[3vmax] mr-[0.5vmax]" src="https://f003.backblazeb2.com/file/sayana-photos/thumbnails/${thumbnail}.webp">
+ <img onclick="location.href='${link}';" class="cursor-pointer object-cover rounded-[10%] select-none w-[3vmax] h-[3vmax] mr-[0.5vmax]" src="https://f003.backblazeb2.com/file/sayana-photos/webp-320p/${thumbnail}.webp">
<span><b><a href="${link}">${title}</a></b><br><a href="https://www.openstreetmap.org/#map=13/${x}/${y}">${x}, ${y}</a></span>
</div>`);
}
diff --git a/views/partials/catalogue-blog-cards.html b/views/partials/catalogue-blog-cards.html
index 406ef9b..62e931a 100644
--- a/views/partials/catalogue-blog-cards.html
+++ b/views/partials/catalogue-blog-cards.html
@@ -1,7 +1,7 @@
{{- range .BlogPages }}
<hr class="first-of-type:hidden border-t-[0.3vh] my-[0.8vmin] border-dotted border-main-dark w-[80%] mx-auto">
<div class="m-[0.4vmin] flex flex-row justify-center justify-items-center">
- <img onclick="location.href='{{ .ArticleLink }}';" class="cursor-pointer object-cover rounded-[10%] select-none w-[10vmin] h-[10vmin] aspect-square my-[0.4vmin] mr-[0.8vmin]" src="https://f003.backblazeb2.com/file/sayana-photos/thumbnails/{{ .Thumbnail }}.webp">
+ <img onclick="location.href='{{ .ArticleLink }}';" class="cursor-pointer object-cover rounded-[10%] select-none w-[10vmin] h-[10vmin] aspect-square my-[0.4vmin] mr-[0.8vmin]" src="https://f003.backblazeb2.com/file/sayana-photos/webp-320p/{{ .Thumbnail }}.webp">
<div class="grow my-[0.4vmin] mx-[0.8vmin] flex flex-col justify-center">
<div class="flex flex-row gap-[5%] max-w-[100%]">
<a href="{{ .ArticleLink }}" class="flex-9/12 grow-0 block text-[1vmax] cursor-pointer">