Add image aspect ratio to prevent page jumps

This commit is contained in:
Christoph Hagen
2025-01-14 20:19:30 +01:00
parent c1a3d22002
commit 4b448f3415
4 changed files with 22 additions and 5 deletions

View File

@ -31,7 +31,8 @@ struct ImageGallery: HtmlProducer {
let needsPagination = images.count > 1
for image in images {
result += "<div class='swiper-slide'>"
let sizeText = image.image.getImageDimensions().map { " style='aspect-ratio: \(Int($0.width)) / \(Int($0.height))'"}
result += "<div class='swiper-slide'\(sizeText ?? "")>"
result += image.content
if needsPagination {
result += "<div class='swiper-lazy-preloader swiper-lazy-preloader-white'></div>"
@ -57,6 +58,9 @@ struct ImageGallery: HtmlProducer {
return """
var swiper_\(id) = new Swiper("#\(id)", {
loop: true,
lazy: {
loadPrevNext: false,
},
slidesPerView: 1,
spaceBetween: 30,
centeredSlides: true,